Jquery UI 和Easy UI常用插件

一、Jquery的插件简介

（一）什么是插件

　　　　插件(Plug-in)是一种遵循一定的应用程序接口规范编写出来的程序，是原有系统平台或应用软件平台功能的一种扩展和补充。

　　　　注意！！其只能在程序规定的系统平台下运行，而不能脱离指定平台单独利用。

（二）查找插件和帮助网址

　　1）http://jqueryui.com　　jQuery UI官方网站，收录了所有官方提供的插件。

　　2）http://plugins.jquery.com jQuery官方网站的插件库。

　　3）http://api.jqueryui.com　　 jQuery UI官方网站提供的API文档。

二、dialog插件。

　　常用对话框展示形式分为普通对话框（用于信息提示）和form对话框（用于构建提交表单）

EG.效果如下

<%@ 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>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>//导入JueryUIjar
    <link rel="stylesheet" href="jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>//css样式jar
    
  <script type="text/javascript">
      $(function(){
          $('#dlg').dialog({
              autoOpen:false,//设置组件调用时是关闭状态
              buttons:{
              'close':function(){//执行关闭对话操作需要匿名函数
                  $('#dlg').dialog('close')
              }
              },
              modal:true,//是否组件用模式窗口（就是周围变灰）
              beforeClose:function(){
                  alter(1)
              },
              open:function(){
                  alert('open le')
              },
              show:{
                  effect:'fadeIn',//淡入效果
                  duration:3000//延迟3秒
              }
          })
          
      }); 

  </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插件

　　常用的展现形式有鼠标单击触发tab切换、鼠标移动触动tab切换。

eg.效果如下

<%@ 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>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(
                {
                    collapsible:true,//设置为true组件的折叠状态
                    active:0,//默认打开第一页（可以设置true和false）
                    event:'hover'//设置触发的事件
                }
            
            )
        
        });
    </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>

四、自动化效果autocomplete插件。

eg.效果

<%@ 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>
    <base href="<%=basePath%>">
    
    <title>自动完成</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(){
          var source=[{"label":"aa","value":"aa"},{"label":"aaa","value":"aaa"},{"label":"bb","value":"bbb"}];
          $("#tags").autocomplete({
              source:source,//数据的来源
              minLength:1,//激活autocomplete的长度
              autoFocus:true,//自动选择第一项
              delay:1000,//延迟多少秒激活
          })
      });
      
      </script>
  </head>
  
  <body>
    <input type="text" id="tags"/><input type="button" value="百度一下">
  </body>
</html>

五、延迟加载

<%@ 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>延迟加载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",//使用淡入效果，值有（show直接显示、slideDown下拉等）
                event:'click'//点击事件（mouseover鼠标滑过、sporty运动的等事件）
                failurelimit:'0'//提前加载
            });
        });
    </script>
    <style type="text/css">
        img{
            border:1px solid red;
        }
    
    </style>
  </head>
  <body>
       <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
                 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
       <!-- 把 <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>

带等更新........

相关阅读:
UVa 10055
UVa 401
c++中文件应用的一点小变化
 poj2136
UVa 494
一台电脑接两个显示器，双屏显示介绍zz
学习jquery合集
 解决Windows下MinGW显示乱码zz
QWS_MOUSE_PROTO该如何写
 Qt/e中鼠标设备分析
原文地址：https://www.cnblogs.com/yejiaojiao/p/5895283.html

最新文章
STL容器[22]
stl.pair用法总结
 STL容器[19]
STL容器[23]
stl.vector用法总结
 STL容器[10]
STL容器[24]
STL容器[21]
STL容器[11]
YRDYA