jQuery UI

1、jQuery UI:
是以jQuery为基础的JavaScript网页用户界面的开源库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。
2、jQuery UI :
包含了许多维持状态的小部件(Widget),因此,他与定性的jQuery插件使用模式略有不同。所有的jQuery UI 小部件(Widget)使用相同的模式,所以,只要学会使用其中一个,就知道如何使用其他小部件(Widget)。
3、jQuery UI:
IE 6.0+ , Firefox 3+ , safari 3.1+ , Opera 9.6+ , 和 Google Chrome 。

4、jQuery UI 主要分三个部分:交互、小部件和效果库。
a): 交互 Interactions
交互部件是一些与鼠标交互相关的内容,包括Draggable,Droppable,Resizable,Selectable和Sortable等。
draggable : 给目标元素.draggable() 就能使其可以随意拖动
droppable : 给目标元素.droppable() 代表能够放置,此时就可以绑定一个drop事件
当触发事件时调用后面的方法,方法有两个参数,第一个是event 第二个是ui
resizable : 给目标元素.resizable() 就能使其可以随意调整大小
selectable : 给ul添加一个.selectable() 那么当选中其中一个li时 这个li就会获得一个class ui-selected.
sortable : 给ul添加一个.sortable() 就可以拖动其中的li来更换位置
b):小部件 Widgets
主要是一些界面的扩展,包括AutoComplete,ColorPicker,Dialog,Slider,Tabs,ProgressBar,Spinner等
accordion : 给目标div.accordion() 就能使其中呈现手风琴样式 <h3> <p> 当选中一个h3时 它下面的P就呈现出来,其他的就关闭
autocomplete : 自动补全 使用方法 .autocomplete({source:数据源})注意source后面不能加分号
datepicker : .datepicker() 可以选择日期
button : .button() 让目标a标签呈现按钮的样子
dialog :.dialog() 弹出一个对话框
progressbar : .progressbar() 进度条,可以设置value max
menu : 菜单
slider : 拖动进度条 change 和slide change是在拖动完之后显示 slide边拖动边显示变化
spinner :.spinner() 在input 输入框后面加入一个加减的按钮,按上边是把输入框中的值加一,按下边是把输入框中的值减一,还可以设置输入框中的处置 通过value
tab : .tab() 给一个div设置tab后 里面ul 下的三个li的a的href分别对应的三个div都会放到同一个地方重叠着当点击选中那个li时对应的那个div显示出来其他两个隐藏
c):效果
用于提供丰富的动画效果,包括 :Add Class 、 Color Animation 、 Toggle等

时间: 2024-10-14 04:52:05

jQuery UI的相关文章

jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)

1.表单验证插件--validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置.     2.表单插件--form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的option

第一百七十七节,jQuery,知问前端--概述及 jQuery UI

jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一.项目介绍 我们重点仿照"知乎"的架构模式来搭建界面和布局,以及大部分前端功能.而"百度 知道"作为辅助功能来确定我们这个项目需要的前端功能. 从以上知名问答站点中,我们可以确认最主要的前端功能:1.弹出对话框:2.前端按钮: 3.折叠菜单:4.选项卡切换:5.滑动块:6.日历:7.自动补全:8 拖放:等一系列前端模块. 二.jQuery UI

Adding a Timepicker to jQuery UI Datepicker

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

知问前端——概述及jQuery UI

知问系统,是一个问答系统.主要功能:即会员提出问题,会员回答问题.目前比较热门的此类网站有:知乎http://www.zhihu.com.百度知道http://zhidao.baidu.com等.这里我们重点参考“知乎”,来学习一下它采用的前端效果. 项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能.而“百度知道”作为辅助功能来确定我们这个项目需要的前端功能. 从以上知名问答站点中,我们可以确认最主要的前端功能:1.弹出对话框:2.前端按钮:3.折叠菜单:4.选项卡切

jquery ui 学习随笔 日历

一.调用datepicker()方法 $('#date').datepicker(); 二.修改datepicker()样式 日历UI 的header 背景和对话框UI 的背景采用的是同一个class,所以,在此之前已经 被修改.所以,这里无须再修改了. //无须修改ui 里的CSS,直接用style.css 替代掉 .ui-widget-header { background:url(../img/ui_header_bg.png); } //修改当天日期的样式 .ui-datepicker-

jquery ui 学习随笔 自动补全

一.调用autocomplete()方法 $('#email').autocomplete({ source : ['[email protected]', '[email protected]', '[email protected]'], }); 二.修改autocomplete()样式 由于autocomplete()方法是弹窗,然后鼠标悬停的样式.我们通过Firebug 想获取到悬停 时背景的样式,可以直接通过jquery.ui.css 里面找相应的CSS. //无须修改ui 里的CSS

jQuery UI部件

(一)按钮 button()方法回修改单个按钮来增强外观,而buttonset()方法对一组按钮起作用. button(options)   button('enable')   button('disable')   button('destroy')   button('option', optionName, value) buttonset同上 $('').button({}); icons 指定一个或来那个在按钮显示的图标,主要图标由对象的primary属性标识,次要图标由second

jquery UI datepicker 添加时间的选择。

仅有日期的原始效果图: 支持时间选择的目标效果图: 第一步:引入几个重要的jquery UI 文件,其中zh-CN.js是支持中文的 <script href="Js/Jquery/jquery.js"/><script/> <script href="Js/jqueryui/jquery.ui.js"/><script/> <script href="Js/jqueryui/i18n/zh-CN.js

通过扩展jQuery UI Widget Factory实现手动调整Accordion高度

□ 实现Accordion高度一致 <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/Content/jquery-ui.min.css" rel="stylesheet" /> <script src="~/S