jQueryUI

前言

作为一个的后端开发人员，把前端技术做到很好这显然是矛盾的，如果所处团队没有前端人员，使用UI框架到也不失为一个不错的选择，UI框架有很多例如bootstrap、easyUI....本文主要介绍jQueryUI；

概述

Query UI 是建立在JavaScript、 jQuery之上的UI库，主要包含：交互组件、部件、高级效果....

下载：https://jqueryui.com/download/

官网： https://jqueryui.com/

文档： http://www.css88.com/jquery-ui-api/、其他

一、交互组件

交互组件主要是一些以鼠标为核心的用户操作，比如：拖动、放置、拆分、排序、跳转元素大小....；

1. Draggable组件

顾名思义Draggable组件可以帮助我们随意鼠标拖动网页中的标签；

1.0 初探

$('#zhanggen').draggable() //随意拖动；

1.1 常见配置

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

大丈夫相框

5、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

二、部件

部件是指对页面的功能扩展，比如按钮、菜单、日期采集、对话框....

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显示得位置
  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,            //自动打开对话框
                //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- 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- 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/