jQuery UI 插件

1、概述

1.简介 UI -> User Interface用户界面

jQuery UI是jQuery官方提供的插件,他强化了jQuery中搭载的动画效果及特效,以实现更高级的处理与显示效果,并且提供了实现交互式web应用程序的小部件(widget)

2.分类 -> 大致分为三大类

1)交互组件 -> 拖动,投放,缩放等

2)页面部件 -> 折叠,按钮,对话框,标签,日期选择,选项卡等

3)effect特效

3.构成: 由JavaScript与CSS构成,在jQuery UI官方网站上可以选择主题, 颜色,和设计个人独特的小部件

4.下载: http://jqueryui.com/ -> jquery-ui-1.8.20.custom.zip

5.搭建jQuery UI 环境

1)解压 jquery-ui-1.8.20.custom.zip后

index.html -> 显示页面

js目录 -> jquery-1.7.2.min.js、jquery-ui-1.8.20.custom.min.js

css目录 -> 包含jQuery UI插件对应的主题样式,默认为ui-lightness

2)在项目中导入

ui-lightness

jquery-1.7.2.min.js

jquery-ui-1.8.20.custom.min.js

2、jQuery UI交互组件

1.拖放组件

语法: 元素节点.draggable([options])

其中options为键值对的参数, 多个使用逗号隔开

在页面中导入js和css:

<link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.20.custom.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>

2.投放组件 -> droppable

3.缩放组件 -> resizable

3、jQuery页面部件

1.按钮部件 -> button

1)页面结构

<input type="button" value="".. />

type=submit,reset,image

<div>...</div>

<button id="btn">....</button>

...

注: 一般使用button标签

2)语法

$("#btn").button({

选项1：值1 ,

选项2：值2 ,

...

选项n：值n

}) ;

3)选项(Options)

是否可用(激活):disabled:true/false

按钮文字: label:string

图标: icons

{

primary:"ui-icon-search", //前面图标

secondary:"ui-icon-search" //后面图标

}

图标在JQuery中有提供, 具体可查文档

是否显示文字: text:true/false

4)事件

create:function() {

创建button时触发...

}

5)方法

禁用: button("disable")

启用: button("enable")

销毁: button("destroy")

更新按钮布局: button("refresh")

获取按钮的JQuery对象: button("widget")

获取选项参数的值: button("option",param)

设置选项参数的值: button("option",param,value)

节点.buttonset() : 把节点下所有的节点设置按钮UI

2.对话框部件 -> dialog

1) 对话框页面结构

<div id="dialog" title="标题">
​
 <p>Dialog content goes here.</p>
​
</div>

2)选项(Options)

语法:

$("#dialog").dialog({

选项1: 值1 ,

选项2: 值2 ,

...

选项n: 值n

}) ;

外观选项:title+button

标题定义:

title:"标题名"

按钮定义:

//对象定义法,$(this)为当前的对话框

button: {

按钮标题名称 : function() {

按钮事件-功能实现

} ,

...

"关闭":function() {

$(this).dialog("close") ;

}

}

//数组定义法,$(this)为当前的对话框

button: [

{

text:"按钮标题名称",

click:function(){

功能实现

}

} ,

...

{

text:"关闭" ,

click:function() {

$(this).dialog("close") ;

}

}

]

大小设置:

宽: width:"400px" ,

高: height:250 ,

最大宽: maxWidth:600 ,

最小宽: minWidth:300 ,

最大高: maxHeight:400 ,

最小高: minHeight:150

注:

默认单位为px,当指定单位时，要加双引号

高度默认为：auto

显示效果:

淡入淡出:

show:true/false

hide:true/false

其它:

blind

bounce

clip

slide

drop

fold

highlight

puff

scale

pulsate

行为选项:

是否自动打开(一般用于先定义,后打开): autoOpen:true/false

是否可移动对话框: draggable:true/false

是否可改变对话框大小: resizable:true/false

是否为模式对话框: modal:true/false

设置关闭按钮的提示文字: closeText:string

3)事件

语法:

语法一:

事件:function(e[,ui]) {

}

eg:

focus:function() {

alert("获取焦点了") ;

}

语法二: on方法处理

节点.on("事件名",function(){

}) ;

其中, 事件名有:

dialogfocus

dialogcreate,

dialogopen,

...

eg:

$("#login").on("dialogopen",function(){

alert("打开...") ;

}) ;

分类:

focus

create

open

close

beforeClose

功能基本与close相同，当return false，对话框不关闭

drag

dragStart

dragStop

获取前前移动的坐标

ui.position.top/left

ui.offset.top/left

resize

resizeStart

resizeStop

获取改变后长宽: ui.size.width/height

获取改变后坐标位置: ui.position.top/left

获取改变前长宽: ui.originalSize.width/height

获取改变前坐标位置: ui.originalPosition.top/left

4)方法

打开对话框: dialog("open")

关闭对话框: dialog("close")

销毁对话框: dialog("destroy")

判断对话框是否打开: dialog("isOpen")

获取对话框JQuery对象: dialog("widget")

将对话框置前: dialog("moveToTop")

获取选项参数值(getter): dialog("option",param)

设置选项参数值(setter): dialog("option",param,value)

3.日期选择器部件 -> datepicker

1)页面结构

文本框

2)语法

$("seleter").datepicker({

选项1:值1 ,

选项2:值2 ,

...

选项n:值n

}) ;

3)选项(Options)

1.定义日期格式

dataFormat 如:yy-mm-dd

2. 定义星期标题显示的格式, 分别为长格式, 短格式, 最小格式(中文只显示最小格式)

dayNames

dayNamesShort

dayNamesMin

3.定义月份标题显示的格式, 分别为长格式, 短格式(中文只显示最长格式)

monthNames

monthNamesShort

4.指定日期显示的目标位置和显示格式,#ID名

altField altFormat

5.追加提示信息

appendText

6.是否显示周

showWeek

7.指定从星期几开始, 默认为0(从周日开始)

firstDay

8.是否可用

disabled:true/false

9.显示月份的个数

numberOfMonths:n/[row,col]

10.是否显示非本月份的其它日期

showOtherMonths:true/false

11.是否可选择非本月份的其它日期，必须设置 -> showOtherMonths:true

selectOtherMonths:true/false

12.设置是否选择年份和月份

changeYear:true/false

changeMonth:true/false

13.日历可以选择的最小日期

minDate:-x/"-xm"/"-xw" 如: -3或-3m或-3w

14.日历可以选择的最大日期

maxDate:x/"xm"/"xw" 如:3或3m或3w

15.设置预设默认选定日期, 没有指定, 则默认为当天

defaultDate

16.设置年份的范围

yearRange:"from:to"

17.设置是否显示上一月或下一月

hideIfNoPrevNext:true/false

18.是否反向显示日期

isRTL:true/false

19.显示日期的文本框是否自适应日期的长度

autoSize:true/false

20.设置日历显示方式

showOn:string-focus(默认),button,both

21.设置触发按钮文本内容

buttonText

22.设置触发按钮图片内容

buttonImage

23.设置是否只显示图片内容

buttonImageOnly:true/false

24.是否显示面板按钮

showButtonPanel:true/false

25.关闭按钮的文本

closeText

26.当前按钮的文本

currentText

27.上一个月的文本

nextText

28.下一个月的文本

preText

29.设置年份后的文本

yearSuffix

30.prev,next和current中的文本文本内容是否支持格式化(mm,dd,yy)

navigationAsDateFormat:true/false

31.月份是否显示在年份的后面

showMonthAfterYear:true/false

32.设置动画效果,默认是fadeIn, 可以指定其他动画效果(查文档)

showAnim:fadeIn/String

33.设置动画显示持续时间, 默认是300毫秒

duration:300/数值

4)事件

beforeShow

beforeShowDay

onChangeMonthYear

onClose

onSelect

//该事件有一个参数, 返回值为数组[bool,"class","tips"]

//周六, 周日不能选择

beforeShowDay:function(date) {

if(date.getDay()==6 || date.getDay()==0) {

return [false,"dis","双休"] ;

} else {

return [true] ;

}

}

5)方法

是否禁用:datepicker("isDisable")

显示:datepicker("show")

隐藏:datepicker("hide")

销毁:datepicker("destroy")

刷新:datepicker("refresh")

获取当前选择的日历:datepicker("getDate")

设置当前选择的日历:datepicker("setDate",date)

获取日历的JQuery对象:datepicker("widget")

获取选项参数的值:datepicker("option",param)

设置选项参数的值:datepicker("option",param,value)

4.选项卡部件 -> tabs

1)页面结构

 <div id="tabs">
​
    <ul>
​
       <li>Nunc tincidunt</li>
​
       <li>Proin dolor</li>
​
       <li>Aenean lacinia</li>
​
    </ul>
​
    <div id="tabs-1">
​
       <p>Tab 1 content</p>
​
    </div>
​
    <div id="tabs-2">
​
       <p>Tab 2 content</p>
​
    </div>
​
    <div id="tabs-3">
​
       <p>Tab 3 content</p>
​
    </div>
​
 </div>
​

2)语法

$("seleter").tabs({

选项1:值1 ,

选项2:值2 ,

...

选项n:值n

}) ;

3)选项(Options)

1.是否支持折叠

collapsible:true/false

2.是否禁用

disabled:true/false或数组[], 如: [0,1]

3.指定触发事件,默认为click

event

active:bool或数值

bool:设置是否折叠, 结合collapsible:true一起用

数值: 设置某个选项卡默认打开

heightStyle

content:根据内容伸展高度

auto: 自动根据最高的那一选项作为基准

fill:填充一定的可用高度

指定动画效果

show

hide

4)事件

create

activate

beforeActivate

load

beforeLoad

5)方法

禁用:datepicker("disable")/datepicker("disable",index)

启用:tabs("enable")/datepicker("enable",index)

隐藏:datepicker("load")

销毁:datepicker("destroy")

刷新:datepicker("refresh")

获取日历的JQuery对象:datepicker("widget")

获取选项参数的值:datepicker("option",param)

设置选项参数的值:tabs("option",param,value)

5.提示部件 -> tooltip

1)页面结构

在节点元素中添加title属性,指定要提示的内容

2)语法

$("seleter").tooltip({

选项1:值1 ,

选项2:值2 ,

...

选项n:值n

}) ;

3)选项(Options)

是否可用(激活):disabled:true/false

设置提示内容(title属性值):content:string

设置选择器以限定范围(过滤):items

给提示指定class样式:tooltipClass

设置位置:position

eg:

position:{

my:"left center" ,

at:"right+5 center" //可以加减某个数进行微调

}

my:以目标点左下角为基准

at:以my为基准

视觉效果:

淡入淡出

show:true/false

hide:true/false

其它

blind

bounce

clip

slide

drop

fold

highlight

puff

scale

pulsate

设置是否跟随鼠标移动:track:true/false

4)事件

create:function(e,ui) {

创建button时触发...

}

open:function(e,ui) {

创建button时触发...

}

close:function(e,ui) {

创建button时触发...

}

5)方法

禁用:tooltip("disable")

启用:tooltip("enable")

销毁:tooltip("destroy")

打开:tooltip("open")

关闭:tooltip("close")

获取按钮的JQuery对象:tooltip("widget")

获取选项参数的值:tooltip("option",param)

设置选项参数的值:tooltip("option",param,value)

6.表单验证插件 -> validate

1)页面结构

form下面的各控件

2)语法

$("seleter").validate({

选项1:值1 ,

选项2:值2 ,

...

选项n:值n

}) ;

3)选项(Options)

是否必选:required:true ,

是否验证Emaile:true

是否验证日期​date:​true

是否验证数字:number:true

是否正整数:digits:true

最小字符数:minlength:5 ,

最大字符数:maxlength:10

字符数量范围:rangelength:[3,6]

最小值:min:5,

最大值:max:10

数值范围:range:[1,5] ,

success:"class" //设置某一项成功后加某个class类

//内置的样式，不需要使用success指定

.valid {

background: url("succuess.png") no-repeat right;

}

//可使用success属性指定,success:"suc"

.suc {

background: url("succuess.png") no-repeat right;

}

4)事件

//表单所有的验证成功后执行

submitHandler:function(form) {

alert("验证成功") ;

$(form).serialize() ;

$(...).ajax() ;

}

success:function(label) {

label.addClass("success").text("yes") ;

}

highlight:function(element,errorClass) {

$(element).css("border","1px solid red") ;

}

unhighlight:function(element,errorClass) {

$(element).css("border","1px solid #ccc") ;

}

7.自动填充插件 -> autocomplete

1)页面结构

文本框

指定数据源

2)语法

$("seleter").autocomplete({

选项1:值1 ,

选项2:值2 ,

...

选项n:值n

}) ;

3)选项(Options)

是否可用(激活):disabled:true/false

指定数据源:source

触发补全列表最少输入字符数(默认为1):minLength

延迟显示(默认300毫秒):delay

第一个项目是否自动被选定:autoFocus:true/false

设置位置:position

eg:

position:{

my:"left center" ,

at:"right+5 center" //可以加减某个数进行微调

}

my:以目标点左下角为基准

at:以my为基准

on方法实现事件

autocompleteopen

autocompleteclose

autocompletesearch

autocompletefocus

....

eg:

$("#search").on("autocompleteopen",function(){

....

}) ;

4)事件

create

open

close

focus:function(e,ui) {

alert(ui.item.label) ;

alert(ui.item.value) ;

ui.item.value = ui.item.label + "@qq.com" ;

}

select:选择项目列表

change:改变项目列表(文本框内容改变且失去焦点时触发)

search:搜索项目列表完毕后触发

response:功能基本同上,ui有一个content集合(包含label,value两个属性),表示搜索结束后的结果(数组集合)

response:function(e,ui) {

alert(ui.content[0].value) ;

}

5)方法

禁用:autocomplete("disable")

启用:autocomplete("enable")

销毁:autocomplete("destroy")

关闭:autocomplete("close")

在数据源获取匹配的字符串(自动搜索):autocomplete("search","value")

获取按钮的JQuery对象:autocomplete("widget")

获取选项参数的值:autocomplete("option",param)

设置选项参数的值:autocomplete("option",param,value)

3、自定义部件

1.jQuery插件开发

1) $.extend -> 如果把jQuery当成一个类，$.extend相当于为该类添加了静态方法extend

2) $.fn ->$.fn等于​$.prototype

2.jQuery UI部件开发

用$.widget()方法开始定义你的组件,它只接收三个参数: 第一个是组件名称, 第二个是可选的基类组件(默认的基类是$.Widget), 第三个是组件的原型

jQuery UI 插件相关推荐

  1. jQuery UI插件之datepicker的自定义设置

    1. 修改datepicker的外观颜色,在jquery.ui.theme.css里面修改.ui-widget-header的background的值为你想要的颜色,并且去掉后面到color属性之前的 ...

  2. jQuery插件 -- jQuery UI插件

    jQuery UI 主要分为3个部分: 交互.微件和效果库 交互:这里都是一些与鼠标交互相关的内容.包括拖动(Draggable).置放(Doppable).缩放(Resizable).选择(Sele ...

  3. jQuery UI插件sortable中文帮助文档

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.p ...

  4. 使用 jQuery UI Widget Factory 编写有状态的插件（Stateful Plugins）

    使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) 使用 jQuery UI Widget Factory 编写有状态的插件(Stateful ...

  5. JQuery之UI插件

    1.拖曳插件之traggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式 ...

  6. Jquery UI dialog弹出层插件

    必须先下载Jquery UI插件 然后再把下载的文档复制到项目中,可以复制你需要的单个插件 --------------------------------------具体代码如下---------- ...

  7. php 智能输入提示插件,PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能_php实例...

    我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信息.本文将介绍如何实现用户输入自动提示的功能,就像谷歌百度搜索引擎一样,当用户输入关键字时,输入框下方会有提示,将与关键字相关的信息展现 ...

  8. jquery UI 跟随学习笔记——拖拽（Draggable）

    jquery UI 跟随学习笔记--拖拽(Draggable) 引言 这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI 插件,以及jquery库学习 ...

  9. jquery ui和easy ui联合使用

    本文以jquery ui中的自动完成(autocomplete)插件,  easy ui中的(tree)树形菜单插件,(grid)网格插件的综合运用为例来展示插件的魅力. 开发环境:struts2.3 ...

最新文章

  1. vmware 添加 磁盘 空间
  2. 五分钟看懂抓包神技：DPDK
  3. abap 在table control(表控件) 实现查找功能
  4. python 美团api接口对接_震惊！SpaceX火箭数据开放API接口，可用Python进行数据分析...
  5. PAT1042 字符统计 （20 分）
  6. python(1) - 数据类型和变量
  7. 9 WM层面 临时仓储类型的仓位 主数据不存在
  8. 拖拽 开发 easyui php,Easyui-Builder
  9. phtread条件变量pthread_cond_t初始化方式
  10. linux+默认启动windows系统,windows liunx两个系统修改默认启动项
  11. (转)密码学研究与区块链实践应该打破隔空喊话
  12. 使用select2 宽度自适应
  13. 计算机网络拓扑结构的分析,计算机网络拓扑结构分析
  14. 查询GPU时无进程运行，但是显存却被占用了
  15. 个人陈述怎么写计算机专业自招,自主招生个人陈述范文
  16. 让你的应用完美适配平板
  17. 第八题：输出 9*9 乘法口诀表
  18. cdr文件太大怎么转成小内存 CDR文件太大打不开怎么办
  19. 符号“∑”和“Π”的用法。
  20. UI设计教程-界面设计构图

热门文章

  1. 8月新亲测完美短视频点赞系统支持抖音+快手+刷宝+微视等所有主流短视频点赞/关注/评论系统源码
  2. 法正 (21) ：端午
  3. docker的使用方法
  4. 「TCG 规范解读」初识基础设施工作组
  5. 优麒麟 20.04 pro更换内核
  6. 用python创建微信机器人_手把手教你用Python创建微信机器人
  7. 猫眼CEO郑志昊：为什么说产品思维已“死”？
  8. 基于JAVA宠物托管系统计算机毕业设计源码+系统+lw文档+部署
  9. 网易蓝牙耳机怎么切换双耳_2020双十一蓝牙耳机怎么选？有哪些便宜又好用的蓝牙耳机？有哪些适合学生党的蓝牙耳机？《选购指南》...
  10. php 信用卡通道api,php – PayPal REST API为信用卡令牌返回500 Server错误