如何使用jQuery UI开发Web程序

html-css016

如何使用jQuery UI开发Web程序,第1张

jQuery UI开发Web程序步骤：

在百度搜索引擎搜索“jQuery UI”，并且下载。

解压jquery-ui-1.11.4，工程目录如下图所示。

新建HTML文件，引入jquery-ui.min.css、jquery.js、jquery-ui.min.js三个文件。其中jquery-ui.min.css是jQuery UI样式文件，jQuery UI顾名思义依赖jQuery，所以需要引入jQuery库，另外，需要引入jQuery UI本身的Javascript库，这里引入压缩版本以减少文件的体积。

jQuery UI是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。

<script>

  $(function() {

      $( "#dialog" ).dialog({

       autoOpen: false,

       show: {

        effect: "blind",

        duration: 1000

       },

       hide: {

        effect: "explode",

        duration: 1000

       }

    })

      

      $("#bt").click(function(){

         $("#dialog").dialog("open")

         setTimeout(function () {$( "#dialog" ).dialog("close")}, 1000)

      })

  })

  </script>

</head>

<body>

 <button id="bt">打开</button>

<div id="dialog" title="基本的对话框">

  <p>这是一个默认的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p>

</div>

带动画的，需要引入jquery-ui.min.css，jquery.min.js，jquery-ui.min.js