本文主要讲解实例, 大家可以通过实例代码快速上手jQuery UI. 使用jQuery UI我们可以再不借助其他插件的情况下完成大部分页面应用, 说其是一个官方的超级UI插件也不为过. 包含所有功能的jQuery UI类库文件为188K, 启用Gzip压缩后是45K. 虽然较大但是一次加载全网站获益.而且45K大小在当今的互谅网时代还算可以接受.

目前还没有jQuery UI的中文教程. 因为本文是实战篇, 所以不会仔细讲解基础内容. 在后面的章节中我会加入jQuery UI的基础教程.争取成为中文jQuery UI第一教程.

四. 准备工作

我将所有相关的文件, 包括各种类库文件, Theme模板放置在如下路径:

http://www.dotnetapi.com/JSLib/

此路径开通了目录浏览, 可以直接查找需要的文件. 目录组织结构按照本系列: (八) 插播:jQuery实施方案中介绍的方案组织.

另外也可以从Google上引用文件, Google的CDN速度更快也更有保证, 参见: Google's CDN

本文的实例的所有引用都使用 WebConfig.ResourceServer 这个属性:
public class WebConfig { public static string ResourceServer = @"http://www.dotnetapi.com/"; }

五.弹出层对话框

弹出框是最常用最实用的功能. 先来看一下艺龙网上的一些应用场景.

1. 艺龙网应用场景举例

(1) 静态提示类弹出层. 弹出层的内容是固定的.

(2) 动态提示类弹出层. 弹出层内容是根据事件源变化的.

(3)遮罩类弹出层. 弹出时背景变灰并不可点击.

2. 应用实例

使用 jQuery UI 的 Dialog 组件. 我以轻松实现上面三种效果.

Dialog组件的主要特点是可以拖动(Draggable), 可以改变大小(Resizable) .

示例完整代码如下:
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>jQuery UI - 弹出层应用实例 Dialog</title>  <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" /> <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js" type="text/javascript"></script> <% if (false) {%><script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript"></script> <% }%> <script type="text/javascript"> /*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/ </script> <style type="text/css"> </style> </head> <body>  <div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"> <h3>Demo. 共享同一个静态弹出层, 弹出层内容固定: </h3> <div> <span id="spanShowTip1">显示提示</span>   <span id="spanShowTip2">显示提示</span>   <span id="spanShowTip3">显示提示</span>   <span id="spanShowTip4">显示提示</span>   </div> </div> <br /> <br />  <div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"> <h3>Demo. 每个弹出层内容不同, 弹出层内容存储在事件源的元素属性中: </h3> <div> <span id="spanShowDataTip1" data="颜色是红色">红色</span>   <span id="spanShowDataTip2" data="颜色是绿色">绿色</span>   </div> </div> <br /> <br />  <div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"> <h3>Demo. 弹出IFrame </h3> <div> <input type="button" id="btnShowIframe" name="btnShowIframe" value="显示弹出层"/> </div> </div>  <div id="divTip" title="自定义标题"> <p>弹出层</p> </div>  <div id="divIframe" title="iFrame弹出层" style="text-align:center;"> <iframe src="http://www.elong.com" width="450px" height="230px"></iframe> </div> <script type="text/javascript"> /*==========用户自定义方法==========*/ /*==========事件绑定==========*/ $(function() { //静态提示类弹出层 $("span[id^=spanShowTip]").css("cursor", "pointer").click(function(event) { $("*").stop(); event.stopPropagation(); var top = $(event.target).offset().top + 20; var left = $(event.target).offset().left; $("#divTip").dialog("option", "position", [left, top]); $("#divTip").dialog("open"); }); //动态提出类弹出层 $("span[id^=spanShowDataTip]").css("cursor", "pointer").click(function(event) { $("*").stop(); $("#divTip").dialog("close"); event.stopPropagation(); var top = $(event.target).offset().top + 20; var left = $(event.target).offset().left; $("#divTip").html($(event.target).attr("data")); $("#divTip").dialog("option", "position", [left, top]); $("#divTip").dialog("open"); }); //遮罩类弹出层 $("#btnShowIframe").click(function(event) { event.preventDefault(); event.stopPropagation(); $("#divIframe").dialog("open"); }); //单击自身取消冒泡 $("#divTip, #divIframe").bind("click", function(event) { event.stopPropagation(); }); //document对象单击隐藏所有弹出层 $(document).bind("click", function(event) { $("#divTip").dialog("close"); $("#divIframe").dialog("close"); }); }); /*==========加载时执行的语句==========*/ $(function() { //初始化提示类弹出层 $("#divTip").dialog({ show: null, bgiframe: false, autoOpen: false }); //初始化遮罩类弹出层 $("#divIframe").dialog({ show: null, bgiframe: false, autoOpen: false, width: 500, height: 300, draggable: true, resizable: false, modal: true }); }); </script> </body> </html>

效果如图:

静态提示类弹出层

动态提示类弹出层:

遮罩类弹出层:

3.关键点讲解

(1)计算弹出层位置

提示类弹出框最重要的是计算弹出框的位置. 通过事件对象获取到事件源, 使用offset()函数计算事件源相对于document的位置:
var top = $(event.target).offset().top; var left = $(event.target).offset().left;

因为是相对于document, 即页面左上角的位置, 所以需要将弹出层放在Body元素中的第一层. 即父类就是body. 如果包含在其他元素中, 需要确定任何一个父类的position样式设置为了relative.

计算出来的top和left是事件源的位置, 在此位置显示会将事件源对象遮盖住. 所以通常需要手工做一些偏移, 比如top+20.

(2) 取消冒泡和浏览器默认行为

如果我们为document对象绑定了单击后关闭弹出层的事件, 那么就一定要取消事件的冒泡. 使用event对象的stopPropagation()方法可以取消冒泡.

event.stopPropagation();

对于具有默认行为的元素,比如提交按钮的提交表单行为, <a>元素的超链接行为等, 我们如果在这些元素上应用事件, 还需要取消它们的默认行为:

event.preventDefault();

(3) 设置动画效果与取消动画

通过设置dialog的配置项的show属性, 可以设置显示dialog时候的动画效果:
$('.selector').dialog({ show: 'slide' });

show默认为null即无动画, 可以是使用下列值:

'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.

对于这些动画的效果, 可以在此页观看:

http://jqueryui.com/demos/show/

当一个动画效果执行时, 如果用户在此对这个元素进行操作, 就会出现各种问题, 比如定位不准确等. 所以如果应用了动画, 我们在对其操作时需要使用stop()函数来停止动画, 通常是停止虽有元素的动画:
$("*").stop();

但是即使停止了动画再进行操作, 如果操作的太快也容易产生问题. 所以至于是否使用动画需要经过权衡决定.

(4) 动态提示类弹出层的数据传递

动态提示类弹出层的数据是不同的, 本文实例使用的是将数据存储在元素属性data上:
<span id="spanShowDataTip1" data="颜色是红色">红色</span>

这是一种简单直观的方式. 比较容易编程实现(尤其是在使用MVC编程模型的时候.)

还有一种常用方式是使用javascript变量存储数据.这两种方式在第5章时有过讲解:

http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html

(5)更换主题

大家注意实例中的弹出层没有为其编辑任何样式, 但是显示出来后已经被美化过了. 这是因为我引用了jQuery UI的主题:
 <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" />

注释中有很多的主题, 只需要将引用路径中的"redmond"改为其中任何一个, 弹出层的样式会立刻发生变化.

VS中有一个Bug, 就是针对link标签, href中的语句块编译有问题, 某些情况下<%%>不被编辑解析. 所以我使用上面代码中的方式构造href属性值.

可以在下面的地址查看各个主题的效果:

http://jqueryui.com/themeroller/#themeGallery

六.Tab标签

不刷新页面, 在页面中的不同标签间切换:

本实例通过jQuery UI的Tabs组件实现. Tabs组件的使用与dialog一样十分简单, 默认的配置即可实现最简单的tab, 通过设置更多的options可以实现更复杂的应用.

1.应用实例

源代码:
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>jQuery UI - 弹出层应用实例 Dialog</title>  <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" /> <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js" type="text/javascript"></script> <% if (false) {%><script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript"></script> <% }%> <script type="text/javascript"> /*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/ </script> <style type="text/css"> </style> </head> <body>  <div id="tabs1" style="width:300px;"> <ul> <li><a href="#tabs1-1">One</a></li>  <li><a href="TabData.htm">Two</a></li> <li><a href="#tabs1-3">Three</a></li> </ul> <div id="tabs1-1"> <p>Tab1内容</p> </div> <div id="tabs1-3"> <p>Tab3内容</p> </div> </div> <br /> <br /> <br />  <div id="tabs2" style="width: 300px;"> <ul> <li><a href="#tabs2-1">One</a></li> <li><a href="#tabs2-2">Two</a></li> <li><a href="#tabs2-3">Three</a></li> </ul> <div id="tabs2-1"> <p>Tab1内容</p> </div> <div id="tabs2-2"> <p>Tab2内容</p> </div> <div id="tabs2-3"> <p>Tab3内容</p> </div> </div> <br /> <br /> <br />  <div id="tabs3" style="width: 300px;"> <ul> <li><a href="#tabs3-1">One</a></li> <li><a href="#tabs3-2">Two</a></li> <li><a href="#tabs3-3">Three</a></li> </ul> <div id="tabs3-1"> <p>Tab1内容</p> </div> <div id="tabs3-2"> <p>Tab2内容</p> </div> <div id="tabs3-3"> <p>Tab3内容</p> </div> </div> <script type="text/javascript"> /*==========用户自定义方法==========*/ /*==========事件绑定==========*/ $(function() { }); /*==========加载时执行的语句==========*/ $(function() { //默认Tabs $("#tabs1").tabs(); //可折叠的Tabs $("#tabs2").tabs({ collapsible: true }); //鼠标滑动即切换的Tabs $("#tabs3").tabs({ event: "mouseover" }); }); </script> </body> </html>

效果:

1. 默认设置的Tabs, Two标签内容使用Ajax获取

2.再折叠tab

3.鼠标滑动即切换的tab

2.要点讲解

(1) 注意Tabs中的HTML结构.

使用ul构建标签. 内容div一定要和标签关联, 没有关联的div将不被处理直接显示.

(2) 使用Ajax可以不指定内容容器, 但是也可以将Ajax内容放入指定容器中.
<li><a href="hello/world.html" title="Todo Overview"> ... </a></li> <div id="Todo_Overview"> ... </div>

(3) 活用事件

tab有很多事件:

select, load, show, add, remove, enable, disable

使用这些事件可以完成很多复杂任务. 需要注意事件的签名:
$('#example').bind('tabsselect', function(event, ui) { // Objects available in the function context: ui.tab // anchor element of the selected (clicked) tab ui.panel // element, that contains the selected/clicked tab contents ui.index // zero-based index of the selected (clicked) tab });

第一个是事件对象, 第二个ui对象是传递的额外参数, 我们可以获取tab对象, tab所在容器和tab的索引值.

比如我们可以在事件中做验证:
$('#example').tabs({ select: function(event, ui) { var isValid = ... // form validation returning true or false return isValid; } });

或者当添加一个tab时立刻切换到选中状态:
var $tabs = $('#example').tabs({ add: function(event, ui) { $tabs.tabs('select', '#' + ui.panel.id); } });

活学活用, 更多应用大家也可以参见tab组件的官方文档:

http://jqueryui.com/demos/tabs

七. 手风琴菜单

使用jQuery UI的accordion组件可以实现手风琴菜单. 效果见下图.

accordion文档地址: http://jqueryui.com/demos/accordion/

1.实例效果

2.实例代码
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>jQuery UI - 手风琴菜单应用实例 Accordion </title>  <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" /> <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js" type="text/javascript"></script> <% if (false) {%><script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript"></script> <% }%> <script type="text/javascript"> /========== 必须放在头部加载的语句块. 尽量避免使用 ==========/ </script> <style type="text/css"> body { font-size: 12px; } </style> </head> <body>  <div style="width: 300px; float:left; margin-left:20px;"> <div id="accordion1"> <h3><a href="#">菜单1</a></h3> <div> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> </div> <h3><a href="#">菜单2</a></h3> <div> 菜单2的内容 </div> <h3><a href="#">菜单3</a></h3> <div> 菜单3的内容 </div> </div> </div>  <div style="width: 300px; float: left; margin-left: 20px;"> <div id="accordion2"> <h3><a href="#">菜单1</a></h3> <div> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> </div> <h3><a href="#">菜单2</a></h3> <div> 菜单2的内容 </div> <h3><a href="#">菜单3</a></h3> <div> 菜单3的内容 </div> </div> </div>  <div style="width: 300px; float: left; margin-left: 20px;"> <div id="accordion3"> <h3><a href="#">菜单1</a></h3> <div> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> 菜单1的内容<br /> </div> <h3><a href="#">菜单2</a></h3> <div> 菜单2的内容 </div> <h3><a href="#">菜单3</a></h3> <div> 菜单3的内容 </div> </div> </div> <script type="text/javascript"> /==========用户自定义方法==========/ /==========事件绑定==========/ $(function() { }); /==========加载时执行的语句==========/ $(function() { //默认配置的Accordion菜单 $("#accordion1").accordion(); //取消自动高度, 可折叠 $("#accordion2").accordion({ autoHeight:false, collapsible: true }); //鼠标滑动触发, 自定义图标 $("#accordion3").accordion({ icons: { header: "ui-icon-circle-arrow-e", headerSelected: "ui-icon-circle-arrow-s" }, event: "mouseover" }); }); </script> </body> </html>

3. 关键点讲解

(1) 注意高度设置过小问题

当包含accordion控件的容器高度设计过小时, 在FireFox3中在此容器后面的内容会被accordion控件部分遮盖. 在IE中没有此问题. 经检查是因为容器高度小于菜单高度导致. 所以我们在应用时应当注意不要将容器高度设置过小.

(2) 部分关键属性

autoHeight: 设置是否自动将内容高度设置为容器高度.

collapsible: 设置是否可折叠

一般上面两个配合使用, 以为折叠后肯定会改变菜单高度, 会导致autoHeight设置为true无效.

更多属性和事件使用请参阅官方文档.

八.总结

本章简单介绍了jQueryUI, 并且使用jQuery UI完成了弹出层,tabs,手风琴菜单的应用实例. 使用jQuery UI可以不需要额外寻找插件. 并且实现简单.

但是有些功能是必须使用插件完成的. 下一张讲解两个插件实例: 自动完成插件AutoComplete 和表单验证插件jQuery Validate.

本章源代码下载:

http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy-10.rar

博文来源：http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-10.html

你可能感兴趣的:(JqueryUI)

jQuery UI 简介 wjs2024 开发语言
jQueryUI简介1.引言jQueryUI是一个建立在jQueryJavaScript库之上的开源小部件和交互库，旨在创建高度交互的网页。它提供了一系列预先设计好的小部件，如拖放、排序、对话框、工具提示等，以及用于构建复杂用户界面的交互方法。jQueryUI的设计目标是简化HTML文档的交互和动画处理，使得开发者能够轻松地创建具有丰富交互性的网页。2.功能概述2.1小部件（Widgets）jQu
前端开发框架推荐总结二 Devil枫前端框架前端
在前端开发领域，框架的选择对于项目的成功至关重要。它们提供了丰富的组件、工具和最佳实践，帮助开发者快速构建出美观、功能强大的用户界面。本文将介绍下面四个前端开发框架：Bootstrap、easyui、jQueryUI和layui。一：Bootstrap特点:1.响应式设计：Bootstrap内置了强大的响应式布局系统，使得网页能够在不同设备和屏幕尺寸上都能良好地显示。2.丰富的组件：提供了大量的U
jqueryUI,select标签change事件不生效问题解决方法 QQ767574478 web前端 jquery ui select 标签 web jquery
使用下面的方式change方法是不起作用的$("#selectID").change(function{console.log("change");})当使用jqueryUI定义select时应该$("#selectID").selectmenu({change:function(){console.log(1);}});
07-JQuery插件应用 D丝学编程
本教程主要以JqueryUI为例，简单介绍Jquery插件的使用。使用JQueryUI提供的基本功能，需要如下文件支持:(1)jquery-ui.css(2)jquery.js(3)jquery-ui.jsjqueryui主题风格:可以通过如下网站地址选择风格或者自定义https://jqueryui.com/themeroller/一、JqueryUI-AutocompleteJqueryUI-
BootstrapTable 行内编辑解决方案：x-editable 鄂东男孩 java bootstrap
一、x-editable组件介绍x-editable组件是一个用于创建可编辑弹出框的插件，它支持三种风格的样式：bootstrap、JqueryUI、Jquery。大致效果如下图：根据博主一贯的风格，这里肯定是选用第一种喽。首先还是给出开源地址吧。x-editable开源地址：https://github.com/vitalets/x-editablex-editable文档地址：X-editab
Udemy网站课程6-jQueryUI 磊_5d71
jQueryUI库引用可以直接引用Google的库https://developers.google.com/speed/libraries/LearningjQueryUI#square{width:200px;height:200px;background-color:blue;}$("#square").draggable();放入功能#square{width:200px;height:2
日期选择器：jquery datepicker的使用「已注销」 jquery javascript 前端
在jqueryui中，提供了一个非常实用的日期选择器：datepicker，使用它能非常方便的展现日历中的日期，灵活配置相关选项，包括日期格式、范围等。我们经常在WEB应用中用到datepicker，比如要求用户输入日期进行相关查询的。我们很早之前就应用datepicker到很多项目中，今天整理成文与大家分享。demohttp://www.helloweba.com/demo/datepicker
前端（正则表达式、cookie、本地存储、jQueryUI）埃菲尔上的铁塔梦i
1、正则表达式1、什么是正则表达式：能让计算机读懂的字符串匹配规则。2、正则表达式的写法：varre=newRegExp('规则','可选参数');varre=/规则/参数;3、规则中的字符(1）普通字符匹配：如：/a/匹配字符‘a’，/a,b/匹配字符‘a,b’(2）转义字符匹配：\d匹配一个数字，即0-9\D匹配一个非数字，即除了0-9\w匹配一个单词字符（字母、数字、下划线）\W匹配任何非单
事件，动画，jQueryUI-03 白雪公主960
正课:事件动画jQueryUI事件:模式触发事件:DOM:elem.onxxx();问题:只能触发直接用onxxx绑定的事件处理函数用addEventListener添加的事件监听，无法模拟触发jq:(...).事件名页面加载后执行:特殊:(document).ready(function(){...})简:(function(){...});其实:只要将script放在body的结尾，就可实现D
jQueryUI等晓枷锁
jQueryUI.con{width:300px;height:300px;border:1pxsolid#000;margin:50pxauto0;}.box{width:50px;height:50px;background-color:gold;cursor:pointer;/*鼠标经过时指针为手的形状*/}$(function(){//draggable()使盒子可以任意拖动$('.box
javaweb实现登录案例 Nuyoahll-_-ll java
功能：给出登录页面，登陆成功。给出成绩页面并且支持修改成绩分数。效果展示：总结：麻雀虽小，五脏俱全。登陆成功的页面支持修改成绩，实时反馈，登录页面涉及了jqueryUI设计警告弹窗+ajax向服务器传送数据。剩下的就是和数据库的操作。login.jsp(页面)利用jqueryUI设计弹出警告框。通过ajax向服务器发送请求，并返回结果。Documenthtml{width:100%;height:
学习JEECG的个人看法罗密欧和猪过夜 JAVA技术 JAVA IT
一、个人感悟公司里存在着两大阵营，C#与Java语言，所谓世界上没有最好的语言，只有最好的程序猿。本人使用Java开发也有几个年头，经过两个月的研究学习，从多首页风格的展示及多组织的区分，前台代码的封装及使用大大的提升了工作效率。一些普通的增删改查功能单表操作等...可直接通过代码生成器完成。简单快捷，同时集成了当下流行的Echarts、EasyUI、JqueryUI等等。开发图形报表及前台界面美
elFinder ZIP 参数注入导致命令注入（CVE-2021-32682） blackK_YC 网络安全安全 web安全系统安全
漏洞描述elFinder是一个用于Web的开源文件管理器，使用jQueryUI用JavaScript编写。在elFinder2.1.48及更早版本中发现一个参数注入漏洞。此漏洞可能允许攻击者在托管elFinderPHP连接器的服务器上执行任意命令，即使配置最少也是如此。这些问题已在版本2.1.59中修补。解决方法是，确保连接器不会在未经身份验证的情况下公开。引用：elFinder-ACaseStu
常用知识点林ze宏
属性选择：$.find("input[name='selColumns']")$.find("input:not([id])")大于：$.find(".row:gt(0)")jQueryUI：fadeIn和fadeOut淡入淡出slideDown和slideUp滑下和滑上拖拽和放置：draggable和droppablejQueryUI右键菜单contextMenu，配和位置this.$(".pr
mCustomScrollbar滚动条插件使用说明 qq_27628085 jquery插件
mCustomScrollbar是个基于jQueryUI的自定义滚动条插件，它可以让你灵活的通过CSS定义网页的滚动条，并且垂直和水平两个方向的滚动条都可以定义，它通过BrandonAaronjquerymouse-wheelplugin提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等。(HTML必须存在于文档流,不能为di
jQuery UI简单的讲解 omygodvv jquery ui 前端
我们先进入一下问答时间，你都知道多少呢？（1）什么是jQueryUI呢？解答：jQueryUI是以jQuery为基础的开源JavaScript网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE6.0+,Firefox3+,Safari3.1+,Opera9.6+,和GoogleChrome。（2）jQ
【前端】Jquery UI +PHP 实现表格拖动排序下页、再停留前端技术 ui jquery php
目的：使用jqueryui库实现对表格拖拽排序，并且把排序保存到数据库中效果如下一、准备工作：1、下载jqueryui库，可以直接引用线上路径2、前端我使用的是layui，后端是PHP二、使用逻辑说明1、引入jqueryui库2、js代码使用jqueryui的update()方法，获取拖动的条目id和当前页码，发送到后台3、由于我这里后端使用了thinkphp的paginate进行分页，所以为保证
使用jQuery和jQuery UI拖动table中的tr元素，改变tr元素的顺序 LEETOON jQuery jQuery 拖动table中的tr元素改变tr元素的顺序 jQuery UI
在使用table制作目录时，会遇到调整目录顺序的问题；或者在使用table显示数据时，通过改变table中数据的顺序，使得两条不相邻的数据相邻，对比数据信息。那么，通过什么方法，能够拖动table中tr元素呢？本文使用jQuery和jqueryUI框架中的函数，通过鼠标拖动tr，改变tr的顺序。table拖拽tr{cursor:pointer;}td{padding:5px10px;}序号年份标题
DataTables API及服务端处理模式介绍和后端分页案例 smile radiantly 前端插件 javascript html jquery
推荐文章：前端插件之Datatables使用–上篇前端插件之Datatables使用–下篇一.DataTables概述Datatables是一款jquery表格插件.是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能.支持分页,即时搜索和排序支持数据源:DOM,JavaScript,Ajax和服务器处理支持不同的主题:DataTables,jqueryUI,Bootstrap,Foun
漏洞复现-jquery-picture-cut 任意文件上传_（CVE-2018-9208） order libra 漏洞复现 jquery 前端 javascript 安全 web安全安全威胁分析网络安全
jquery-picture-cut任意文件上传_（CVE-2018-9208）漏洞信息jQueryPictureCutv1.1以下版本中存在安全漏洞CVE-2018-9208文件上传漏洞描述picturecut是一个jquery插件，以友好和简单的方式处理图像，具有基于bootstrap或jqueryui的漂亮界面，具有ajax上传，从资源管理器拖动图像，图像裁剪等强大的功能。jQuery-Pi
html 多选框下拉,一个模拟html下拉多选框的原生实现. 潇湘冷竹 html 多选框下拉
用js,html,css简单的实现一个HTML下拉多选框，不试用其他框架的情况下，可以借鉴一下，如果用jqueryUI,BOOTSTRAP,就没必要参考了。毕竟那些现成的东西更好用。body{font:normal14px/100%"AndaleMono",AndaleMono,monospace;color:#fff;padding:50px;width:300px;margin:0auto;b
jQuery插件介绍及使用马佳乐
什么是插件？插件是一个js库，用来做扩展功能的。jQuery在线插件库可在里面查找自己需要的插件jQueryUI插件（jQueryuserinterface）jQueryUI插件是jQuery团队自己开发的一套用户界面jQueryUI下载官网jQueryUI下载及使用方法1.在浏览器进入下载官网，点击CustomDownload（自定义下载），即可下载完毕。这个版本是最新版本也可按下图步骤下载其他
Jquery Datatables的使用秋寒屿前端
参考：Datatables中文网Datatables官网Datatables是一款强大的Jquery表格处理插件，样式方面可以兼容bootstrap3/4、JqueryUi等，也有默认的样式可以选择。使用Datatables可以很灵活的从服务端通过ajax更新表格数据，实现排序、分页等功能。一、安装登录官网下载，可以看到有一个选择的表单让你自定义下载包的内容，可以选择样式、扩展组件、Jquery库
jQuery UI 实例 - 缩放（Resizable）智慧浩海 jQuery UI ui jquery javascript
使用鼠标改变元素的尺寸。如需了解更多有关resizable交互的细节，请查看API文档可调整尺寸小部件（ResizableWidget）。默认功能在任意的DOM元素上启用resizable功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。jQueryUI缩放（Resizable）-默认功能#resizable{width:150px;height:150px;padding:0.5em;}#r
jQuery UI插件draggable 你说我的笑绽放在过去
拖曳插件draggable的功能是拖动被绑定的元素，当这个jQueryUI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下：$(selector).draggable({options})options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。例如，在
前端工程化开发中“国际化和主题切换”方案小记 diankeng6172 前端 javascript git ViewUI
1、前言这些年来，前端伴随着Vue和React等等一些框架的出现，开发方式发生了日新月异的变化。笔者从业10多年，组件方面使用过早期的微软Asp.Net的服务器渲染组件、JAVA体系的JSP模板控件，用过基于Jquery的众多框架（EasyUI、JqueryUI）组件，ExtJS，Dojo等等。虽然这些前端组件（或者叫做框架）层出不穷，但其基本思想是一致的，都是对浏览器端的Dom进行操作或者操作的
Ajax小项目前端VC 笔记 ajax javascript 前端
聊天机器人项目:项目演示效果：主要页面结构通过使用UI布局聊天机器人小思同学嗨，最近想我没有？你好哦-->其中除chat.js代码为业务代码都为下载代码组件链接如下：jQuery代码：https://jquery.com/download/jQuery中UI库详细下载：jQueryUI下载|菜鸟教程(runoob.com)chat.js代码内容如下：本项目主要是对于接口的请求进行操作$(funct
JQquryUI简单介绍 jxvl假装
jqueryUI是以jquery为基础的代码库，包含底层的用户交互，动画，特效和可更换主题的可视控件。我们可以用他来构建具有良好交互性的web应用程序jqueryUI网址：http://jqueryui.com/案例：拖动Document$(function(){$('.box').draggable({//限制在x轴向拖动，以字典形式设置//axis:'x',//限定在父级的范围内拖动conta
DOTween 常用方法知识点豆铮
--运动曲线可视化网站https://www.runoob.com/jqueryui/api-easings.html--运动曲线借鉴网页https://blog.csdn.net/zcc858079762/article/details/81279828--运动曲线示意http://robertpenner.com/easing/easing_demo.html--DoTween方法借鉴网页ht
jQuery实现用户输入自动完成功能 summer7310 jquery jquery
jQuery实现用户输入自动完成功能利用jQueryUI中Auto-complete插件实现输入自动完成功能，大家在使用诸如淘宝、京东等电商平台搜索商品时，往往只要输入商品的一些特殊字符，就可以显示出和该字符相近的列表菜单，用户使用鼠标或者键盘方向键就可以快速选择，实现了很好的用户体验。1.最简单的用户输入自动完成jQueryUIAutocomplete-Defaultfunctionality$
apache ftpserver-CentOS config gengzg apache
<server xmlns="http://mina.apache.org/ftpserver/spring/v1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" http://mina.apache.o
优化MySQL数据库性能的八种方法 AILIKES sql mysql
1、选取最适用的字段属性　　MySQL可以很好的支持大数据量的存取，但是一般说来，数据库中的表越小，在它上面执行的查询也就会越快。因此，在创建表的时候，为了获得更好的性能，我们可以将表中字段的宽度设得尽可能小。例如，在定义邮政编码这个字段时，如果将其设置为CHAR(255),显然给数据库增加了不必要的空间，甚至使用VARCHAR这种类型也是多余的，因为CHAR(6)就可以很
JeeSite 企业信息化快速开发平台 Kai_Ge JeeSite
JeeSite 企业信息化快速开发平台平台简介 JeeSite是基于多个优秀的开源项目，高度整合封装而成的高效，高性能，强安全性的开源Java EE快速开发平台。 JeeSite本身是以Spring Framework为核心容器，Spring MVC为模型视图控制器，MyBatis为数据访问层， Apache Shiro为权限授权层，Ehcahe对常用数据进行缓存，Activit为工作流
通过Spring Mail Api发送邮件 120153216 邮件 main
原文地址：http://www.open-open.com/lib/view/open1346857871615.html 使用Java Mail API来发送邮件也很容易实现，但是最近公司一个同事封装的邮件API实在让我无法接受，于是便打算改用Spring Mail API来发送邮件，顺便记录下这篇文章。【Spring Mail API】 Spring Mail API都在org.spri
Pysvn 程序员使用指南 2002wmj SVN
源文件:http://ju.outofmemory.cn/entry/35762 这是一篇关于pysvn模块的指南. 完整和详细的API请参考 http://pysvn.tigris.org/docs/pysvn_prog_ref.html. pysvn是操作Subversion版本控制的Python接口模块. 这个API接口可以管理一个工作副本, 查询档案库, 和同步两个. 该
在SQLSERVER中查找被阻塞和正在被阻塞的SQL 357029540 SQL Server
SELECT R.session_id AS BlockedSessionID , S.session_id AS BlockingSessionID , Q1.text AS Block
Intent 常用的用法备忘 7454103 .net android Google Blog F#
Intent 应该算是Android中特有的东西。你可以在Intent中指定程序要执行的动作（比如：view,edit,dial），以及程序执行到该动作时所需要的资料。都指定好后，只要调用startActivity()，Android系统会自动寻找最符合你指定要求的应用程序，并执行该程序。下面列出几种Intent 的用法显示网页:
Spring定时器时间配置 adminjun spring 时间配置定时器
红圈中的值由6个数字组成，中间用空格分隔。第一个数字表示定时任务执行时间的秒，第二个数字表示分钟，第三个数字表示小时，后面三个数字表示日，月，年，< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" /> 测试的时候，由于是每天定时执行，所以后面三个数
POJ 2421 Constructing Roads 最小生成树 aijuans 最小生成树
来源：http://poj.org/problem?id=2421 题意：还是给你n个点，然后求最小生成树。特殊之处在于有一些点之间已经连上了边。思路：对于已经有边的点，特殊标记一下，加边的时候把这些边的权值赋值为0即可。这样就可以既保证这些边一定存在，又保证了所求的结果正确。代码： #include <iostream> #include <cstdio>
重构笔记——提取方法（Extract Method） ayaoxinchao java 重构提炼函数局部变量提取方法
提取方法（Extract Method）是最常用的重构手法之一。当看到一个方法过长或者方法很难让人理解其意图的时候，这时候就可以用提取方法这种重构手法。下面是我学习这个重构手法的笔记：提取方法看起来好像仅仅是将被提取方法中的一段代码，放到目标方法中。其实，当方法足够复杂的时候，提取方法也会变得复杂。当然，如果提取方法这种重构手法无法进行时，就可能需要选择其他
为UILabel添加点击事件 bewithme UILabel
默认情况下UILabel是不支持点击事件的，网上查了查居然没有一个是完整的答案，现在我提供一个完整的代码。 UILabel *l = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, listV.frame.size.width - 60, listV.frame.size.height)]
NoSQL数据库之Redis数据库管理(PHP-REDIS实例) bijian1013 redis 数据库 NoSQL
一.redis.php <?php //实例化 $redis = new Redis(); //连接服务器 $redis->connect("localhost"); //授权 $redis->auth("lamplijie"); //相关操
SecureCRT使用备注 bingyingao secureCRT 每页行数
SecureCRT日志和卷屏行数设置一、使用securecrt时，设置自动日志记录功能。 1、在C:\Program Files\SecureCRT\下新建一个文件夹(也就是你的CRT可执行文件的路径），命名为Logs； 2、点击Options -> Global Options -> Default Session -> Edite Default Sett
【Scala九】Scala核心三：泛型 bit1129 scala
泛型类 package spark.examples.scala.generics class GenericClass[K, V](val k: K, val v: V) { def print() { println(k + "," + v) } } object GenericClass { def main(args: Arr
素数与音乐 bookjovi 素数数学 haskell
由于一直在看haskell，不可避免的接触到了很多数学知识，其中数论最多，如素数，斐波那契数列等，很多在学生时代无法理解的数学现在似乎也能领悟到那么一点。闲暇之余，从图书馆找了<<The music of primes>>和<<世界数学通史>>读了几遍。其中素数的音乐这本书与软件界熟知的&l
Java-Collections Framework学习与总结-IdentityHashMap BrokenDreams Collections
这篇总结一下java.util.IdentityHashMap。从类名上可以猜到，这个类本质应该还是一个散列表，只是前面有Identity修饰，是一种特殊的HashMap。简单的说，IdentityHashMap和HashM
读《研磨设计模式》-代码笔记-享元模式-Flyweight bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.Collection; import java.util.HashMap; import java.util.List; import java
PS人像润饰&调色教程集锦 cherishLC PS
1、仿制图章沿轮廓润饰——柔化图像，凸显轮廓 http://www.howzhi.com/course/retouching/ 新建一个透明图层，使用仿制图章不断Alt+鼠标左键选点，设置透明度为21%，大小为修饰区域的1/3左右（比如胳膊宽度的1/3），再沿纹理方向（比如胳膊方向）进行修饰。所有修饰完成后，对该润饰图层添加噪声，噪声大小应该和
更新多个字段的UPDATE语句 crabdave update
更新多个字段的UPDATE语句 update tableA a set (a.v1, a.v2, a.v3, a.v4) = --使用括号确定更新的字段范围
hive实例讲解实现in和not in子句 daizj hive not in in
本文转自：http://www.cnblogs.com/ggjucheng/archive/2013/01/03/2842855.html 当前hive不支持 in或not in 中包含查询子句的语法，所以只能通过left join实现。假设有一个登陆表login(当天登陆记录,只有一个uid),和一个用户注册表regusers(当天注册用户，字段只有一个uid)，这两个表都包含
一道24点的10+种非人类解法（2,3,10,10） dsjt 算法
这是人类算24点的方法？！！！事件缘由：今天晚上突然看到一条24点状态，当时惊为天人，这NM叫人啊？以下是那条状态朱明西 : 24点，算2 3 10 10，我LX炮狗等面对四张牌痛不欲生，结果跑跑同学扫了一眼说，算出来了，2的10次方减10的3次方。。我草这是人类的算24点啊。。然后么。。。我就在深夜很得瑟的问室友求室友算刚出完题，文哥的暴走之旅开始了 5秒后
关于YII的菜单插件 CMenu和面包末breadcrumbs路径管理插件的一些使用问题 dcj3sjt126com yii framework
在使用 YIi的路径管理工具时，发现了一个问题。 <?php
对象与关系之间的矛盾：“阻抗失配”效应[转] come_for_dream 对象
概述 “阻抗失配”这一词组通常用来描述面向对象应用向传统的关系数据库（RDBMS）存放数据时所遇到的数据表述不一致问题。C++程序员已经被这个问题困扰了好多年，而现在的Java程序员和其它面向对象开发人员也对这个问题深感头痛。 “阻抗失配”产生的原因是因为对象模型与关系模型之间缺乏固有的亲合力。“阻抗失配”所带来的问题包括：类的层次关系必须绑定为关系模式（将对象
学习编程那点事 gcq511120594 编程互联网
一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去
Reverse Linked List II hcx2013 list
Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1->2->3->4->5->NULL, m = 2 and n = 4, return
Spring4.1新特性——页面自动化测试框架Spring MVC Test HtmlUnit简介 jinnianshilongnian spring 4.1
目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
Hadoop集群工具distcp liyonghui160com
1. 环境描述两个集群：rock 和 stone rock无kerberos权限认证，stone有要求认证。 1. 从rock复制到stone，采用hdfs Hadoop distcp -i hdfs://rock-nn:8020/user/cxz/input hdfs://stone-nn:8020/user/cxz/运行在rock端，即源端问题：报版本
一个备份MySQL数据库的简单Shell脚本 pda158 mysql 脚本
　　主脚本（用于备份mysql数据库）：　　该Shell脚本可以自动备份数据库。只要复制粘贴本脚本到文本编辑器中，输入数据库用户名、密码以及数据库名即可。我备份数据库使用的是mysqlump 命令。后面会对每行脚本命令进行说明。　　 1. 分别建立目录“backup”和“oldbackup” 　　#mkdir /backup 　　#mkdir /oldbackup 　
300个涵盖IT各方面的免费资源（中）——设计与编码篇 shoothao IT资源图标库图片库色彩板字体
A. 免费的设计资源 Freebbble:来自于Dribbble的免费的高质量作品。 Dribbble:Dribbble上“免费”的搜索结果——这是巨大的宝藏。 Graphic Burger:每个像素点都做得很细的绝佳的设计资源。 Pixel Buddha:免费和优质资源的专业社区。 Premium Pixels:为那些有创意的人提供免费的素材。
thrift总结 - 跨语言服务开发 uule thrift
官网官网JAVA例子 thrift入门介绍 IBM-Apache Thrift - 可伸缩的跨语言服务开发框架 Thrift入门及Java实例演示 thrift的使用介绍 RPC POM： <dependency> <groupId>org.apache.thrift</groupId>

从零开始学习jQuery (十) jQueryUI常用功能实战

本系列文章导航

一.摘要

二.前言

三.jQuery UI