jQuery UI

時間 2019-11-16

標籤 jquery 欄目 JQuery 简体版

原文原文鏈接

jQuery UI簡介

jQuery UI包含了許多維持狀態的小部件（Widget），所以，它與典型的 jQuery 插件使用模式略有不一樣。全部的 jQuery UI 小部件（Widget）使用相同的模式，因此，只要您學會使用其中一個，您就知道如何使用其餘的小部件（Widget）。javascript

jQuery UI 主要分爲3個部分：交互、微件和效果庫。css

插件（Plug-in）

是遵循必定接口規範編寫的程序json

是原有系統平臺功能的擴展和補充jsp

只能運行在規定的系統平臺下，而不能單獨運行ide

Tip：jQuery插件是指基於jQuery腳本庫開發出來的擴充函數庫，jQuery的官方插件叫作jQuery UI。函數

Dialog插件工具

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'dialog.jsp' starting page</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({
          autoOpen:false,
          buttons:{
            'close':function(){
              $('#dlg').dialog('close')
            }
            
            open:function(){
            alert(1)
            
            }
          },
          modal:true,
          show:{
           effect:'blind',
                  duration:1000
          },
          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>

運行效果：

Tabs插件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  
    <title>My JSP 'tabs.jsp' starting page</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>
  <link rel="stylesheet" href="../jquery-ui-1.9.2/demos/demos.css" type="text/css"></link>
  <script type="text/javascript">
  $(function(){
      $('#tabs').tabs({
        //摺疊
        //collapsible:true,
        
        //從第幾位開始展現，第一位是0 
        //active:1,
        
        //設置切換選項卡的觸發事件
        //event:'mouseover',
        
        //打開後觸發
        //activate:function(){
        //    alert(1)
        //}
      
        //打開時觸發
        beforeActivate:function(){
            alert(1)
        },
          
        //內容重載時觸發
        beforeLoad:function(){
            alert(1)
        }
      });
      
  })
  
  </script>
  
  </head>
  
  <body>
  <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Tabs1</a>
            </li>
            <li><a href="#tabs-2">Tabs2</a>
            </li>
            <li><a href="#tabs-3">Tabs3</a>
            </li>
        </ul>

        <div id="tabs-1">
            <p>content of tab one</p>
        </div>
        <div id="tabs-2">
            <p>content of tab two</p>
        </div>
        <div id="tabs-3">
            <p>content of tab three</p>
        </div>
    </div>
  </body>
</html>

Menu插件

實現效果：

autocomplete插件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    
    <title>My JSP 'autocomplete.jsp' starting page</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>
  <link rel="stylesheet" href="../jquery-ui-1.9.2/demos/demos.css" type="text/css"></link>
  <script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery.ui.autocomplete.js"></script>
  
  <script type="text/javascript">
  $(function(){
     // var data=["aa","aaa","bb","cc"];
      //json
      var data=[{"label":"aa","value":"1"},{"label":"bb","value":"2"}]
      $('#ao').autocomplete({
          //綁定數據
          source:data,
          //最少長度激活
          //minLength:2,
          //延遲
          //delay:2000,
          //默認選擇第一項
          //autoFocus: true,
         
          //建立時觸發
          // create:function(){
          //      alert(1)
          // }
          //開始查找請求
          //search:function(){
          //  alert(1)
          //},
          //列表被選中時觸發
          //select:function(){
          //       alert(1)
          //}
          
          //列表任意一項得到焦點時觸發
          //focus:function(){
          //      alert(1)
          //}
          
      });
  })
  
  </script>
  </head>
  
  <body>
    <input id="ao" />
  </body>
</html>