零JQ筆記 | jquery-ui
文件結構：
external/jquery.js
jquery-ui.css
jquery-ui.js
jquery-ui.structure.css :特效、背景、邊框等
jquery-ui.theme.css ：佈局 架構：
structure.css + theme.css == jquery-ui.css
包含项：
UI Core :UI核心
Core
Widget
Mouse
Position
Interactions ：UI交互
Draggable：拖拽
Droppable ：拖动释放
Resizable：改变层大小
Selectable：选择元素，通过鼠标拖动，划过选中
Sortable：排序交互
Widgets :控件
Accordion
Autocomplete
Resizable
...
Effects:UI特效
Effects Core多种效果； http://www.w3cschool.cc/jqueryui/api-easings.html
Blind Effect
Bounce Effect
...
$('div').animate({'width':'100px'},1000，'特效easeOut...')jqui里removeClass,与addClass也支持特效；
$('div').removeClass('box',1000,'easeInQuad')并且也支持颜色
$('#div').animate({'backgroundColor':'blue'},1000)如：show('blind',1000)
See the Pen VembrW by elmok (@elmok) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
直接effect()做一次运动特效；
$('div').effect('linear',1000); 指定中心点运动方向 direction(left|right|up|down)
$('div').toggle('blind',{direction:'left'},1000)交互：http://www.w3cschool.cc/try/tryit.php?filename=jqueryui-api-draggable
API分為三部分：1、配置參數；2、方法；3、自定義事件
以draggable為例
1、option/Method
$('#div').draggable({
axis:'x',
cursor:'crosshair',
cursorAt:{left:0,top:0},
handle:'p'
}) //初始化
//如在以上有初始化狀態的元素下：可有：
$('#div').draggable('destroy') //銷毀
$('#div').draggable('disable') //禁用
$('#div').draggable('enable') //啟用
$('#div').draggable('instance') //獲取對象
$('#div').draggable('widget') //获取对像 做组件的链式操作2、Events自定義事件
$('#div2').draggable({
axis:'x',
create: function () {
alert(1); //一上來初始化調1
},
start: function () {
alert(2); //按下後調2
}
})draggable與sortable組合使用： http://jqueryui.com/draggable/#sortable
Mothed方法兩種寫法
//寫法一：
$('div').draggable('destroy')
//傳統寫法二：
var obj = $('div').draggable('instance') //得到組件對象
obj.disable()//對象下調方法 ；Event自定義事件兩種寫法
//寫法一：
$('#div2').draggable({
axis:'x',
create: function () {
alert(1); //一上來初始化調1
},
start: function () {
alert(2); //按下後調2
}
})
//寫法二：
$('#div2').on('dragcreate', function () {
alert(2)
})refresh
<input type="button" value="add"/>
<div id="div1">
<p>aaa</p>
<div>111</div>
<p>bbb</p>
<div>222</div>
<p>ccc</p>
<div>333</div>
</div>當add即時增加高度時，必須使用refresh參數才能使用高度自動變高而不是出現滾動條；
$('#div1').accordion() //調用手風琴選項卡方法
$('input').click(function () {
var html = $('#div1').find('div').first().html()
$('#div1').find('div').first().html(html+'1 <br />')
$('#div1').accordion('refresh')
})UI控件自行查看API
UI核心
选择器
:data()
:focusable()
:tabbable()
方法
disableSelection()
enableSelection()
focus()
scrollParent()
jQuery.ui.keyCode
$('div').slice(0,2).data('name','elmok'); //給選中元素添加外部數據
$('div:data(name)').css('background','red') //使用外部數據設css
$('body').children(':focusable').css('background','red') //獲取有光標的
$('body').children(':tabbable').css('background','red') //獲取能接收tab鍵元素的；
$('div').disableSelection() //禁止選擇
$('div').enableSelection() //開啟選擇
//1s後激活光標位置
$('input').focus(1000, function () {
this.style.background = 'red'
})
//即父級必須具備滾動條才可選中，不一定要有滾動，但需具備，比如設置overflow:hidden,就不具備了；所以是overflow:auto;
$('p').scrollParent().css('background','red')
$(document).on('keydown', function (ev) {
if (ev.keyCode == $.ui.keyCode.ENTER) { // ev.keyCode == 13
alert('回車')
}
})position()
<div id="div1">
<div id="div2"></div>
</div> $(function () {
$('#div2').position({
my: 'left bottom', //div2內層基點居中
at: 'right bottom',//div1外層基點
of: '#div1'//div1外層指定元素
})
})<h2>Widget Factory</h2>
//比如，創建一個方法：testProgressBar()，調用是使用下面這種形式：
$('#div1').testProgressBar({value: 20});
//所以架子應該是：
$.widget('eonon.testProgressBar'{ //不能直接寫，防止衝突 需要加命名空間；
options:{},
_create:function(){}
})
稍微豐富點
$('#div1').testProgressBar({
value: 20,ut:'px',color:'red' //value,ut,color作為配置參數
});
$.widget('eonon.testProgressBar'{ //不能直接寫，防止衝突 需要加命名空間；
options:{
value: 0,
ut: '%',
color:'pink'
},
_create:function(){
var progress = this.options.value + this.options.ut;
this.element.html(progress).css('color',this.options.color) //this.element == div1
}
})$.widget(方法名，json擴展)
http://api.jqueryui.com/mouse/
$.ui.mouse指繼承方法，如果不是自定義事件則可不寫
http://api.jqueryui.com/jQuery.widget/#method-_create
自定義事件作為options參數接收；_create:function(){初始化}；_mouseUp:function(){接收}
_mouseUp需要在_create裏初始化this._mouseInit()
$(function () {
$.widget('eonon.testProgressBar', $.ui.mouse , { //不能直接寫，防止衝突 需要加命名空間；
options: { //收集配置參數
value: 0,
ut: '%',
color:'pink',
customMouseUp: function () {} //自定義事件即作為options的屬性，再使用_mouseUp這個默認up方法調用即可
},
_create: function () {
var progress = this.options.value + this.options.ut;
this.element.html(progress).css('color',this.options.color) //this.element == div1
this._mouseInit()
},
_setOption: function (a,b) { //進行設置操作時走這裏
//alert(a) //value
//alert(b) //80
if(a == 'value'){
this.element.html(b+this.options.ut)
}
},
aaa: function () { //共用方法，
alert('aaa')
},
_aaa: function () { //帶下劃線是私有方法，外部找到；
alert('_aaa')
},
_mouseUp: function () {
//alert('_mouseUp')
this.element.trigger('m.customMouseup')
this.options.customMouseUp()
}
});
$('#div1').testProgressBar({
value: 20,ut:'px',color:'red'//value作為配置參數
,customMouseUp: function () { //自定義事件；
alert('觸發了參數定義的mouseUp')
}
});
//調用自定義方法：
$('#div1').on('m.customMouseup', function () {
alert('on帶up時觸發')
})
/*
$('#div1').testProgressBar('aaa') //正常彈出
$('#div1').testProgressBar('_aaa') //無法彈出 ，私有
*/
})