jQuery UI常用插件使用

一、什么是插件

①是遵循一定接口规范编写的程序

②是原有系统平台功能的扩展和补充

③只能运行在规定的系统平台下，而不能单独运行

注：由于jQuery插件是基于jQuery脚本库的扩展，所以所有jQuery插件都必须依赖于jQuery基础脚本库，在加入插件时需要先引入jQuery基础脚本库，再引入插件库，一定要注意引入的先后顺序。

jQuery插件的参数一般采用的是JSON格式

二、常用插件

dialog插件：常用的对话框展现形式分为普通对话框和form对话框

常用参数：

jQuery UI常用插件使用

引入jQuery-ui库：

jQuery UI常用插件使用

<html>
  <head>
    
    <title>demo1_dialog.jsp</title>
    <script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>
    <link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>
    
  <script type="text/javascript">
      $(function(){
          $('#dlg').dialog({
          //设置成false,代表不自动打开  打开对话框
               autoOpen:false,
              //按钮的设置
               buttons:{
              '关闭':function(){
                  $('#dlg').dialog('close')
              }
              }, 
              //设置组件是否使用模式窗口。默认为false    背景颜色    
               modal:true,
              //显示
               show:{
              effect:'blind',
              duration:2000
              },
              //隐藏
              hide:{
              effect:'explode',
              duration:2000
              }
          }) 
      
      }); 

  </script>
  </head>
      
  <body>
    <button id="openbut" onclick="$('#dlg').dialog('open')">打开窗口</button>

    <div id="dlg" title="用户登录">
        用户名<br/>
        <input type="text"><br/>
        密码<br/>
        <input type="text"><br/>        
    </div>
  </body>
</html>

View Code