jQueryUI

時間 2019-11-29

標籤 jqueryui 欄目 JQuery 简体版

原文原文鏈接

前言

做爲一個的後端開發人員，把前端技術作到很好這顯然是矛盾的，若是所處團隊沒有前端人員，使用UI框架到也不失爲一個不錯的選擇，UI框架有不少例如bootstrap、easyUI....本文主要介紹jQueryUI；javascript

概述

Query UI 是創建在JavaScript、 jQuery之上的UI庫，主要包含：交互組件、部件、高級效果....css

下載：https://jqueryui.com/download/html

官網： https://jqueryui.com/前端

文檔： http://www.css88.com/jquery-ui-api/、其餘java

1、交互組件

交互組件主要是一些以鼠標爲核心的用戶操做，好比：拖動、放置、拆分、排序、跳轉元素大小....；jquery

1. Draggable組件web

顧名思義Draggable組件能夠幫助咱們隨意鼠標拖動網頁中的標籤；ajax

1.0 初探redis

$('#zhanggen').draggable() //隨意拖動；

1.1 常見配置spring

$('#zhanggen').draggable({{axis:'x'}) //沿着X軸拖動

$('#zhanggen').draggable({{axis:'y'}) //沿着Y軸拖動

$('#zhanggen').draggable({containment:"window" }) //限制拖動區域： window/document（當前窗口/文檔樹）/ parent(父級標籤) 默認：fase

$('#zhanggen').draggable({ containment:[0,0,200,200 ] }) //經過座標位置限制拖動區域

$('#zhanggen').draggable({ containment:'#dragg_zone' }) //經過選擇器限制在某標籤內拖動

$('#zhanggen').draggable({distance:10}) //鼠標移動N px以後再移動

$('#zhanggen').draggable({delay:2000}) //延時拖動（單位毫秒）

$('#zhanggen').draggable({grid:[100,100] }) //按照每次移動100px 的步伐拖動

snap:'#dragg_zone' //吸附到目標元素（滑動驗證效果）

snapMode:"inner" //指定吸附到目標盒子的哪裏？ inner/outer/both

snapTolerance:100 //多大間距開始吸附

helper:'clone' //設置拖動分身而非自己

1.2 常見方法

var option=$('.zhanggen').draggable('option','helper'); // 檢查是否配置某選項？有返回配置項，沒有返回false！

var option=$('.zhanggen').draggable('option','helper'); // 查看是否配置某選項？有返回配置項，沒有返回false！

var option=$('.zhanggen').draggable('option','helper'); // 查看全部配置

var option=$('.zhanggen').draggable('option','helper','clone') ; //設置

var option=$('.zhanggen').draggable('option',{'helper':'clone', 'axis':'x'}); //設置多選配置

1.3 觸發事件

create :拖動組件被建立時執行

start:開始拖動執行

drag:拖動中執行

stop:中止拖動執行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.css">
    <style>
        *{
            margin: 0;
        }
        div{
            display: inline-block;
            height: 40px;
        }
        #box{
            display: inline-block;
             border: 1px solid red;
            width: 100%;

        }

        .zhanggen {
            width: 40px;

            background: #c0a16b;


        }
        #dragg_zone {
            width: 40px;
            background: slateblue;
            margin-left: 300px;
        }
    </style>
    <script>
        $(function () {
            $('.zhanggen').draggable({
                axis:'x', //只能沿X軸拖動
              //axis:'y', //只能沿X軸拖動
                containment:"#box", //限制拖動區域 window/document（當前窗口/文檔）、parent(父級標籤) 默認：fase
                //  containment:[0,0,200,200 ] //按座標定位
                {#               distance:10, //鼠標移動N px以後再移動#}
                {#               delay:2000,//延時拖動 （單位毫秒）#}
                {#                grid:[100,100], //按每次100px的步伐 拖動#}
                snap: '#dragg_zone',//吸附到目標 元素（滑動驗證效果）
                snapMode: "inner",//吸附到目標元素的 哪裏？ inner/outer/both
                snapTolerance: 100,//多大間距 快開吸附
                helper: 'clone',//設置拖動分身 而非自己
                containment: 'windown',//限制 在某標籤內拖動

                create: function (e, ui) {
                console.log('開啓拖動效果')
                },
                start:function (e,ui) {
                    console.log('開始拖動')
                },
                drag:function (e,ui) {
                    console.log('正在拖動')
                },
                stop:function () {
                    alert('驗證成功');
                    window.location.href='https://m.anysex.com/categorys/'
                }


            });
            //$('.zhanggen').draggable( 'destroy') //註銷拖動效果
            {#            $('.zhanggen').draggable( 'disable'); //禁用拖動效果#}
            {#            $('.zhanggen').draggable( 'enable');  //開啓拖動效果#}
            {#            var option=$('.zhanggen').draggable('option','helper');// 查看是否配置某選項？有返回配置項，沒有返回false！#}
            {#            var option=$('.zhanggen').draggable('option','helper');// 查看全部配置#}
            {##}
            {#            var option=$('.zhanggen').draggable('option','helper','clone');//設置#}
            {#            var option=$('.zhanggen').draggable('option',{'helper':'clone', 'axis':'x'});//設置多選配置#}


        })
    </script>
</head>
<body>
<div id="box">
<div class="zhanggen"></div>
<div id="dragg_zone"></div>
 </div>
</body>
</html>

滑動驗證

2.droppable組件

droppable和Draggable組件相呼應，拖動一個可元素（ Draggable）到達droppable元素以後產生的一系列效果；

2.0 初探

 <script>
        $(function () {
            $('.zhanggen').draggable({
                axis:'x',
                containment:"#box"
                });
            $('#dragg_zone').droppable({
                drop:function (event,ui) {
                    alert('你想壓死我了啊？')//被拖動元素 和接收元素 重疊並釋放鼠標，觸發！
                }
            })

        })
    </script>

2.1 常見配置

accept:'.zhanggen' 　　　　　　　　　　　　//設置接受的拖動元素

accept:function (drag) { console.log(drag)}　　// 設置拖動全部可拖動元素，釋放鼠標時被執行，return true才能夠被接收元素接收

activeClass:'class1'　　　　　　　　　　　　 //拖拽時爲接收元素增長一個class類

hoverClass:'class1'　　　　　　　　　　　　 //可拖動元素通過接收元素時新增1個類

tolerance:'touch' 　　　　　　　　//觸發over事件時機；可拖動元素和放置元素徹底重疊 / ntersect：至少重疊50% / pointer：中心點重疊 touch:只有觸碰到

scope:"值" 　 //使 Draggable和droppable設置的值一致，則產生配對（默認爲default）

2.2. 觸發事件

over:function //Draggable 通過 droppable觸發

drop:function　　　　　　　　　　//Draggable 和 droppable重疊並釋放鼠標以後觸發

out:function　　　　　　　　　　 //Draggable 離開 droppable

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.css">
    <style>
        *{
            margin: 0;
        }
        div{
            display: inline-block;
            height: 40px;
        }
        #box{
            display: inline-block;
             border: 1px solid red;
            width: 100%;

        }

        .zhanggen {
            width: 40px;
            background: #c0a16b;


        }
        .dragg_zone {
            width: 40px;
            background: slateblue;
            margin-left: 300px;
        }
        .class1{
            background: springgreen;

        }
    </style>
    <script>
        $(function () {
            $('.zhanggen').draggable({
                axis:'x',
                scope:"aaa",
                containment:"#box"
                });
            $('.dragg_zone').droppable({
{#                accept:'.zhanggen',                  //設置接受的 拖動元素#}
{#                accept:function (drag) {             // 拖動全部可拖動元素，釋放鼠標時被執行，return true才能夠被接收元素接收#}
{#                    console.log(drag);#}
{#                    return true#}
{#                },#}
{#                activeClass:'class1',                //拖拽時 爲接收元素 add一個類#}

                hoverClass:'class1',                //可拖動元素通過 接收元素時 新增1個類
                tolerance:'touch',                  //fit：可拖動元素和放置元素徹底重疊  ntersect：至少重疊50% pointer：中心點重疊 touch:只有觸碰到 觸發over事件
                scope:"aaa",                         //使 Draggable和droppable設置的值一致，則產生配對（默認爲default）


                over:function (ecen,ui) {            //Draggable 通過 droppable觸發
                    console.log('通過 我上面了！')
                },
                drop:function (event,ui) {           //Draggable 和 droppable重疊並釋放鼠標以後觸發
                    ui.droppable.appendTO(this);
                        console.log('Draggable 和 droppable重疊並釋放鼠標以後觸發')
                },
                out:function (event,ui) {            //Draggable 離開 droppable
                    console.log('離開了！')
                }

            })

        })
    </script>
</head>
<body>
<div id="box">
<div class="zhanggen" droppable=true></div>
<div class="dragg_zone"></div>
 </div>
</body>
</html>

回收站

3.sortable組件

使html元素，可拆分、排序；

3.0 初探

<script>
        $(function () {
            $('ul.u10').sortable()  //調用jQuery-ui 的sortable方法

}) </script>

3.1 常見配置

connectWith: 'ul.ul1', 　　　　//設置能夠拖動、鏈接到哪一個容器

dropOnEmpty: true, 　　　　 //是否容許拖動、鏈接到一個空白容器中(注意設置空白容器的高度)

placeholder: 'placehodolder' //拖動新元素時新增1個class

items:'> *' 　　　　　　　　 //限制可移動的元素（默認是$('ul.ul0').sortable方法，全部子代）

cancel:'> *'　　　　　　　　 //設置不能夠拖動的元素

var toArray_id=$('ul.ul0').sortable('toArray'); //返回1個以排序元素id值爲內容的列表

3.2 觸發事件

beforeStop:function (ele,ui) {} //當排序元素排序完成後，觸發的事件；

change:function (ele,ui) {} //當排序元素位置發生變化時，執行；

receive:function () {} 　 //鏈接的sortable中的元素，移動到當前sortable時觸發該事件

remove:function () {} 　 //當前sortable中的元素，移動到鏈接的sortable中觸發

update:function () {}　　　　　　 //sortable中的元素在移動過程當中，順序發生變化觸發，順序沒有變化不觸發；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.css">
    <style>
        body, ul {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            width: 50%;
            float: left;
        }

        ul li {
            width: 90%;
            height: 30px;
            border: 1px solid #ccc;
            margin: 5px auto;
        }

        .ul0_li {
            background: #eee;
        }

        .ul1_li {
            background: pink;

        }

        .placehodolder {
            background: silver;
            border: 1px dashed springgreen;

        }
    </style>
    <script>
        $(function () {
            $('ul.ul0').sortable({
                connectWith: 'ul.ul1',            //設置能夠拖動、鏈接到哪一個容器
                dropOnEmpty: true,                //是否容許拖動、鏈接到一個空白容器中(注意設置 空白容器的高度)
                placeholder: 'placehodolder',   //拖動新元素時 新增1個class
                items: '> *',                        //限制可移動的元素（默認是$('ul.ul0').sortable方法，全部子代）
                cancel: '> *',                       //設置不能夠拖動的元素
                beforeStop: function (ele, ui) {       //當排序元素排序完成後，觸發的事件；
                    console.log('一次拖動結束')
                },
                change: function () {                  //當排序元素位置發生變化時，執行；
                    console.log('動起來了！')
                },
                receive: function () {                //鏈接的sortable中的元素，移動到當前sortable時觸發該事件
                    console.log('來嘍！')
                },
                remove: function () {
                    console.log('走嘍')              //當前sortable中的元素，移動到鏈接的sortable中觸發
                },
                update: function () {
                    console.log('位置發生改變')      //sortable中的元素在移動過程當中，順序發生變化觸發，順序沒有變化不觸發；
                }

            });
            $('ul.ul1').sortable({
                connectWith: 'ul.ul0'            //設置能夠拖動、鏈接到哪一個容器
            });
            $('button').click(function () {
                var toArray_id = $('ul.ul0').sortable('toArray');  //返回1個一排序元素id 爲值爲內容的列表
                console.log(toArray_id)
            });

        })
    </script>
</head>
<body>
<ul class="ul0">
    <li id="ul0_li0" class="ul0_li">0</li>
    <li id="ul0_li1" class="ul0_li">1</li>
    <li id="ul0_li2" class="ul0_li">2</li>
    <li id="ul0_li3" class="ul0_li">3</li>
    <li id="ul0_li4" class="ul0_li">4</li>
    <li id="ul0_li5" class="ul0_li">5</li>
    <li id="ul0_li6" class="ul0_li">6</li>
</ul>
<ul class="ul1">
    <li class="ul1_li">0</li>
    <li class="ul1_li">1</li>
    <li class="ul1_li">2</li>
    <li class="ul1_li">3</li>
    <li class="ul1_li">4</li>
    <li class="ul1_li">5</li>
    <li class="ul1_li">6</li>
</ul>
<button>確認</button>
</body>
</html>

排行榜

4.resizable組件

經過鼠標動態調整html元素的大小；

4.0 初探

$('#div1').resizable() //可動態調整元素的大小

4.1 常見配置

containment:'#box'　　 //限制調整的大小

alsoResize:'#img1'　　 //調整元素大小的同時關聯上其餘元素(默認 false) 例如：動態調整圖片的大小

aspectRatio:true　　 //是否保持寬/高比例不變形

autoHide:true　　　　 //設置鼠標懸停以後，右下角拖拽把手顯示

maxWidth:1000　　　 //限制最大調整寬度

handles:'e,s,se' 　　　 // 限制調整大小方位

4.2 觸發事件

create:function (event,ui) {} 　　 //建立resizable 時觸發

start:function (event,ui){} //開始調整時觸發

resize:function (event,ui) {} //調整中實時觸發

stop:function (event,ui) {} //調整結束以後觸發

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.css">
    <style>

         #box{
            width: 1000px;
            height: 680px;
            border: solid 1px red;
             padding: 10px;
        }


    </style>
    <script>
        $(function () {
            $('#box').resizable({             //可動態調整元素的大小
            //containment:'#box',              //限制調整的大小
            alsoResize:'#img1',             //調整元素大小的同時 關聯上其餘元素(默認 false)
            aspectRatio:true,               //是否保持 寬/高比例不變形
            autoHide:true,                   //設置鼠標懸停以後，右下角拖拽把手顯示
            maxWidth:1000,                    //限制最大調整 寬度
            handles:'e,s,se',                 // 限制調整大小 方位


            create:function (event,ui) {       //建立resizable 時觸發
                alert('可調整大小了')
            },
            start:function (event,ui){          //開始調整時觸發
              console.log('開始調整啦！')
            },
            resize:function (event,ui) {        //調整中實時觸發
                console.log('調整中')
            },
            stop:function (event,ui) {          //調整結束以後觸發
                console.log('調整結束了！')
            }
            

            })
        })
    </script>
</head>
<body>
<div id="box">
    <img id="img1" src="/static/666.jpg" >
</div>
</body>
</html>

大丈夫相框

五、Selectable

點擊選中某個元素後發生css樣式變化；

5.0 初探

$('ul.ul0').selectable();

5.1 常見配置

cancel:'#0',　　　　　　　　 //設置不能夠被選中的元素

filter:'*' 　　　　　　　　　　//設置那些元素能夠被選中

5.2 事件

start:function () {} 　　　　　//選擇開始執行的函數

stop:function () {}　　　　　 //選擇結束執行的函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.css">
    <style type="text/css">
        ul.ul0 {
            list-style:none;
            margin:0 auto;
            width:80%;
        }
        ul.ul0 li {
            height:30px;
            background:#eee;
            border:1px solid #ccc;
            margin:10px 0;
        }
        .ui-selectable .ui-selected {
            background:pink;
            color:#fff;
        }
</style>
    <script>
        $(function () {
            $('ul.ul0').selectable({
                cancel:'#0',   //設置不能夠被選中的元素
                filter:'*',     //設置那些元素能夠被選中
                start:function () { //選擇開始執行的函數
                    $('#div1').html('');
                    console.log('選擇開始')
                },
                stop:function () { //選擇結束執行的函數
                    $('.ui-selected',this).each(function (index,element) {
                        $('#div1').append($(element).html())
                    });
                    console.log('選擇結束')
                }

            });
        });
    </script>
</head>
<body>
<ul class="ul0">
    <li id="0">0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<div id="div1"></div>
</body>
</html>

View Code

2、部件

部件是指對頁面的功能擴展，好比按鈕、菜單、日期採集、對話框....

1.滑動條部件

滑動條部件是在頁面呈現一個滑動條，讓用戶滑動選擇本身想要的值，而沒必要使用單調的input輸入框；

1.0 初探

$('#slider_wgedit').slider();

1.1 常見配置

animate:true　　　　　　　　 //滑動手柄將以默認的時間執行動畫效果

max:100　　　　　　　　　　 //設置滑動軌道的最大值

min:0　　　　　　　　　　　　//設置滑動軌道的最小值

orientation:'horizontal'　　　　 //設置滑動的方向 horizontal（默認橫向）、vertical(縱向)

range:"min"　　　　　　　　 //設置從哪裏開始；最小或者最大（進度條）max|min|true

step:10　　　　　　　　　　 //設置滑動步長，默認爲1

values:[10,50]　　　　　　　 //設置默認節點

1.2 常見事件

create:function () {} 　　 //滑動條建立完畢以後執行

slide:function (evet,ui) {} //滑動過程當中觸發

change:function (evet,ui) {} //滑動完成時觸發

1.3 界面

.ui-slider-handle   滑動手柄的class
.ui-slider-range    已滑動的區域的 class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.css">
    <script>
        $(function () {
            $('#slider_wgedit').slider({
                animate: true,//滑動手柄將以默認的時間執行動畫效果
                max: 100,      //設置滑動軌道的最大值
                min: 0,      //設置滑動軌道的最小值
                orientation: 'horizontal', //設置滑動的方向 horizontal（默認橫向）、vertical(縱向)
                range: "min",                //設置從哪裏 開始；最小或者最大（進度條）max|min|true
                step: 10,                      //設置滑動步長，默認爲1
                {#                values:[10,50],               //設置默認節點#}

                create: function () {          //滑動條建立完畢以後執行
                    $(this).children('.ui-slider-handle').append('<i></i><i></i>')
                },
                slide: function (evet, ui) {      //滑動過程當中觸發
                    console.log()
                },
                change: function (evet, ui) {    //滑動完成時觸發
                    console.log(ui)
                }
                /*
                界面
                .ui-slider-handle   滑動手柄的class
                .ui-slider-range    已滑動的區域的 class
   
                 */


            });
        })
    </script>
    <style type="text/css">
        #sifangku {
            width: 420px;
            height: 28px;
            margin: 100px;
            background: #e8e8e8;
        }

        #sifangku .ui-slider-handle {
            width: 18px;
            height: 35px;
            background: #2dacd1;
        }

        #sifangku .ui-slider-handle i {
            display: inline-block;
            width: 2px;
            height: 12px;
            background: #68c3de;
            margin: 12px -3px 0px 6px;
        }

        #sifangku .ui-slider-range {
            background: #43bfe3;
            overflow: hidden;
        }

        #sifangku .ui-slider-range div.box {
            width: 420px;
        }

        #sifangku .ui-slider-range div.box div.sep div.data {
            color: #fff;
        }

        #sifangku .ui-slider-range div.box div.sep div.line {
            border-color: #2dacd1;
        }

        #sifangku div.sep {
            width: 105px;
            height: 28px;
            float: left;
        }

        #sifangku div.sep div.data {
            font-size: 13px;
            line-height: 28px;
            float: right;
            margin-right: 10px;
            color: #999;
        }

        #sifangku div.sep div.line {
            width: 1px;
            height: 28px;
            border-right: 1px solid #ddd;
            float: right;
        }

    </style>
    <script type="text/javascript">
        $(function () {

            $('#sifangku').slider({
                range: 'min',
                max: 200,
                animate: true,
                create: function () {
                    var html = '<div class="sep"><div class="line"></div><div class="data">50M</div></div>' +
                        '<div class="sep"><div class="line"></div><div class="data">100M</div></div>' +
                        '<div class="sep"><div class="line"></div><div class="data">150M</div></div>' +
                        '<div class="sep"><div class="data">200M</div></div>';
                    $(this).append(html);
                    $(this).children('.ui-slider-range').append('<div class="box">' + html + '</div>');
                    $(this).children('.ui-slider-handle').append('<i></i><i></i>');
                },
                slide: function (e, ui) {
                    $('#sValue').html(ui.value);
                }
            });
        });
    </script>
</head>
<body>
<div id="sifangku"></div>
<div id="sValue"></div>
</body>
</html>

滑動條部件

2.按鈕部件

按鈕部件不可快捷得實現更加飽滿、美觀的button；

2.0 初探

$('button').button()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="/static/plugin/jquery-ui-1.11.4/jquery-ui.min.css">
    <script>
        $(function () {
            $('button').button({
                'label':'提交' //設置button的內容
            });
            $('#sex').buttonset();//設置radio 分組按鈕
            $('#hobby').buttonset()
        })
    </script>
</head>
<body>
<button id="zhanggen">點我</button>
<div id="sex">
<input type="radio" name="sex" id="boy"><label for="boy">男</label>
<input type="radio" name="sex" id="girl"><label for="girl">女</label>
</div>

<div id="hobby">
<input type="checkbox" name="hobby" id="eat"><label for="eat">吃</label>
<input type="checkbox" name="hobby" id="sport"><label for="sport">運動</label>
<input type="checkbox" name="hobby" id="girls"><label for="girls">美女</label>
<input type="checkbox" name="hobby" id="boys"><label for="boys">帥哥</label>

</div>
</body>
</html>

代碼

3 進度條

3.0 初探

$('#zhanggen').progressbar() //生成進度條

3.1 常見配置

max:120,                               //設置進度條的最大值（默認爲100）
value:90                               //設置完成進度值 Number | false（模糊值，例如正在進行中！）

3.2 常見方法

$('#zhanggen').progressbar('value');  　　　　 //設置進度值
$('#zhanggen').progressbar('option','max') 　　//設置最大值

3.3 事件

 create:function () {
                     console.log('建立完畢！')
                },

 change:function () {
                  console.log('進行中...')
                },

  complete:function(e,ui){             　　//進度條完成以後，觸發的函數；
                     alert('完成啦！');
                                }

3.4 界面

.ui-progressbar-value   //進度條已填充部分的class類

4.微調部件（Spinner Widget）

經過向上和向下箭頭按鍵操做，調整文本輸入框的值；

4.0 初探

$('#zhanggen').spinner();

4.1 常見配置

    //disabled:true    //禁用輸入框
    min:6,             //設置初始值
    step:2,            //設置步進
   max:10              //設置最大輸入值

4.2 常見方法

   $('#zhanggen').spinner('value',10);   　　 //設置input中的值
   $('#zhanggen').spinner('stepUp'); 　　　　 //至關於 點擊了一下向上按鈕
   $('#zhanggen').spinner('stepUp'); 　　　　 //至關於 點擊了一下向上按鈕
   $('#zhanggen').spinner('stepDown'); 　　  //至關於 點擊了一下向上按鈕
   var v=$('#zhanggen').spinner('value');   //獲取輸入的值

4.3 常見事件

  　　　　　　　　 create:function (event,ui) {                 //建立完成以後執行
                    console.log('已建立！')
                },
                change:function (event,ui) {  　　　　　　　　　 //修改值，焦點離開以後執行
                    console.log('注意你作了內容修改！')
                },　　
                start:function (event,ui) {  　　　　　　　　　　//1次微調開始執行
                     console.log('微調開始！')
                },
                spin:function (event,ui) {  　　　　　　　　　　　//作微調的時候觸發執行
                    console.log(ui.value)
                },
                stop:function (event,ui) {  　　　　　　　　　　　//1次微調結束執行
                    console.log('微調結束！')
                }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="/static/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
    <link rel="stylesheet" href="/static/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.min.css">
    <style>
        span .unit{
            width: 40px;
            height: 20px;
            display: block;
            overflow: hidden;
            position: absolute;
            right: 25px;
            top: 3px;
        }
        input{
            outline: none;
            outline-color: red;
        }
    </style>
    <script>
        $(function () {
            $('#zhanggen').spinner({
                //disabled:true    //禁用輸入框
                min:6,             //設置初始值
                step:2,            //設置步進
                max:10,              //設置最大輸入值

                create:function (event,ui) {  //建立完成以後執行
                    $(this).after('<span class="unit">Mbps</span>');
                    console.log('已建立！')
                },
                change:function (event,ui) {  //修改值，焦點離開以後執行
                    console.log('注意你作了內容修改！')
                },
                start:function (event,ui) {  //1次微調開始執行
                     console.log('微調開始！')
                },
                spin:function (event,ui) {  //作微調的時候觸發執行
                    console.log(ui.value)
                },
                stop:function (event,ui) {  //1次微調結束執行
                    console.log('微調結束！')
                }
            });






        })
    </script>
</head>
<body>

<label for="zhanggen">帶寬：</label><input id="zhanggen" type="text" value="0">
</body>
</html>

微調部件

5.下拉菜單部件（selectmenu）

下拉菜單部件能夠輕鬆得對原生select標籤，作CSS樣式優化；

5.0 初探

$('select').selectmenu()

5.1 常見配置

 position:{my:'left top',at:'right bottom'}, //設置下拉option顯示得位置
 width: 100                                       //設置寬度

5.2 常見方法

$('select option:eq(2)').attr('selected','selected');
$('select').selectmenu('refresh');  //刷新 selectmenu

6.工具提示部件 tooltip Widget

提示部件能夠輕鬆得對設置title屬性的標籤，作CSS樣式優化；

6.0 初探

 $('#zhanggen').tooltip()

6.1 常見配置

                content:function () {         //設置提示內容 function | 字符串
                    //ajax 向後端請求！
                    return 1
                },
                tooltipClass:'class0',      　//給提示div 增長class
                track:true,                   //提示信息跟隨鼠標移動
                show:false,                   //提示信息顯示效果
                hide:'explode',               //提示信息消失效果
                disabled:false                //設置禁用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="/static/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="/static/jquery-ui-1.12.1.custom/jquery-ui.min.css">
    <script>

        $(function () {
            $('#zhanggen').tooltip({
                content:function () {         //設置提示內容 function | 字符串
                    //ajax 向後端請求！
                    return '點我讓你看簧片！'
                },
                tooltipClass:'class0',      //給提示div 增長class
                track:true,                   //提示信息跟隨鼠標移動
                show:false,                   //提示信息顯示效果
                hide:'explode',               //提示信息消失效果
                disabled:false               //設置禁用

            })
        })
    </script>
</head>
<div id="zhanggen">
    <a href="https://m.anysex.com" title="點我讓你看簧片！">點我</a>
</div>

<body>

</body>
</html>

代碼

7.選項卡切換部件 Tabs_widget

選項卡切換部件也就是網站中導航欄；

7.0 初探

$('#china').tabs()

7.1 常見配置

 collapsible:true,             //設置全部tab 選項均可以關閉！
 disabled:[3],                 //設置成禁用true爲全部,[可選]
 event:'mouseover',      　　   //設置切換選項卡的事件（默認爲 click事件）
 heightStyle:'auto',       　 　//設置每一個選項卡的高度 auto取最高| 默認根據內容
 active:false                  //設置默認打開的選項卡，默認爲0，設置爲false 所有關閉

7.2 常見方法

 $('#china').tabs('load',3);     //加載遠程選項卡的內容
 $('#china').tabs('refresh')     //刷新選項卡

7.3 常見事件

7.4 界面

8.摺疊菜單部件 Accordion Widget

摺疊菜單也就是咱們常見的網站菜單欄；

8.0 初探

 $('#zhanggen,#ul').accordion()

HTML結構

<!--佈局方式1開始  -->
<div id="zhanggen">
    <h3>首頁</h3>
    <div>
    </div>
    <h3>主機管理</h3>
    <div>
        <p><a>主機列表</a></p>
        <p><a>新增主機</a></p>
        <ul id="ul">
            <li>
                <h3>工單管理</h3>
                <div>
                    <p><a>工單列表</a></p>
                    <p><a>建立工單</a></p>
                </div>
            </li>
            <h3>監控管理</h3>
            <div>
                <p><a href="">監控列表</a></p>
                <p><a href="">添加監控</a></p>
            </div>

            </li>
        </ul>
    </div>
    <h3>監控管理</h3>
    <div>
        <p><a href="">監控列表</a></p>
        <p><a href="">添加監控</a></p>
    </div>
    <h3>工單管理</h3>
    <div>
        <p><a>工單列表</a></p>
        <p><a>建立工單</a></p>
    </div>
</div>
<!--佈局方式1結束  -->

方式1

<!--佈局方式2開始  -->
<ul id="ul" style="margin-top: 10px">
    <li>
        <h3>工單管理</h3>
        <div>
            <p><a>工單列表</a></p>
            <p><a>建立工單</a></p>
        </div>
    </li>
    <h3>監控管理</h3>
    <div>
        <p><a href="">監控列表</a></p>
        <p><a href="">添加監控</a></p>
    </div>
    </li>
</ul>
<!--佈局方式2結束 -->

方式2

8.1 常見配置

 collapsible: true,              //全部部分均可以關閉
 heightStyle: 'content'    　　  //默認 auto取最高 |content根據內容
 //active:false,                //設置默認打開的item
 //event: 'mouseover'    　　　　//設置打開的 事件 默認click

8.2 常見方法

8.3 觸發事件

8.4 界面調整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="/static/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="/static/jquery-ui-1.12.1.custom/jquery-ui.min.css">
    <style>
        #zhanggen {
            width: 200px;
        }

        {#        #ul {#}
        {#            width: 200px;#}
        {#        }#}
    </style>
    <script>
        $(function () {

            $('#zhanggen,#ul').accordion({
                collapsible: true, //全部部分均可以關閉
                heightStyle: 'content' //默認 auto取最高 |content根據內容
                //active:false,     //設置默認打開的item
                //event: 'mouseover'//設置打開的 事件 默認click

            });
        })
    </script>
</head>
<body>
<!--佈局方式1開始  -->
<div id="zhanggen">
    <h3>首頁</h3>
    <div>
    </div>
    <h3>主機管理</h3>
    <div>
        <p><a>主機列表</a></p>
        <p><a>新增主機</a></p>
        <ul id="ul">
            <li>
                <h3>工單管理</h3>
                <div>
                    <p><a>工單列表</a></p>
                    <p><a>建立工單</a></p>
                </div>
            </li>
            <h3>監控管理</h3>
            <div>
                <p><a href="">監控列表</a></p>
                <p><a href="">添加監控</a></p>
            </div>

            </li>
        </ul>
    </div>
    <h3>監控管理</h3>
    <div>
        <p><a href="">監控列表</a></p>
        <p><a href="">添加監控</a></p>
    </div>
    <h3>工單管理</h3>
    <div>
        <p><a>工單列表</a></p>
        <p><a>建立工單</a></p>
    </div>
</div>
<!--佈局方式1結束  -->




<!--佈局方式2開始  -->
<ul id="ul" style="margin-top: 10px">
    <li>
        <h3>工單管理</h3>
        <div>
            <p><a>工單列表</a></p>
            <p><a>建立工單</a></p>
        </div>
    </li>
    <h3>監控管理</h3>
    <div>
        <p><a href="">監控列表</a></p>
        <p><a href="">添加監控</a></p>
    </div>
    </li>
</ul>
<!--佈局方式2結束 -->
</body>
</html>

代碼

9.對話框部件 dialog Widget

9.0 初探

$('<div id="dialog0" title="對話框標題">內容</div>').dialog()  //title屬性=對話框標題 div內容=對話框顯示的內容

9.1 配置

<script>
        $(function () {
            $('#dialog0').dialog({
                resizable:true,          //容許調整對話框的大小
                hide:"fadeOut",          //隱藏對話框的動畫效果
                show:'fadeIn',            //展現對話框的動畫效果
                autoOpen:false,            //自動打開對話框
                //width:500,                //指定對話框的寬度；默認爲300
                //height:100,                 //指定對話框高度，默認auto 根據內容而定
                modal:true,                  //莫泰遮罩層效果
                buttons:{                   //定製對話框中的 button按鈕 肯定|取消
                    '肯定':function () {
                        //向後臺提交數據
                    },
                    '取消':function () {
                        $(this).dialog('close')
                    }
                }
            });
            $('#button0').click(function () {
                $('#dialog0').dialog('open')  //open（）打開 對話框
            })

        })
    </script>

9.2 方法

ar isOpen=$('#dialog0').dialog('isOpen');    //對話框是否已經打開？
$('#dialog0').dialog('open');  　　　　　　   //open（）打開 對話框
$(this).dialog('close')           　　　　   //close() 關閉對話框

9.3 事件

9.4 界面

10.日曆部件 Datepicker widget

下載：https://www.helloweba.net/down/169.html

日曆部件能夠統一用戶提交時間數據的格式，方便用戶輸入；

10.0 初探

$('[name="current_date"]').datepicker();             //年月日

$('[name="current_date"]').datetimepicker();         //年月日時分秒

10.1 配置

 <script>
        $(function () {
            $('[name="current_date"]').datepicker({
                //defaultDate:new Date('1993/6/28') //設置默認時間 | 默認 當前時間
                //defaultDate:'+1d+1m'              //作日期延期
                //changeMonth:true,                 //容許編輯月
                changeYear:true,                    //容許編輯年
                dateFormat:"yy年mm月dd日",           //設置日期格式 |@時間戳
                //maxDate:new Date('2019/5/18'),    //設置最大日期
                //minDate:new Date('2015/5/18'),    //設置最小日期
                showOtherMonths:true,               //顯示當前月以後的日期
                selectOtherMonths:true,             //選擇當前月以後的日期
                yearRange:'c-1:c+1',                //選擇範圍限制 前1年 後1年
                hideIfNoPrevNext:true,              //超出日期範圍 按鈕隱藏
                
            });
        })
    </script>

jQueryUI的datapicker不能選擇時、分、秒，若需求可選擇jquery-ui-timepicker-addon.js，詳情：https://www.helloweba.net/javascript/169.html

11.自動完成插件

11.0:輸入多個值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>

    <style>
        .bs-glyphicons-list1 {
            padding-left: 0;
            list-style: none;
        }

        .bs-glyphicons-list1 li {
            display: inline-block;
            width: 215px;
            height: 215px;
            padding: 10px;
            font-size: 15px;
            text-align: center;
            line-height: 115px;
            background-color: #f9f9f9;
            border: 1px solid #fff;

        }

        .bs-glyphicons-list1 li:hover {
            display: inline-block;
            width: 215px;
            height: 215px;
            padding: 10px;
            font-size: 15px;
            text-align: center;
            line-height: 115px;
            background-color: #563d7c;
            border: 1px solid #fff;

        }


    </style>
    <script>
        $(function () {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];

            function split(val) {
                return val.split(/,\s*/);
            }

            function extractLast(term) {
                return split(term).pop();
            }

            $('#tags').autocomplete({
                appendTo: "#wocao",
                source: availableTags
            });

            $("#tags")
            // 當選擇一個條目時不離開文本域
                .bind("keydown", function (event) {
                    if (event.keyCode === $.ui.keyCode.TAB &&
                        $(this).data("ui-autocomplete").menu.active) {
                        event.preventDefault();
                    }
                })
                .autocomplete({
                    minLength: 0,
                    source: function (request, response) {
                        // 回到 autocomplete，可是提取最後的條目
                        response($.ui.autocomplete.filter(
                            availableTags, extractLast(request.term)));
                    },
                    focus: function () {
                        // 防止在得到焦點時插入值
                        return false;
                    },
                    select: function (event, ui) {
                        var terms = split(this.value);
                        // 移除當前輸入
                        terms.pop();
                        // 添加被選項
                        terms.push(ui.item.value);
                        // 添加佔位符，在結尾添加逗號+空格
                        terms.push("");
                        this.value = terms.join(", ");
                        return false;
                    }
                });
        });

    </script>
</head>
<body>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">添加用戶查詢</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="ui-widget">
                        <label for="tags">編程語言：</label>
                        <input id="tags" size="50">
                    </div>
                    <div id="wocao"></div>
                    <div class="form-group">
                        <label for="sql">sql</label>
                        <textarea class="form-control" id="sql" name="sqls" rows="16" style="min-width: 90%"></textarea>
                    </div>
                    {#                  <button type="submit" class="btn btn-default">提交</button>#}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">肯定</button>
            </div>
        </div>
    </div>
</div>

<div style="border:solid 10px">
    <a href="{% url 'instance_pool' %}?type_id={{ type_id }}" class="btn btn-info btn-sm">返回</a>
    <h1 style="text-align: center">{{ database_type }}功能列表</h1>
    <ul class="bs-glyphicons-list1">
        <li data-toggle="modal" data-target="#myModal">
            <span class="glyphicon glyphicon-plus" aria-hidden="true" style="font-size: 55px"></span>
            <span class="glyphicon-class">增長查詢功能</span>
        </li>
        <li id="reboot_redis">
            <span class="glyphicon glyphicon-refresh" aria-hidden="true" style="font-size: 55px"></span>
            <span>重啓</span>
        </li>
        {% block function %}


        {% endblock %}

    </ul>
</div>
</body>

<script>


</script>

</html>

前端

11.1:遠程+多個值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>

    <style>
        .bs-glyphicons-list1 {
            padding-left: 0;
            list-style: none;
        }

        .bs-glyphicons-list1 li {
            display: inline-block;
            width: 215px;
            height: 215px;
            padding: 10px;
            font-size: 15px;
            text-align: center;
            line-height: 115px;
            background-color: #f9f9f9;
            border: 1px solid #fff;

        }

        .bs-glyphicons-list1 li:hover {
            display: inline-block;
            width: 215px;
            height: 215px;
            padding: 10px;
            font-size: 15px;
            text-align: center;
            line-height: 115px;
            background-color: #563d7c;
            border: 1px solid #fff;

        }


    </style>
    <script>
        $(function () {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];

            function split(val) {
                return val.split(/,\s*/);
            }

            function extractLast(term) {
                return split(term).pop();
            }

            $('#tags').autocomplete({
                appendTo: "#wocao",
                source: availableTags
            });

            $("#tags") // 當選擇一個條目時不離開文本域
                .bind("keydown", function (event) {
                    if (event.keyCode === $.ui.keyCode.TAB &&
                        $(this).data("ui-autocomplete").menu.active) {
                        event.preventDefault();
                    }
                })
                .autocomplete({
                    source: function (request, response) {
                        $.getJSON("{% url 'get_user'%}", {
                            term: extractLast(request.term)
                        }, response);
                    },
                    search: function () {
                        // 自定義最小長度
                        var term = extractLast(this.value);
                        if (term.length < 2) {
                            return false;
                        }
                    },
                    focus: function () {
                        // 防止在得到焦點時插入值
                        return false;
                    },
                    select: function (event, ui) {
                        var terms = split(this.value);
                        // 移除當前輸入
                        terms.pop();
                        // 添加被選項
                        terms.push(ui.item.value);
                        // 添加佔位符，在結尾添加逗號+空格
                        terms.push("");
                        this.value = terms.join(", ");
                        return false;
                    }
                });

        });

    </script>
</head>
<body>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">添加用戶查詢</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="ui-widget">
                        <label for="tags">編程語言：</label>
                        <input id="tags" size="50">
                    </div>
                    <div id="wocao"></div>
                    <div class="form-group">
                        <label for="sql">sql</label>
                        <textarea class="form-control" id="sql" name="sqls" rows="16" style="min-width: 90%"></textarea>
                    </div>
                    {#                  <button type="submit" class="btn btn-default">提交</button>#}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">肯定</button>
            </div>
        </div>
    </div>
</div>

<div style="border:solid 10px">
    <a href="{% url 'instance_pool' %}?type_id={{ type_id }}" class="btn btn-info btn-sm">返回</a>
    <h1 style="text-align: center">{{ database_type }}功能列表</h1>
    <ul class="bs-glyphicons-list1">
        <li data-toggle="modal" data-target="#myModal">
            <span class="glyphicon glyphicon-plus" aria-hidden="true" style="font-size: 55px"></span>
            <span class="glyphicon-class">增長查詢功能</span>
        </li>
        <li id="reboot_redis">
            <span class="glyphicon glyphicon-refresh" aria-hidden="true" style="font-size: 55px"></span>
            <span>重啓</span>
        </li>
        {% block function %}


        {% endblock %}

    </ul>
</div>
</body>

<script>


</script>

</html>

前端

def get_users(request):
    username=request.session.get('username')
    seach=request.GET.get('term')
    user_obj=cmdb_models.UserInfo.objects.filter(username__icontains=seach).first()
    if user_obj:
        username=user_obj.username
    return HttpResponse(json.dumps({"term":username}))

views

擴展

jQuery-UI的CSS框架

http://www.css88.com/jquery-ui-api/theming/css-framework/

jQuery-UI的圖標

http://www.css88.com/jquery-ui-api/theming/icons/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。