jQuery UI常用插件使用 - WJ-163－IT工程師數位筆記本

文章出處

一、什么是插件

①是遵循一定接口規范編寫的程序

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

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

注：由于jQuery插件是基于jQuery腳本庫的擴展，所以所有jQuery插件都必須依賴于jQuery基礎腳本庫，在加入插件時需要先引入jQuery基礎腳本庫，再引入插件庫，一定要注意引入的先后順序。

jQuery插件的參數一般采用的是JSON格式

二、常用插件

dialog插件：常用的對話框展現形式分為普通對話框和form對話框

常用參數：

引入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

實現效果：

tabs插件：

可實現豐富的選項卡效果。常用的展現形式有鼠標單擊觸發tab切換、鼠標移動觸發tab切換

常用屬性：

常用方法：

常用事件：

<html>
<head>
<title>tab.jsp</title>
<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/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>
<script type="text/javascript">
    $(function() {
        $('#tabs').tabs({
        //該組件的折疊狀態。默認值為false，即不可折疊        
             collapsible : true,
            //設置處于打開狀態的選項卡。默認值為0
            active : 1,
            event : 'hover' 
        
            //打開后觸發
            /* activate:function(){
            alert(1)
            }, */
            
             //打開時觸發
       /*  beforeActivate: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>

View Code

實現效果：

menu插件：

常用屬性：

<html>
  <head>
    
    <title>My JSP 'menu.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(){  
        $("#menu").menu({
        //獲得焦點時觸發
         focus:function(){
        //背景顏色
           $(this).css("background","pink")
           },
         });
       // disabled:true
     });
    </script>
     <style>
    .ui-menu{width: 150px; }
  </style>
   </head>
  <body>
    <ul id="menu">  
            <li><a href="#">小明一中</a>  
                <ul>  
                    <li><a href="#">高中部</a>  
                        <ul>  
                            <li><a href="#">高一(1)班</a></li>  
                            <li><a href="#">高一(2)班</a></li>  
                            <li><a href="#">高一(3)班</a>  
                                <ul>  
                                    <li><a href="#">小胡</a></li>  
                                    <li><a href="#">小李</a></li>  
                                    <li><a href="#">逗比</a></li>  
                                </ul>  
                            </li>  
                        </ul>  
                    </li>  
                    <li><a href="#">初中部</a>  
                        <ul>  
                            <li><a href="#">初一(1)班</a></li>  
                            <li><a href="#">初一(2)班</a></li>  
                            <li><a href="#">初一(3)班</a></li>  
                        </ul>  
                    </li>  
                    <li><a href="#">教研部</a></li>  
                </ul>  
            </li>  
            <li><a href="#">大明二中</a></li>  
        </ul>  
  </body>
</html>

View Code

實現效果：

autocomplete插件:遠程數據源實現自動完成

語法：$(selector).autocomplete([settings])

常用屬性：

常用事件：

<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>
<script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery-ui.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() {
    
        var source=["accp","apple","blue","bus"];
        $("#tags").autocomplete({
            source : source,
            //自動選擇第一項
            autoFocus:true,
            //最少長度激活
            //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="tags">

</body>
</html>

View Code

實現效果：自動查找與a匹配的值

lazyload插件：

將圖片分批按需加載、縮短用戶等待時間、緩解服務器壓力

語法：$(selector).lazyload([settings]);

常用參數：

<html>
  <head>
    <title>延遲加載demo</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/jquery.lazyload.js"></script>
    <script type="text/javascript">
        $(function(){
        $(".lazy").lazyload({
        //載入使用何種效果
        effect:"fadeIn",
        effectspeed:2000,
        //距離下一張圖片還有100像素時
        threshold:100
        });
        
        });
    </script>
    
  </head>
  <body>
       
       <!-- 把 <img> 標簽中的 src 屬性改為等待圖片的URL, data-original 屬性填上真正的圖片URL. --> 
     <img class="lazy" src="../img/white.gif" data-original="../img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
     <img class="lazy" src="../img/white.gif" data-original="../img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
     <img class="lazy" src="../img/white.gif" data-original="../img/viper_1.jpg" width="765" height="574" alt="Viper 1">
     <img class="lazy" src="../img/white.gif" data-original="../img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
     <img class="lazy" src="../img/white.gif" data-original="../img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
     <img class="lazy" src="../img/white.gif" data-original="../img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">

  </body>
</html>