零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
Blind Effect
Bounce Effect
...

多种效果； http://www.w3cschool.cc/jqueryui/api-easings.html

$('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.

直接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') //無法彈出 ，私有
*/

    })

零JQ筆記 | jquery-ui

最新文章

最近回复

分类

归档

其它