首页 > 代码库 > Jquery UI

Jquery UI

2024-08-16 22:48:16   221人阅读

jQuery UI简介

jQuery UI包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。

jQuery UI组件构成

jQuery UI 主要分为3个部分：交互、微件和效果库。

交互（Interactions）

交互部件是一些与鼠标交互相关的内容，包括缩放（Resizable） , 拖动（Draggable） , 放置（Droppable） , 选择（Selectable） , 排序（Sortable）等。

小部件（Widgets）

主要是一些界面的扩展，包括折叠面板（Accordion） , 自动完成（Autocomplete） , 按钮（Button） , 日期选择器（Datepicker） , 对话框（Dialog） , 菜单（Menu） , 进度条（Progressbar） , 滑块（Slider） , 旋转器（Spinner） , 标签页（Tabs） , 工具提示框（Tooltip）等，新版本的UI将包含更多的微件。

效果库（Effects）

用于提供丰富的动画效果，让动画不再局限于jQuery的animate()方法。包括特效（Effect） , 显示（Show） , 隐藏（Hide） , 切换（Toggle） ,添加 Class（Add Class） , 移除 Class（Remove Class） , 切换 Class（Toggle Class） , 转换 Class（Switch Class） , 颜色动画（Color Animation）等。

 

插件（Plug-in）

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

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

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

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=http://www.mamicode.com/["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>

效果

技术分享

 

 

 

 

 

Jquery UI


联系
我们