jQuery UI常用插件使用

首页 > 代码库 > jQuery UI常用插件使用

2024-08-16 20:41:37 220人阅读

一、什么是插件

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

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

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

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

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

二、常用插件

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

常用参数：

技术分享

引入jQuery-ui库：

技术分享

<html>
  <head>
    
    <title>demo1_dialog.jsp</title>
    <script type="text/javascript" src=http://www.mamicode.com/"../jquery-ui-1.9.2/jquery-1.8.3.js"></script>
    <script type="text/javascript" src=http://www.mamicode.com/"../jquery-ui-1.9.2/ui/jquery-ui.js"></script>
    <link rel="stylesheet" href=http://www.mamicode.com/"../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="http://www.mamicode.com/jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>
<link rel="stylesheet" href="http://www.mamicode.com/jquery-ui-1.9.2/demos/demos.css" type="text/css"></link>
<script type="text/javascript" src="http://www.mamicode.com/jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/#tabs-1">Tabs1</a>
            </li>
            <li><a href="http://www.mamicode.com/#tabs-2">Tabs2</a>
            </li>
            <li><a href="http://www.mamicode.com/#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="http://www.mamicode.com/jquery-ui-1.9.2/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/jquery-ui-1.9.2/ui/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://www.mamicode.com/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="http://www.mamicode.com/#">小明一中</a>  
                <ul>  
                    <li><a href="http://www.mamicode.com/#">高中部</a>  
                        <ul>  
                            <li><a href="http://www.mamicode.com/#">高一(1)班</a></li>  
                            <li><a href="http://www.mamicode.com/#">高一(2)班</a></li>  
                            <li><a href="http://www.mamicode.com/#">高一(3)班</a>  
                                <ul>  
                                    <li><a href="http://www.mamicode.com/#">小胡</a></li>  
                                    <li><a href="http://www.mamicode.com/#">小李</a></li>  
                                    <li><a href="http://www.mamicode.com/#">逗比</a></li>  
                                </ul>  
                            </li>  
                        </ul>  
                    </li>  
                    <li><a href="http://www.mamicode.com/#">初中部</a>  
                        <ul>  
                            <li><a href="http://www.mamicode.com/#">初一(1)班</a></li>  
                            <li><a href="http://www.mamicode.com/#">初一(2)班</a></li>  
                            <li><a href="http://www.mamicode.com/#">初一(3)班</a></li>  
                        </ul>  
                    </li>  
                    <li><a href="http://www.mamicode.com/#">教研部</a></li>  
                </ul>  
            </li>  
            <li><a href="http://www.mamicode.com/#">大明二中</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="http://www.mamicode.com/jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/jquery-ui-1.9.2/ui/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/jquery-ui-1.9.2/ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="http://www.mamicode.com/jquery-ui-1.9.2/themes/base/jquery-ui.css" type="text/css"></link>
<link rel="stylesheet" href="http://www.mamicode.com/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="http://www.mamicode.com/jquery-ui-1.9.2/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/img/white.gif" data-original="../img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
     <img class="lazy" src="http://www.mamicode.com/img/white.gif" data-original="../img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
     <img class="lazy" src="http://www.mamicode.com/img/white.gif" data-original="../img/viper_1.jpg" width="765" height="574" alt="Viper 1">
     <img class="lazy" src="http://www.mamicode.com/img/white.gif" data-original="../img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
     <img class="lazy" src="http://www.mamicode.com/img/white.gif" data-original="../img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
     <img class="lazy" src="http://www.mamicode.com/img/white.gif" data-original="../img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">

  </body>
</html>

View Code

jQuery UI常用插件使用

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > jQuery UI常用插件使用

jQuery UI常用插件使用

看完仍有疑问？有类似问题直接问程序猿