jQuery

jQuery UI

认识 jQuery UI

1、jQuery UI:

是以 jQuery 为基础的 JavaScript 网页用户界面的开源库。包含底层用户交互、动画、特性和可更换的可视控件。我们可以直接用它来构建具有很好交互性的 web 应用程序。

包含了许多维持状态的小部件 (Widget)，因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件使用相同的模式，所以，只要你学会使用其中一个，您就知道如何使用其他的小部件。

2、浏览器

IE 6.0+，Firefox 3+，Safari 3.1+，Opera 9.6+ 和 Google Chrome

3、jQuery UI 主要分为 3 个部分: 交互、小部件和效果库。

交互: 交互部件是一些与鼠标交互相关的内容，包括 Draggable，Droppable，Resizable，Selectable 和 Sortable等。

小部件: 主要是一些界面的扩展，包括 AutoComplete，ColorPicker，Dialog，Slider，Tabs，ProgressBar，Spinner等

效果: 用于提供丰富的动画效果，包括: Add Class、Color Animation、Toggle等

参考:https://jqueryui.com

jQuery UI Interactions

Draggable，Droppable，Resizable，selectable，sortable

实例:

<script src="../../JS/jquery-3.3.1.min.js"></script>
<script src="../../JS/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../CSS/jquery-ui.min.css"/>
<script>
$(document).ready(function () {
    $("#ui_btn1").button();
    $("#drag_id").draggable().resizable();
    $("#drop_id").droppable();/*设置可被放置*/

    /*放下后触发的动作*/
    $("#drop_id").on("drop",function (event,ui) {
        $("#drop_id").text("drop事件");
        alert("hello");
    });


    $("#question").selectable();
    $("#sort").sortable();
    $("#ui_btn1").on("click",function () {
        if($("#correct").hasClass("ui-selected")){
            alert("Congratulation");
        }else{
            alert("you are wrong!");
        }
    });
});
</script>
<style>
    .ui-selected{background-color: #029899;}
</style>

12*12=？
<ul id="question">
   <li>A. 114</li>
   <li id="correct">B. 124</li>
   <li>C. 144</li>
</ul>
<button id="ui_btn1">提交</button><br/>
按从小到大排序
<ul id="sort">
    <li>3222</li>
    <li>9882</li>
    <li>3232</li>
</ul>
<div id="drag_id" style="width:100px;height:100px;background-color:#49fcff;">我能被拖动和改变大小</div>
<div id="drop_id" style="width:200px;height:200px;background-color:#f5ff75;">把蓝框拉进我这里来</div>

12*12=？

A. 114
B. 124
C. 144

按从小到大排序

3222
9882
3232

我能被拖动和改变大小

把蓝框拉进我这里来

jQuery UI widgets

Accordion，Autocomplete，Button，Datepicker，Dialog，progressbar，Menu({position})，slider，spinner，tabs

 <script>
    $(document).ready(function () {
        /*Accordion--手风琴效果*/
        $("#acDiv").accordion();

        /*Autocomplete--自动补全*/
        var autoSource = ["html","jQuery","CSS","Java","AJAX"];
        $("#auCom").autocomplete({source:autoSource});

        /*Datepicker--选择日期*/
        $("#pickDate").datepicker();

        /*Dialog 弹出对话框*/
        $("#diaBtn").button().on("click",function () {
            $("#diaDiv").dialog();
        });

        /*Progressbar--进度条*/
        pb = $("#pbDiv");
        pb.progressbar({max:100});//设置进度条最大值为100
        setInterval(changepb,100);//每100毫秒执行
        var current = 0;
        function changepb() {
            current++;
            if(current>=100){
                current=0;
            }
            pb.progressbar("option","value",current);
        }

        /*Menu--菜单*/
        $("#uiMenu").menu({position:{at:"left bottom"}});

       /*Slider--可调节进度条*/
        slider=$("#sl");
        slider.slider({
            slide:function(event,ui) {//slide: 边拉动边改变数据。change: 拉动停止改变数据
                $("#span").text(slider.slider("option","value"));
            }
        });

        /*spinner--数量的 + -*/
        $("#uInput").spinner();
        $("#uInput").spinner("value","10");//设置默认的值为10
        $("#getSpinner").on("click",function () {
            alert("选择的数量: "+$("#uInput").spinner("value"));
        });

        /*tab*/
        $("#tab").tabs();

    });
</script>
<style>
    /*菜单css*/
   #uiMenu{height:23px;}
   #uiMenu a{display:block;width:100px;}

    #uiMenu .ui-menu:after{
        content:".";
        display:block;
        clear:both;
        visibility: hidden;
        line-height: 0;
        height:0;
    }
    #uiMenu>.ui-menu-item{
        display:inline-block;
        float:left;
        margin:0;
        padding:0px;
        width:auto;
    }
</style>
<div id="acDiv" style="width:300px;">
    <h4>ONE</h4>
    <div><p>圣诞节疯狂的森林精灵适当放宽死了善良的老师的看法市劳动局</p></div>
    <h4>TWO</h4>
    <div><p>的死的森林精灵适当放宽死了善良的老师的看法市劳动局</p></div>
    <h4>THREE</h4>
    <div><p>节疯狂的森林精灵适当放宽死了善良的老师的看法市劳动局</p></div>
</div>
<hr/>
<label for="auCom">autoComplete:</label>
<input id="auCom" type="text" placeholder="input j to see"/>
<hr/>
<label for="pickDate">Date:</label>
<input id="pickDate" type="text"/>
<hr/>
<div id="diaDiv">
    <p>我是一个对话框</p>
</div>
<a id="diaBtn">对话框</a>
<hr/>
<div id="pbDiv" style="width:300px;"></div>
<hr/>
<ul id="uiMenu">
    <li>
        <a>Chacter 1</a>
        <ul>
            <li><a>one</a></li>
            <li><a>two</a></li>
            <li><a>three</a></li>
        </ul>
    </li>
    <li>
        <a>Chacter 1</a>
        <ul>
            <li><a>one</a></li>
            <li><a>two</a></li>
            <li><a>three</a></li>
        </ul>
    </li>
</ul>
<hr/>
<span id="span">0</span>
<div id="sl"></div>
<hr/>
<input id="uInput"/>
<button id="getSpinner">getValue</button>
<hr/>
<div id="tab">
    <ul>
        <li><a href="#tab1">ONE</a></li>
        <li><a href="#tab2">TWO</a></li>
        <li><a href="#tab3">THREE</a></li>
    </ul>
    <div id="tab1">
        nosdfdsfdsfsdfdsfdfdfsd
    </div>
    <div id="tab2">
        sldfjsfjsdlfjsldjfdsljkds
    </div>
    <div id="tab3">
        sldfsdfadfar223131ssdf11ds
    </div>
</div>

效果图

Accordion

ONE

圣诞节疯狂的森林精灵适当放宽死了善良的老师的看法市劳动局

TWO

的死的森林精灵适当放宽死了善良的老师的看法市劳动局

THREE

节疯狂的森林精灵适当放宽死了善良的老师的看法市劳动局

Autocomplete

autoComplete:

Datapicker

Date:

Dialog

我是一个对话框

对话框

Progressbar

Slider

Spinner

nosdfdsfdsfsdfdsfdfdfsd

sldfjsfjsdlfjsldjfdsljkds

sldfsdfadfar223131ssdf11ds