JQueryUI学习文档

JQUERYUI

diglog

dialog外观选项

title 对话框的标题可以直接设置在DOM元素上buttons 以对象键值对方式，给dialog添加按钮，键是按钮的名称，值是用户点击后调用的回调函数。

$('#reg').dialog({
	title:'注册别知',
	buttons:{
'按钮':function(){
			
		},
		'取消':function(){
			
		}
	}
})

dialog页面位置选择

​ position 默认center 设置以个对话框窗口的坐标位置，默认为center 其他设置值为：left top,top right,bottom left,right bottom(四个角)，top，bottom(顶部或底部，宽度居中)，left或right（左边或右边，高度居中），center（默认值）
​ $(’#reg’).dialog({
​ position:‘left top’
​ })

dialog大小选择（直接写数值，不用加px

width，height minwidth minHeight maxWidth maxHeight

dialog视觉效果

show false 显示对话框是，默认淡入淡出
hide false 关闭对话框，默认采用淡出淡入

$(’#reg’).dialog({
show:true,
hide:true
})
注意：设置为true 后，默认为淡入淡出，如果想使用别的特效，
可以使用以下
bind 对话框从顶部显示或消失
bounce 对话框断断续续的显示或消失，垂直运动
clip 对话框从中心垂直的显示或消失
slide 对话框从左边显示或消失
drop 对话框从左边显示或消失，有透明度的变化
highlight 对话框显示或消失，伴随着透明度的变化和背景色的变化
puff 对话框从中心开始缩放，先试试收索，消失时生长
scale 对话框从中心开始缩放，显示是生长，消失时收索
pulsate 对话框以闪烁形式显示或消失
$(’#reg’).dialog({
show:‘pulsate’,
hide:‘pulsate’
})

dialog行为选项

autoOpen true 默认为true 调用dialog()方法时就会打开对话框，如果为false，对话框不可见，但对话框已创建，可以通过dialog(‘open’)才能看看见
draggable 默认为true 可以调整对话框大小 false 无法调整
resizable 默认为true 可以调整对话框大小，false无法调整
modal 默认为false 对话框外可操作，true 对话框会产生遮罩层，无法操作其他
closeText 设置关闭按钮的title文字
$(’#reg’).dialog({
autoOpen:false,
})

dialog()方法的事件

​ 除了属性的设置外，dialog()方法也提供了大量的实践，这些实践可以给各种不同状态时提供回调函数，这些回调函数中的this值等于对话框内容的div对象，不是整个对话框的div
​ dialog事件选项
​ focus 当对话框被激活时（首次显示以及每次在上面点击）会调用focus方法，该方法有两个参数（event,ui)此事件中的ui参数为空
​ create 当对话框被常见时或调用createa 方法，该方法有两个参数（event，ui）此事件中的ui参数为空
​ open()当对话框被显示时，（首次显示或调用dialog(‘open’)方法，该方法有两个参数（event,ui),此事件中的ui参数为空
​ beforeClose 当对话框将要关闭时（当点击关闭按钮或调用dialog(‘close’)方法），会带哦用beforeclose方法如果该函数返回false，对话框将不会被关闭，关闭的对话框可可以用dialog(‘open’)重新打开，该方法有两个参数（event,ui)此事件中的ui参谁为空
​ close 当对话框将要关闭时 dialog(‘close’)回调用close方法，关闭的对话框可以用dialog(‘open’)重新打开，该方法有两个参数（event,ui)此事件中的ui参数为空
​ drag 当对话框移动时候，每次移动一点均会调用drag方法，此方法有两个参数，（event，ui)
​ 1.position,得到当前移动的坐标，有两个子属性，：top和left
​ 2.offset,得到当前移动的坐标，有俩个子属性：top和left
​ dragStart,dragStop
dialog(‘action’,param)方法
​ dialog(‘open’) 打开对话框
​ dialog(‘close’) 关闭对话框
​ dialog(‘destroy’) 删除对话框
​ dialog(‘isOpen’) 判断对话框是否打开状态
​ dialog(‘widget’) 获取对话框的jQuery对象
​ //KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲reg').dialog('o…(’#reg’).dialog(‘widget’).css(‘font-size’,‘50px’) this指向的整个对象
​ dialog(‘option’,param) 一般值 获取options 属性的值
​ dialog(‘option’,param,value) 设置options属性的值
​ //alert(KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲reg'.dialog('op…(’#reg’).dialog(‘option’,‘title’,‘注册别自’)
​ //初始化隐藏对话框
​ $(’#reg’).dialog({
​ autoOpen:false
​ })

dialog()使用on()

在dialog的事件中，提供了使用on()方法处理的事件
on()方法触发的对话框事件
dialogfocus 得到焦点触发
dialogopen 显示时候触发
dialogclose 关闭时触发
dialogdrag 每一次移动的时候触发
dialogdragstart 开始移动的时候触发
dialogdragstop 移动结束够触发
dialogresize 每次调整大小时触发
dialogresizestop 结束调整大小时触发

$('#reg').on('dialogclose',function(){
	alert('关闭')
})

按钮

按钮（button） 可以给生硬的原生按钮或者文本提供给更多丰富多彩的外观，它不单单可以设置按钮或者文本，还可以设置单选按钮和多选按钮

一，使用button按钮

​ 使用button按钮UI的时候，也不一定必须时input按钮形式，普通的文本也可以设置成button按钮
​ $(’#search_button’).button();

二，修改button样式

​ 在弹出的button对话框中，f12然后修改样式
​ //无须修改ui里的css，直接用css样式覆盖

三，button外观

​ label 对应按钮上面的文字，如果没有，html内容将别作为按钮的文字
​ icons 对应按钮上的图标，在按钮文字前面和后面都可以放置一个图标，通过键值对的方式完成
​ {
​ primary：‘ui-icon-search’,
​ secondary:‘ui-icon-search’,
​ text : 当设置为false时，不显示文字，不会显示文字，但必须指定一个图标
​ }
​ $(’#search_button’).button({
​ disable:false,
​ ions:{
​ primary:‘ui-icon-search’,
​ },
​ labe:‘查找’,
​ text：false
​ })

四。button(‘action’,param)

该方法能设置和获取按钮，action表示指定操作的方式
button(‘disable’) 禁用按钮
button(‘enable’) 启动禁用
button(‘destroy’) 删除按钮 直接阻断button
button(‘refresh’) 更新按钮布局
button(‘widget’) 获取按钮的jQuery对象
button(‘option’,param) 获取options 属性的值
button(‘option’,param,value) 设置options属性的值
//禁用按钮
$(’#search_button’).button(‘disable’)

五，单选框，复选框

button按钮不但可以设置普通的按钮，对于单选框，复选框同样有效
//html单选框
woshi
woshi

工具提示UI

学习要点
1.调用tooltip()方法
2.修改tooltip()样式
3.tooltip()方法的属性
4.tooltip()方法的事件
5.tooltip()中使用on()
工具提示tooltip是一个非常使用的ui，她彻底扩展了HTML中的title属性，让提示更加丰富，更加可控制看，全面提高用户体验

1.调用tooltip方法之前首先需要针对元素设置响应的元素

//设置表单type=text的属性
$(’#reg input[title]’).tooltip();

2.修改tooltip（）样式

.ui-tooltip{
color:red
}

3.tooltip（）方法的属性

对话框有两种形式，1.tooltip(options),options是以操作对象键值对表示一个选项：2.tooltip(‘action’,param),action是操作对话框方法的字符串，para则是options的某个选项

外观样式

disabled false 设置为true，将禁止显示工具提示
content 无 设置title内容
items 无 设置选择器以限定范围
tooltipClass 无 引入class 形式的css样式

tooltip页面位置选项

​ position 无 使用对象的键值对赋值，有两个属性：my和at表示坐标
my是以目标点左下角为基准 at以my为基准,我的my在相对位置的at位置

tooltip视觉选项

​ show false 显示对话框时，默认采用带入淡出
​ hide false 关闭对话框时，默认采用淡入淡出效果
​ 注意：设置true后，默认为淡入淡出，如果想使用别的特效，可以使用以下的字符串参数
​ bind 从顶部显示或消失
​ bounce 断断续续的显示或消失垂直运动
​ clip 从中心垂直的显示或消失
​

tooltip行为选项

track false 设置为true 能跟随鼠标移动

tooltip()方法的事件

除了属性设置外，tooltip()方法而也提供了大量的事件，这些事件可给不同状态时提供回调函数，这些回调函数中的this值等于对话框内容的div对象，不是整个对话框的div
tooltip事件选项
create 当工具提示被创建时会调用create方法，改方法有两个参数（event，ui）此事件中的ui参数为空
open 当工具提示被显示时，会调用open方法，该方法有两个参数（event,ui)此事件中的ui有一个参数tooltip 返回是工具提示的jQuery对象
close 当工具提示关闭时，会调用close方法，关闭的工具提示可以用tooltip(‘open’)重新打开，该方法有两个参数（event,ui)此事件中ui有一个参数tooltip返回的时工具提供的jQuery对象

tooltip(‘action’,param)方法
tooltip(‘open’) 打开工具提示
close
diable
enable
destroy
widget
tooltip(‘option’,param)//获取options属性的值
tooltip(‘option’,param,value) jQuery对象 设置 options属性的值

tooltip()中使用on()
在tooltip的事件对象中，提供了使用on()方法处理的事件方法
on()方法触发的对话框事件
tooltipopen 显示时触发
tooltipclose 每一次移动时触发
$(’#reg’).on(‘tooltipopen’,function(){
alert(‘打开是触发’)
})
$(’#reg’).on(‘tooltipclose’,function(){
alert(‘每一次移动时触发’)
})

//示例
$(’#reg input[title]’).tooltip({
position:{//设置位置
my:‘right bottom’,
at:‘right+5 center’
},
disable:false,
content:‘改变title’,
items:input限定只有input里面的title才能使用
,tooltipClass:引入其他class样式
,
//设置演示样式
show:false,
hide：slide
//设置是否鼠标跟随
track:true，
create:function(){
alert(‘创建被触发’)
},
close:function(e,ui){

		}

})

自动补全UI

1.调用autocomplete()方法

2. 修改autocomplete()样式
3. autocomplete()方法的属性
4. autocomplete()方法的事件
5. autocomplete中使用on()

自动补全（autocomplete）是一个可以 减少用户输入完整信息的UI工具，一般在输出入 邮箱，收索关键字等，然后提取出响应完整字符串供用户选择

### 一.调用autocomplete()方法

$(’#email’).autocomplete({
source:[‘aaa@123.com’,‘bbb@163.com’,‘ccc@163.com’],
});

### 二.修改autocomplete()样式

由于autocomplete()方法是弹窗，然后鼠标悬停的样式，我们通过f12

### 三.autocomplete()方法的属性

​ 自动补全方法有两种形式：1，autcomplete(options),options 是以对象键值对的形式传参每个键值对表示一个选项，2.autocomplete(‘action’,param)。action是操作对话框方法的字符串，param则是options的某个选项

外观

​ disabled false 设置为true，将禁止自动补全

​ source 无/数组 指定数据源，可以是本地，也可以是远程
​ minLength 1 默认为1，触发补全列表最少输入字符
​ delay 300 默认为300毫秒，延迟显示设置
​ autoFucus false 设置为true时，第一个项目会自动被选定

位置

​ position无 使用对象的键值对赋值，my 和 at,
my以目标点左上角为基准，at以目标右下角为基准

autocomplete()方法的事件

除了属性设置外，autocomplete()方法也提供了大量的事件，这些事件可以给各种不同状态提供回调函数，这些回调函数中的this值等于对话框内容的div对象，不是整个对话框的div，

autocomplete事件选项

create 当自动补全被创建时会调用create方法，该方法有两个参数（event，ui）此事件中的ui参数为空
open 当自动补全被关闭时，会调用close方法，该方法有两个参数（event，ui 此事件中的ui参数为空
close 当自动补全被关闭时，会调用close方法，该方法有两个
focus 当自动获取焦点时会调用，该方法有两个参数（event，ui）此事件中的ui有一个子属性item，分别有两个属性：label，补全列表显示的文本，value，将要输入框的值，一般label和value值相同
select 当自动补全获取被选定时，会调select方法，该方法有两个参数同focus
change 同open
search 当自动补全搜索完成后，会调用search方法，该方法有两个参同focus
response 当自动补全搜索完成后，在菜单显示前，会调用response方法，该方法有两个参数event，ui 此事件中的ui参数有一个子对象content ，他会返回label和value值，可通过遍历了解，可获取和改变值
​

autocomplete(‘action’,param)方法

autocomplete(‘close’) 关闭自动补全功能

disable 禁用自动补齐

enable 启用自动不起，直接阻断

widget 获取工具提示的jQuery对象

autocomplete(‘search’,value) 在数据源获取匹配的字符串

autocomplete(‘option’,param) 或者options属性的值

autocomplete(‘option’,param,value) 设置options属性的值

autocomplete中使用on()

autocompleteopen 显示时触发

autocompleteclose 关闭时触发

autocompletesearch 查找时触发

autocompletefocus 获得焦点时触发

autocompleteselect 选定时触发

autocompletechange 改变时触发

autocompleteresponse 搜索完毕后，显示之前

$('#email').on('autocompelteopen',function(){
alert('打开自动补齐时触发'）
}

示例:邮箱的自动补全

1.数据源 function

自动补全UI的source不但可以时数组，也可以是function回调函数，提供了自带的两个参数设置动态的数据源

$("#email").autocomplete({ source:function(request,response){ //获取用户输入的内容 // alert(request.term); //呈现数组内容,绑定数据源 response(['aa1','aaa1','aaaa1','aaaaa1','bb']); },

注意：这里的response不会根据你搜索关键字而过滤无关结果，而是把整个结果全部呈现，因为source数据源，本身就是给动态改变的，就由你自定义，从而放弃系统内置的搜索能力

二。邮箱自动补全

​ $('#email').autocomplete({

autofocus:true,

delay:0,

source:function(requests,response){

var hosts = ['qq.com','163.com','263.com','gamil.com','

homail.com','sina.com'],//起始

term= request.term,//获取输入值

ix=term.indexOf('@'),//@

name = term,//用户名

host = '',//域名

result =[];//结果

//结果第一条是自己输入

result.push(term);

}

})

日历ui

学习要点

1.调用datepicker()方法

2.修改datepicker()样式

3.datepicker()方法的属性

4.datepicker()方法的事件

日历（datapicker)UI,可以让用户更加直观的，更加方便的输入日期，并且还考虑不同国家语言限制，包括汉语

一.调用datepicker（）方法

$(’#date’).datepicker();

二.修改datepicker（）样式

日历ui的header背景和对话框UI的背景采用的是同一个class，所以，在此之前已经被修改了

.ui-widget-header{

background:url…}

//修改修改选定日期的样式

.ui-datepicker-current-day .ui-state-active{

border:1px solid red ;

color:red}

其他修改方案类式

三.datepicker()方法的属性

日历方法有两种形式：1.datapicker(otions),options是以对象键值对的形式传参，每个键值对表示一个选项，2.datepicker(‘action’,param),action 是操作对话框方法的字符串，param则是options的某个选项

datepicker国际化选项

dateFormat mm/dd/yy/时间 指定日历返回的日期格式

dateNames 英文日期/数组 以数组形式指定星期中的天的长格式，比如：Sunday Monday 等，中文：星期日

dayNamesShort 英文日期/数组 以数组形式指定星期中的天的短格式，比如Sun，Mon

dayNamesMin 英文日期。数组 以数组形式指定星期中的天的最小格式 比如 Su Mo等

monthNames 英文月份/数组 以数组形式指定月份的长格式名称（January，February等，数组必须从January开始

mouthNamesShor 英文月份/数组 以数组形式指定月份的短格式名称（jan,feb)数组必须从January开始

altField 无/字符串 为日期选择器指定一个域

altFormat 无/字符串 添加到《input>域的可选日期格式

appendText 无/字符串 在日期选择器的《input>域后面附加文本

showWeek false/布尔值 显示周

weekHeader ‘Wk’/字符串 显示周的标题

firstDay 0/数值 指定日期中的星期从星期几开始，0表示星期日

注意：默认情况下，日历显示为英文，如果想使用中文，直接引入中文语言包即可，或者把中文语言包的几行代码整合到js文件里面

日期格式

d 月份天1-31

dd 天 月份01-31

o 月份中的天 1-366

oo 年份中的天 001-366

D 星期中的天的缩写名称Mon Tue

DD 星期中的 天的全写名称

m 月份1-12

mm 01-12

MM 月份的全写名称January，February

y 两位数的年份 14表示2014年

yy 四位数的年份 2014

@ 从01/01/1997至今的毫秒数

datepicker日期选择选项

minDate 日历中可以选择的最小日期

maxDate 日历中 可以选择的最大日期

defaultDate 预设默认选定日期，没有指定则是当天

yearRange 设置下拉菜单年份的区间，比如1950:2020

hideIfNoPrevNext 设置为true如果上一个和下一个月不存在则隐藏按钮

gotoCurrent 如果为true 点击今日且回车后选择的是当前选定的日期，而不是今日

datepicker视觉选项

showAnim faddIn/字符串 设置false 无效果，默认效果为fadeIn

durtion 300/数值 日历显示和消失时间的持续时间，单位毫秒

datepicker可选特效

bind bounce clip

四。datepicker()方法的事件

除了属性设置外，datepicker()方法也提供了大量的事件，这些事件可以给各种不同状态时提供回调函数，这些回调函数中的this值等于对话框内容的div对象，不是整个对话框的div

datpicker事件选项

beforeShow 日历显示之前会被调用

beforeShowDay beforeShowDay(date)方法在显示日历中的每个日期时会被调用（date参数是一个Date对象）。该方法必须返回一个数组来指定每个日期的信息

1.改日期是否被选中（数组的第一项为true或false

2.该日期单元格上使用css类

3.该日期单位格上显示的字符串提示信息

onChangeMonthYear onChangeMonthYear(year,month,inst)方法在日历中显示的月份或年份改变式后调用

onClose onClose(dateText,inst)方法在日历别关闭的时候调用，dateText 是当时选中的日期字符串，inst是一个对象，可以调用属性获取值

onSelect onSelect(dateText,inst)方法在选择日历的日期时候别调用，dateText是当时选中的日期字符转，inst是一个对象，可以调用一些属性获取值

datepicker(‘action’,para)方法

datepicker(‘show’) 显示日历

hide

getDate

datepicker(‘setDate’,date) 设置当前选定日历

destroy

widget

验证插件UI

1使用validate.js插件

2默认验证规则

3.validatea()方法和选项

验证插件validate.js是一款验证常规表单数据合法性的插件，使用它，极大的解放了在表单上繁杂的验证过程，并且错误提示显示的完善也增加了用户体验

一。使用validate.js插件

官网下载使用该插件

二。默认验证规则

Validate.js的默认验证规则的写法有两种形式，1.控价属性方式，2.键值对传参方式

默认规则列表

required:true 必须输入字段

email：true 必须输入正确格式的电子邮件

url:true 必须输入正确格式的网址

date:true 必须输入正确格式的日期（IE6验证出错）

dateISO:true 必须输入正确格式的日期（ISO)(只验证格式，不验证有效)

number:true 必须输入合法的数组（负数，小数）

digits:true 必须输入正整数

creditcard:true 必须输入合法的信用卡号，例如 5104546164984641000

equalTo:"#field" 输入值必须和#field 相同

minlength:5 输入长度最小是5的字符（汉字算一个字符

maxlength:10 输入长度最多10个字符串（汉字算一个字符

rangelength:[5,10] 输入值不能小于5

max:10 输入值不能大于10

remote:‘check.php’ 使用ajax方法调用check.php验证输入值

//使用控件方法验证“必填和不得小于两位

注意：默认规则里设置布尔值的，直接写到class里即可实现，如果是数字和数组区间，直接使用属性=值得方式即可，而对于错误是因为，可以引入中文汉化文件，或直接替换

四。validate.js其他功能

使用remote:url 可以对表单进行ajax验证，默认会提交当前验证得值到远程地址了，如果需要提交其他得值，可以使用data选项

使用ajax验证

rules:{

user:{

required:true,

minlengthL:2,

remote:'user.php,

}

}

//user.php

<?php if($_GET['user']=='bnbbs'{ echo 'false'}else{ echo true} ?>

注意：远程地址只能输出true或者false不能输出其他值

ajax插件

一核心方法，

form.js插件有两个核心方法，ajaxForm()和ajaxSubmit()它们集合了从控制表单元素到决定如何管理提交方式

//ajaxForm提交方式

$(’#reg’).ajaxForm(function(){

alert(‘提交成功’)})

注意：使用ajaxForm()方法，会直接实现ajax提交，自动阻止默认行为，而它得提交得默认页面是form控件得action属性得值，提交得方式是method属性得值

//ajaxSubmit()提交方式

$(’#reg’).submit(function(){

alert(‘提交成功’)

return false

})

注意：ajaxForm()方法是针对form直接提交得，所以阻止了默认行为，而ajaxSubmit()方法没有默认阻止，需要自行阻止

二option参数

option参数是一个以键值对传递得对象，可以通过这个对象设置各种ajax提交得功能

$(’#reg’).submit(function(){

$(this).ajaxSubmit({

url:'test.php,//设置提交得url可覆盖action属性

target:’#box’,//服务器返回得内容存放在#box里

type:‘post’,//get post

dateType:null xml json scirpt

clearForm:true 成功提交后清空表单

resetForm:true 成功提交后，重置表单

data:{

aaa:'bbb,

ccc:‘ddd’

},

beforeSubmit:function(formData,jqForm,options){

alert(formData[0].name)//得到传递表单元素得name

formData[0].value //得到传递表单元素得value

jqForm 得到form得jquery对象

options 得到目前options设置得属性

return false；

}，

success:funciton(responseText,statusText){

alert(responseText+statusText)//成功后调用

}

})，

success:function(responseText,stausText){

alert(responseText+statusText)//成功后回调

}

})

三工具方法

form.js除了提供两个核心方法之外，还提供了一些常用得工具方法，这些方法主要是在提交前或后对数据或表单进行处理得

//表单序列化

$(’#reg’).formSerialize()

//序列化某个字段、

$(’#reg #user’).fieldSerialize()

//得到某个字段得value值

$(’#reg #user’).fieldValue();

//重置表单

$(’#reg’).resetFrom()

cookie插件

学习要点

1.使用cookie插件

2.注册直接登陆

cookie是网站用来在客户端保存识别用户的一种小文件，一般用户可以保存用户登陆信息，购物数据信息等一系列微小信息

一使用cookie插件

官方网站：。。。。。

//生成一个cookie：

$.cookie(‘user’,‘bnbbs’);

//设置cookie参数

$.cookie(‘user’,‘bnbbs’,{

expires:7,//过期时间、

path:’/’,设置路径，上一层

domain:‘www.yuku.com’,//设置域名

secure:true，//默认为false，需要设置使用安全协议https

})；

//关闭编码/解码，默认为false

$.cookie.raw=true;

//读取cooki数据

alert($.cookie(‘user’));

//读取所有cookie数据

alert($.cookie())

注意：读取所有的cookie是以对象键值对存放的，所以，也可以$.cookie().user获取

//删除cookie

$.removeCookie(‘user’);

//删除指定路径cookie

$.removeCookie(‘user’,{

path:’/’

})

二，注册直接登陆

把cookie引入到别知前端中去

Ajax登陆

学习要点

1.服务器端代码

2.jquery代码

本节课将使用Ajax登陆

选项卡UI

学习要点

1.使用tabs

2.修改tabs样式

3.tabs（）方法的事件

4.tabs()方法的属性

5.tabs中使用on

选项卡tab是一种能给用户在同一个页面切换不同内容的UI,尤其是在 页面布局紧凑的页面上，提供了非常好的用户体验

一。使用tabs

使用tabs比较简单，但需要按照指定的规范即可

//html部分

ui li a href=#tabs1 tabs1 tabs2 tabs3 ui div id='tabs1' tab1-content div tabs2 div tabs3

二，修改tabs样式

。。。。

三。tabs()方法的属性

选项卡的方法有两种形式:1tabs(options),options是以对象键值对的形式传参，每个键值表示某一个选项，2.tabs(‘action’.param),action是操作选择卡方法的字符串，param则是options的某个选项

tab外观选项

collapsible false/布尔值 当设置为true时，允许选项卡折叠对应的内容，默认为false，不会关闭对应内容

disabled 无/数组 使用数组来指定禁用哪个选项卡的索引，比如【0，1】用来禁用前两个选项卡

event click/字符串 触发tab的事件类型，默认为click 可以设置mouseover等其他鼠标事件

active 数组和布尔值 如果是数组，初始化默认显示哪个tab，默认值为零，如果是布尔值，那么默认是否折叠，条件必须是collapsible值为true

heightStyle content/字符串 默认为content，即根据内同伸展高度，Auto则自动根据最高的哪个为基准，fill则是填充一定的可用高度

show false/布尔值 切换选项卡时，默认采用淡入效果

hide false 切换选项卡时，默认采用淡出效果

注意：设置为true后，默认为淡入淡出，如果想使用别的特效，可以使用以下表格中的字符串参数

show 和hide 可选参数

bind bounce clip slide drop fold heightlight puff sacale pulsate

四，tabs()方法的事件

除了属性的设置外tabs()方法也提供了大量的事件，这些事件可以给各种不同状态时提供回调函数

tab事件选项

create 当创建时激活 两个参数 （event,ui)ui参数有两个子属性tab和panel 得到当前活动卡和内容选项的对象

activate 当切换一个活动卡时，启动此事件，该方法有两个参数（event,ui)ui参数有四个子属性newTab,newPanel,oldTab,oldPanel分别得到的新tab对象，新内容对象，旧tab对和就内容内容对象

beforeActivate 当切换一个活动卡之前，启动此事件，该方法有两个参数（event,ui)ui参数有四个子属性，newTab newPanel,oldTab,oldPanel.分别得到的是新tab对象，新内容对象，旧内容对象

load当ajax加载一个文档后激活此事件，该方法有两个参数（event,ui)ui参数有两个子的属性tab和panel得到当前活动卡和内容选项的对象

beforeLoad 当ajax加载一个文档前激活此事件了，该方法有两个参数（event,ui)ui参数有四个子属性tab和panel已经jqXHR和ajaxSettings,前两个得到当前活动卡和内容选项的对象，后两个是ajax操作对象

ui.ajaxSettings.url =‘tab3.html’;设置ajax请求加载路径

tabs(‘action’,param)方法

tabs(‘disable’) 返回值jQuery对象 禁用选项卡

$('#tabs').tabs('disable',0);

enable 启用选项卡

load 通过ajax 获取选项卡内容

widget 获取选项卡的jquery对象

destroy 删除选项卡 直接阻断了tabs

refresh 更新选项卡，比如高度

tabs(‘option’,param) 返回一般值 获取options属性的值

tabs(‘options’,param,value) jQuery对象 设置options属性的值

on方法

on（）触发的选项卡事件

tabsload ajax加载后触发

tabsbeforeload ajax加载前触发

tabsactivate 选项卡切换时触发

tabsbeforeactivate 选项卡切换前触发

折叠菜单UI

学习要点

1使用accordion

2.修改accodion样式

3.accordion()方法的属性

4.accordion（）方法的事件

5.accordion中使用on

折叠菜单accordion 和选项卡一样也是一种在同一个页面上切换不同内容的功能UI它和选项卡的使用几乎没有上面太大的变化只是显示的效果有差异

一使用accordion

//HTML部分

h1 菜单 div 内容 h2 菜单 div 内容2 h1 div neirong3

//jquery 部分

$(’#accordion’).accordion()

二修改accrodion样式

在显示的accordion折叠菜单中，

三。accordion方法的属性

1一个键值对表示一个选项，2.accordion(‘action’,param),action 时操作选项卡方法的字符串

param 则是options的某个键值对

accordion外观选项

collapsible false 当设置为true时允许菜单折叠对应的内容，默认值为false，不会关闭对应内容

disabled 无 默认为false 设置为true则禁用折叠菜单

event click/字符串 触发accordion的事件类型 默认为click 可以设置mouseover等其他鼠标事件

active 数组和布尔值 如果是数组 初始化时默认显示哪个tab，默认值为零。如果是布尔值，那么默认是否折叠，条件是collapsible值为true

hightStyle conten/字符串 默认为auto 即自动根据最高的哪个为基准，fill则是填充一定的可用高度，content则是根据内容伸展高度

header h1/字符串 设置折叠菜单的标题标签

icons 默认图标 设置想要的图标

四，accordion()方法的事件

除了属性设置外，accordion()方法也提供了大量的事件，这些事件可以给各种不同状态提供回调函数

accordion事件选项

create 当创建一个折叠菜单时激活此事件，该方法有两个参数（event,ui)ui参数有两个子属性header和panel得到当前标题和内容选项的对象

activate 当切换一个折叠菜单时，启动此事件，该方法有了两个参数（event,ui)ui参数有四个子属性newHeader,newPanel,oldHeader,oldPanel,分别得到的时候新header对象，新内容对象，旧header对象和旧内容对象

beforeActivate 当切花一个折叠菜单之前，启动此事件，该方法有两个参数（event,ui)ui参数有四个子属性newHeader,newPanel.oldHeader,oldPanel分别的到的时候新header对象，新内容对象，旧header对象和旧内容对象

accrdion(‘action’,param)方法

accordion(‘disable’)

enable 启用折叠菜单

widget 获取折叠菜单的jQuery对象

destroy 删除折叠菜单直接阻断了

refresh 更新折叠菜单，比如高度

accordion(‘option’,param) 获取options属性的值

accordion(‘option’,param,1)设置options的值

五。accordion中使用on()

on()方法触发的选项卡事件

accordionactivate 折叠菜单切换时触发

accordionbeforeactivate 折叠菜单切换前触发

编辑器插件

1编辑器简介

2引入uEditor

编辑器Editor 一般用于类似玉wordi一样的文本编辑器，只不过时为编辑HTML格式的，分类js类型的还有jQuery插件类型的

一。编辑器简介

版本较老可能需要向下兼容

/字符串 默认为auto 即自动根据最高的哪个为基准，fill则是填充一定的可用高度，content则是根据内容伸展高度

header h1/字符串 设置折叠菜单的标题标签

icons 默认图标 设置想要的图标

四，accordion()方法的事件

除了属性设置外，accordion()方法也提供了大量的事件，这些事件可以给各种不同状态提供回调函数

accordion事件选项

create 当创建一个折叠菜单时激活此事件，该方法有两个参数（event,ui)ui参数有两个子属性header和panel得到当前标题和内容选项的对象

activate 当切换一个折叠菜单时，启动此事件，该方法有了两个参数（event,ui)ui参数有四个子属性newHeader,newPanel,oldHeader,oldPanel,分别得到的时候新header对象，新内容对象，旧header对象和旧内容对象

beforeActivate 当切花一个折叠菜单之前，启动此事件，该方法有两个参数（event,ui)ui参数有四个子属性newHeader,newPanel.oldHeader,oldPanel分别的到的时候新header对象，新内容对象，旧header对象和旧内容对象

accrdion(‘action’,param)方法

accordion(‘disable’)

enable 启用折叠菜单

widget 获取折叠菜单的jQuery对象

destroy 删除折叠菜单直接阻断了

refresh 更新折叠菜单，比如高度

accordion(‘option’,param) 获取options属性的值

accordion(‘option’,param,1)设置options的值

五。accordion中使用on()

on()方法触发的选项卡事件

accordionactivate 折叠菜单切换时触发

accordionbeforeactivate 折叠菜单切换前触发

编辑器插件

1编辑器简介

2引入uEditor

编辑器Editor 一般用于类似玉wordi一样的文本编辑器，只不过时为编辑HTML格式的，分类js类型的还有jQuery插件类型的

一。编辑器简介

版本较老可能需要向下兼容