jQuery UI

Posted 胡卓

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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等




























以上是关于jQuery UI的主要内容,如果未能解决你的问题,请参考以下文章

[已解决]旧版本的问题 // Jquery 帮助升级到最新版本

阅读价格受苦的价值观

如何在 .NET 应用程序中使用 RequireJS?

从数组中自动完成并获取对应的id

jQuery—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果

jQuery 知识体系