网站建设纪念币发售,注册网站建设,个人网站有什么内容,网站服务器提供商我们先进入一下问答时间#xff0c;你都知道多少呢#xff1f;
#xff08;1#xff09;什么是jQuery UI 呢#xff1f; 解答#xff1a;jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们…
我们先进入一下问答时间你都知道多少呢
1什么是jQuery UI 呢 解答jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0, Firefox 3, Safari 3.1, Opera 9.6, 和GoogleChrome。
2jQuery UI 的组件组成 解答Query UI 主要分为3个部分交互、微件和效果库。
3jQuery UI和jQuery的主要区别? 解答(1) jQuery是一个js库主要提供的功能是选择器属性修改和事件绑定等等。 (2) jQuery UI则是在jQuery的基础上利用jQuery的扩展性设计的插件。提供了一些常用的界面元素诸如对话框、拖动行 为、改变大小行为等等。
简单的问答就先到这里吧让我们切入代码的世界吧
第一个小示例利用dialog实现form表单提交
第一步先准备项目所需的jQuery UI所需要的支持文件 !-- 样式引用--
link relstylesheet hrefthemes/base/jquery.ui.all.css
!-- jQuery引用--
script typetext/javascript srcjs/jQuery1.11.1.js/script
!-- jQuery UI引用 --
script typetext/javascript srcjs/jquery-ui.js/script 官网下载地址http://jqueryui.com/download/
在项目webapp下创建文件夹名称为js,把文件发在js文件夹下。目录结构如下 第二步搭建页面: body
div iddialogh2用户登录/h2form actionls methodpost 用户名input typetext nameuname iduname/br/密 码input typetext namepwd idpwd/br//form
/div
input idopener typebutton value打开form表单/
/body script typetext/javascript$(function(){$(#dialog).dialog({//是否自动打开 默认为trueautoOpen:false,width:350,height:350,//点击按钮触发buttons:{提交:function(){//表单提交$(form).submit();}}});//点击对话窗口时打开隐藏的form表单$(#opener).click(function(){$(#dialog).dialog(open);});});
/script dialog插件的常用参数 常用参数属性 类型 说明Boolean autoOpen 属性 设置该组件被调用时的打开状态。默认值为true即打开对话框Object buttons 或Array buttons 属性 显示一个按钮可以设置该按钮的显示文本和点击函数Boolean modal 属性 设置组件是否使用模式窗口。默认为falseclose() 方法 执行关闭对话框操作open() 方法 执行打开对话框操作beforeClose(event,ui) 事件 当dialog尝试关闭时此事件将被触发参数说明event为事件对象ui为当前插件对象close(event,ui) 事件 当dialog被关闭后此事件将被触发open(event,ui) 事件 当dialog被打开后此事件将被触发 可以根据上面的参数编写代码。
用户登录提交到servlet进行判断所以我在这里创建了一个LoginServlet进行逻辑判断 public class LoginServlet extends HttpServlet {private static final long serialVersionUID 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String name request.getParameter(uname);String pwd request.getParameter(pwd);if(1.equals(name)1.equals(pwd)){request.getSession().setAttribute(name,name);response.sendRedirect(/09jQueryUI/success.jsp);}else{response.sendRedirect(/09jQueryUI/index.jsp);}}} 成功页面把用户名打印出来即可。。
body欢迎%request.getSession().getAttribute(name) %
/body
上述的代码就是一个简单的dialog插件应用的小案例你再也不用羡慕那些网站做的花哨的页面了因为你也可以的。。。。。
接下来我继续讲解下一个jQuery UI常用的插件会是什么呢来猜一猜它就是tabs插件
tabs插件支持多种风格的选项卡模式普通选项卡带子选项的选项卡扁平风格的选项卡响应式选项卡和手机选项卡等。
上述的支持文件我们就不再次讲解了。
页面的创建 body
div idmyTabs
ullia href#firstTab第一个/a/lilia href#secondTab第二个/a/lilia href#thirdTab第三个/a/li/uldiv idfirstTab第一个选项卡/divdiv idsecondTab第二个选项卡/divdiv idthirdTab第三个选项卡/div
/div
/body script/script标签内的代码你也可以在选项卡内在嵌套子选项卡在这里就是做实现了有想法的同学可以在闲余的时间试试。。。。
我们还要讲点什么呢总觉得缺少点东西是不是对了还有menu插件呢
menu:菜单的意思。
我们经常在上网的时候有很多网站都有下拉列表框包含子类的效果我们也可以做一个简单的效果。。。。 div ul idmenulia href#系统管理/a/lilia href#市场管理/a/lilia href#财务管理/aulli classui-state-disableda href#财务部/a/lilia href#考核部/a/li/ul/lilia href#产品管理/aullia href#产品检测部/aullia href#产品合格/a/lilia href#产品报废/a/li/ul/lilia href#产品销售部/a/li/ul/li/ul/div script/script标签内的代码 script typetext/javascript$(function(){$(#dialog).hide();$(#mydiv).mouseover(function(){$(#dialog).show(); });$(#mydiv).mouseout(function(){$(#dialog).hide(); }); $(#menu).menu({//不可用 // disabled:true,//获得焦点触发的事件focus:function(){//当我们移动到任何选项上时都会把整个下拉菜单变为不可用 $(this).menu(option,disabled,true);} }); });
/script
style typetext/css
.ui-menu{
width:120px;
}li{list-style-type: none;}#mydiv{width:120px;}
/style 这里就可以实现下拉列表框的效果下面的图为常用的参数 常用参数属性 类型 说明Object icons 属性 设置该组件使用菜单图标Boolean disabled 属性 设置菜单不可用option(String name) 方法 获取指定选项的值expand([event]) 方法 打开当前菜单项的子菜单focus(event,ui) 事件 当菜单获取焦点或任何菜单项被打开时触发该事件 menu插件还能实现一种外部引用的效果在一个页面通过点击按钮加载数据。。。。
页面上的代码 body
divul idmenulia href#系统管理/a/li/ul
/div
/body script/script标签内的代码
script typetext/javascript $(function(){ $(#menu).menu({ select:function(){ $.get(info.jsp,function(data){ $(#menu).append(data); $(#menu).menu(refresh); }); } }); }); /script style typetext/css .ui-menu{ width:120px; } li{ list-style-type: none; } /style 引用页面的代码 % page languagejava contentTypetext/html; charsetUTF-8pageEncodingUTF-8%
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtdlia href#市场管理/a/lilia href#财务管理/aul!-- 这里设置的属性为不可用状态 --li classui-state-disableda href#财务部/a/lilia href#考核部/a/li/ul/lilia href#产品管理/aullia href#产品检测部/aullia href#产品合格/a/lilia href#产品报废/a/li/ul/lilia href#产品销售部/a/li/ul/li 一个简单的引用就是这样实现了再也不用为了那么绚丽的页面而羡慕了。。。。。
最后讲解一个我们经常碰到的情况就是当我们在百度页面或者必应页面搜索资料时往往你还没打完下面就会联想出来一些相关的词汇是不是很智能呢我们接下来讲解的autocomplete插件就可以实现这个效果。
先来点理论的 语法$(selector).autocomplete([settings]); 常用属性属性 说明String Source 或 用于指定数据来源类型为String、Array、functionArray Source 或 String用于Ajax请求的URL地址返回ArrayJSON格式Array即字符串数组 或 JSON数组function Source( function(request, response)Object reuqest, 通过request.term获得输入的值term为默认参数名function response( response([Array])用来呈现远程数据Object data )) Integer minLength 当输入框内字符串长度达到minLength时激活autocompleteBoolean autoFocus 当autocomplete选择菜单弹出时自动选中第一个Integer delay 即延迟多少毫秒激活autocomplete常用事件:事件 说明focus(event,ui) autocomplete的结果列表任意一项获得焦点时触发ui.item为获得焦点的项select(event,ui) autocomplete的结果列表任意一项选中时触发ui.item为选中的项change(event,ui) 当值改变时触发ui.item为选中的项 接下来一个小示例
邮箱效果 email 效果//准备数组存储域名var hosts [126.com,gmail.com, live.com, hotmail.com, yahoo.com, cnblogs.com, qq.com, 163.com];$(#email).autocomplete({autoFocus: true,//定义资源函数source: function(request, response) {var term request.term, //request.term为输入的字符串ix term.indexOf(),name term, // 用户名host , // 域名result []; // 结果result.push(term);if (ix -1) {name term.slice(0, ix);host term.slice(ix 1);}if (name) {var findedHosts (host ? $.grep(hosts, function(value) {return value.indexOf(host) -1;}) : hosts),findedResults $.map(findedHosts, function(value) {return name value; //返回字符串格式});result result.concat($.makeArray(findedResults));}response(result); //呈现结果}});divinput typetext idemail//div 在这里解释一下上面用的我们陌生的方法 解释grep方法使用过滤函数过滤数组元素。此函数至少传递两个参数待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。源码分析grep: function( elems, callback, inv ) {var ret [], retVal;inv !!inv;// Go through the array, only saving the items// that pass the validator functionfor ( var i 0, length elems.length; i length; i ) {retVal !!callback( elems[ i ], i );if ( inv ! retVal ) {ret.push( elems[ i ] );}}return ret;}makeArray方法将类数组对象转换为数组对象。类数组对象有 length 属性其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。源码分析// results is for internal usage onlymakeArray: function( array, results ) {var ret results || [];if ( array ! null ) {// The window, strings (and functions) also have length// Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930var type jQuery.type( array );if ( array.length null || type string || type function || type regexp || jQuery.isWindow( array ) ) {push.call( ret, array );} else {jQuery.merge( ret, array );}}return ret;},这里接受两个参数其中第二个参数是内部使用的在源码内部经常被调用作为其他方法的支持方法。创建一个新数组ret如果只有一个参数则为空如果存在第二个参数就把第二个参数赋值给ret在array参数存在的前提下获取其数据类型如果数据类型为字符串、函数或者正则时或者不存在length属性时则假定array不是数组或者类数组因为字符串、函数和正则黑莓系统下都是有length属性的所以只判断length不准确如果不是数组或者类数组就直接将第一个参数放入ret的末尾。如果通过了则认为是数组或者是类数组此时调用merge方法将两个数组合并最后返回ret。
