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()

              },

              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:,//默认打开第一页（可以设置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:,//激活autocomplete的长度

              autoFocus:true,//自动选择第一项

              delay:,//延迟多少秒激活

          })

      });

      </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:''//提前加载

            });

        });

    </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="" height="" alt="BMW M1 Hood">

     <img class="lazy" src="../img/white.gif" data-original="../img/bmw_m1_side.jpg" width="" height="" alt="BMW M1 Side">

     <img class="lazy" src="../img/white.gif" data-original="../img/viper_1.jpg" width="" height="" alt="Viper 1">

     <img class="lazy" src="../img/white.gif" data-original="../img/viper_corner.jpg" width="" height="" alt="Viper Corner">

     <img class="lazy" src="../img/white.gif" data-original="../img/bmw_m3_gt.jpg" width="" height="" alt="BMW M3 GT">

     <img class="lazy" src="../img/white.gif" data-original="../img/corvette_pitstop.jpg" width="" height="" alt="Corvette Pitstop">

  </body>

</html>

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

Jquery UI 和Easy UI常用插件的更多相关文章

iframeWin For Easy UI. 为 Easy UI 扩展的支持IFrame插件
iframeWin For Easy UI. 为 Easy UI 扩展的支持IFrame插件在一个项目中用了Easy UI,但是发现里面的 Dialog .Window.Messager 弹窗都不支 ...
关于ExtJS、JQuery UI和easy UI的选择问题
转自百度知道. 问:做企业级应用,比如***管理系统,不需要华丽的特效,只希望简单,风格统一.能用到的只有messagebox.tree.grid大概这几个,其他特效不要,忘大神根据自己的见解以及我这 ...
jquery ui 与 easy ui同时引入展示效果冲突的问题
jquery ui 由于在定位控件的时候跟easy UI 控件名相同,同时引入会导致冲突如果需要两个都存在,可以去jquery ui下载定制版ui 脚本文件
Easy UI常用插件使用
一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...
Struts2 JQuery UI常用插件
一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...
jQuery UI常用插件使用
一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...
jQuery(UI)常用插件
jQuery 官方网站:http://jquery.com/ 下载地址:http://jquery.com/download/ 插件地址: http://plugins.jquery.com/ 常用插 ...
Struts2 easy UI插件
一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...
easy ui插件
简介: easy UI是类似于jQuery UI的插件库注意:多脚本同时使用时,注意脚本冲突问题. 常用插件: 1.tree插件(tree插件实现动态树形菜单) 2.datagrid插件(datag ...

随机推荐

Enterprise Solution 2.3
1. 登陆窗体和主界面增加语言选项,同时可记住用户登陆的语言和数据库. 2. 主界面的树功能可记住上次打开的模块菜单. 3. 修复主界面菜单生成问题和导航图区上下文菜单生成问题. 4. 增加自动更新功 ...
CSS3选择器的研究
属性选择器 [title]:选择带有title属性的元素 [title='hello']:选择属性是title并且值是hello的元素 [title~='hello']:选择属性是title并且部分值 ...
浅谈Winform事件的实现以及模拟其事件的实现(附实现源码)
当我们初学Winform的时候被其神奇的事件功能所吸引,当点击一个按钮时,便会跳到我们所写的点击方法当中去.然而这并不符合我们对方法的理解,究竟.net在后面帮助我们实现了什么.我们怎样模拟其事件的实 ...
如何查看某个查询用了多少TempDB空间
最近帮助客户调优的过程中,发现客户的TempDB存在非常大的压力,经过排查是发现某些语句对TempDB的巨量使用所导致. 在SQL Server中,TempDB主要负责供下述三类情况使 ...
Js控制显示、隐藏文本框中的密码
Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序主要是获取HTML元素对象,然后强制更改元素属 ...
codeforces Gargari and Permutations(DAG+BFS)
/* 题意:求出多个全排列的lcs! 思路:因为是全排列,所以每一行的每一个数字都不会重复,所以如果有每一个全排列的数字 i 都在数字 j的前面,那么i, j建立一条有向边! 最后用bfs遍历整个图, ...
《BI那点儿事》Microsoft 决策树算法——找出三国武将特性分布，献给广大的三国爱好者们
根据游戏<三国志11>武将数据,利用决策树分析,找出三国武将特性分布.其中变量包括统率.武力.智力.政治.魅力.身分.变量说明:统率:武将带兵出征时的部队防御力.统帅越高受到普通攻击与兵法 ...
JAVA 设计模式模板方法模式
定义模板方法模式 (Template Method) 定义了一个操作中的算法的骨架,而将部分步骤的实现在子类中完成. 模板方法模式使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 模 ...
在SQL Server里为什么我们需要更新锁
今天我想讲解一个特别的问题,在我每次讲解SQL Server里的锁和阻塞(Locking & Blocking)都会碰到的问题:在SQL Server里,为什么我们需要更新锁?在我们讲解具体需 ...
使用redis和fastjson做应用和mysql之间的缓存
第一次做这种javaweb的项目,难免还是要犯很多错误. 大概也知道,redis常常被用来做应用和mysql之间的缓存.模型大概是这样子的. 为了让redis能够缓存mysql数据库中的数据,我写了很 ...

Jquery UI 和Easy UI常用插件

Jquery UI 和Easy UI常用插件的更多相关文章

随机推荐

热门专题