jQuery UI基础学习笔记

最新推荐文章于 2022-08-01 16:53:34 发布

月迷津渡丶

最新推荐文章于 2022-08-01 16:53:34 发布

阅读量815

点赞数 1

分类专栏： Web 文章标签： jQuery UI

本文链接：https://blog.csdn.net/oYueMiJinDu/article/details/43834435

版权

Web 专栏收录该内容

145 篇文章 0 订阅

订阅专栏

1.jQuery UI下载与使用

在jQuery里有第一部分

1.jQuery UI介绍

认识jQuery UI
1.jQuery UI:
是以jQuery为基础的JavaScript网页用户界面的开源库.包括底层用户交互,动画,特效和可变换主题的可视控件.我们可以直接用它来构建具有很好交互性的web应用程序.
2.jQuery UI:
包括了许多维持状态的小部件(Widget),因此,它与典型的jQuery插件使用模式略有不同.所有的jQuery UI小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget).
3.jQuery UI:
IE 6.0+,Firefox 3+,Safari 3.1+,Opera 9.6+,Google Chrome.
4.jQuery UI主要分为3个部分:交互,小部件和特效库
a):交互
交互部分是一些与鼠标交互相关的内容,包括Draggable,Droppable,
Resizable,Selectable和Sortable等
b):小部件
主要是一些界面的扩展,包括AutoComplete,ColorPicker,Dialog,
Slider,Tabs,ProgressBar,Spinner等
c):效果
用于提供丰富的动画效果,包括:Add Class,Color Animation,Toggle等

2.下载jQuery UI

1.http://jqueryui.com
2.主题预览:http://jqueryui.com/themeroller/
3.api:http://api.jqueryui.com
4.自定义配置:http://jqueryui.com/download/

3.使用jQuery UI

    <script src="../../jquery-2.1.3.min.js"></script>
    <script src="../../jquery-ui.min.js"></script>
    <script src="js.js"></script>
    <link type="text/css" href="../../jquery-ui.min.css" rel="stylesheet">

<a href="http://www.baidu.com" id="a_btn">百度</a>
<button>百度</button>
<input type="text">

js.js:

$(document).ready(function () {
    $("#a_btn").button();
    $("input").datepicker();
});

2.jQuery UI Interactions

1.draggable

<div style="width: 100px;height: 100px;border: 2px solid red;" id="div"></div>

$(document).ready(function () {
    $("#div").draggable();//变成可拖动的
});

2.droppable

<div style="width: 100px;height: 100px;border: 2px solid blue;" id="Rect1"></div>
<div style="width: 200px;height: 200px;border: 2px solid #ffff00;" id="Rect2"></div>

$(document).ready(function () {
    $("#Rect1").draggable();//拖动
    $("#Rect2").droppable();//放置

    $("#Rect2").on("drop",      //drop事件需要droppable()
        function (event, ui) {//event事件type,ui表示触发的事件对象
            $("#Rect2").text("drop事件");
        });
});

3.resizeable

<div style="width: 100px;height: 100px;border: 2px solid blue;" id="div"></div>

$(document).ready(function () {
    $("#div").resizable();//尺寸,可放大/缩小
});

4.selectable

<strong>世界上最美丽的人是?</strong>
<ul id="selector">
    <li id="right">A.mm</li><!--正确答案-->
    <li>B.U</li>
    <li>C.me</li>
</ul>
<a href="#" id="btn">提交</a>

css:

<style>
        .ui-selected{
            background-color: #ffff00;
        }
    </style>

$(document).ready(function () {
    $("#btn").button();
    $("#selector").selectable();//选择时添加class:  ui-selected
    $("#btn").on("click", function () {
       if($("#right").hasClass("ui-selected")){
           alert("答对了!");
       }
    });
});

5.sortable

<ul id="sortable">
    <li>苹果</li>
    <li>梨子</li>
    <li>香蕉</li>
    <li>桃子</li>
</ul>

$(document).ready(function () {
    $("#sortable").sortable();//选项可拖动->换位置
});

3.jQuery UI Widgets

1.Accordion

<div id="accordion">
        <h3>选项1</h3>
        <div>
            <p>
                hello
            </p>
        </div>
        <h3>选项2</h3>
        <div>
            <p>
                world
            </p>
        </div>
        <h3>选项3</h3>
        <div>
            <p>
                hehe
            </p>
        </div>
        <h3>选项4</h3>
        <div>
            <p>
                haha
            </p>
        </div>
    </div>

$(document).ready(function () {
    $("#accordion").accordion();//类似手风琴,展开选项
});

2.AutoComplete

<label for="tags">Tags:</label>
<input id="Tags">

$(document).ready(function(){
    var autotags=["hello","world","mm","css","html","android","mi","moia","mm"];
    $("#Tags").autocomplete({//自动补全,类似百度搜索
        source:autotags
    });
});

3.Datepicker

<p>Date:
    <input type="text" id="datepicker">
</p>

$(document).ready(function () {
    $("#datepicker").datepicker();
});

4.Dialog

<div id="div">
    <p>这是一个Dialog对话框</p>
</div>
<a id="btn" href="#">按钮</a>

$(document).ready(function(){
    $("#btn").button().on("click", function () {
        $("#div").dialog();
    });
});

5.progressbar

<div id="pb"></div>

var pb;
var current = 0;

$(document).ready(function () {
  /*  $("#pb").progressbar(//进度条
        {value:50}//固定值
    );*/
    pb = $("#pb");
    pb.progressbar({max:100})//进度条满的值,默认100
    setInterval(changepb,100);//计时器,每100ms刷新一次
});

function changepb(){
    current++;
    if(current>=100){
        current = 0;
    }
    pb.progressbar(
//        {value:current}//都行
        "option","value",current
    );
}

6.menu

 <style>
       /* #menu{
            width: 150px;
        }*/

       /* 横向排列(jQuery UI没提供横向的)*/
        .ui-menu:after{
            content:".";
            display: block;
            clear: both;
            visibility:hidden;
            line-height: 0;
            height: 0;
        }
        .ui-menu .ui-menu-item{
            display: inline-block;
            float: left;
            margin: 0;
            padding: 10;
            width: auto;
        }
    </style>
<ul id="menu">
    <li>
        <a href="#">JAVA</a>
        <ul>
            <li><a href="#">JAVA EE</a> </li>
            <li><a href="#">JAVA SE</a> </li>
            <li><a href="#">JAVA ME</a> </li>
        </ul>
    </li>
    <li>C</li>
    <li>C++</li>
    <li>php</li>
</ul>

$(document).ready(function () {
    $("#menu").menu(//菜单
        {position:{at:"left bottom"}}//左下
 //       {position:{at:"right top"}}//右上(默认)
    );
});

7.slider

<div id="slider"></div>
<span id="span">0</span>

var valueSpan,slider;
$(document).ready(function () {
  /*  $("#slider").slider();//可拖动的进度条*/
    slider = $("#slider");
    valueSpan = $("#span");

    slider.slider({
       /*change: function (event,ui) {//change事件(移动结束后执行)
           valueSpan.text(slider.slider("option","value"));
       }*/
        slide: function (event,ui) {//拖动时就调用
            valueSpan.text(slider.slider("option","value"));
        }
    });
});

8.spinner

<input id="input">
<button id="btn">获取数据</button>

$(document).ready(function () {
    $("#input").spinner();//带有上下箭头的输入数字的输入框
    $("#input").spinner("value",10);//默认为10
    $("#btn").button().on("click", function () {
       alert($("#input").spinner("value"));
    });
});

9.table

<div id="table">
    <ul>
        <li><a href="#hello1">hello</a></li>
        <li><a href="#hello2">hello</a></li>
        <li><a href="#hello3">hello</a></li>
    </ul>
    <div id="hello1">
        hello1
        hello
        hello
        hello
        hello
    </div>
    <div id="hello2">
        hello2
        hello
        hello
        hello
        hello
    </div>
    <div id="hello3">
        hello3
        hello
        hello
        hello
        hello
    </div>
</div>

$(document).ready(function () {
    $("#table").tabs();//table
});

4.jQuery UI Effects

1.addClass

 <style>
        div{
            width: 100px;
            height: 100px;
            background-color: gray;
        }

        .changediv{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
<div></div>

/*
addClass
    http://api.jqueryui.com/addClass/
        .addClass( className [, duration ]           [, easing ]        [, complete ] )
                  名称        执行时间(默认400ms)                     回调函数(执行完触发)
                  easing:动画特效,默认swing ;  http://jqueryui.com/easing/  */
$(document).ready(function () {
    $("div").on("click", function () {
       $(this).addClass("changediv",1000,"easeInCirc", function () {//1秒事件把class变了
 //          alert("完成");
       })
    });
});

2.Blind

<style>
        #toggle{
            width: 100px;
            height: 100px;
            background-color: gray;
        }

    </style>
</head>
<body>
<div id="toggle"></div>

$(document).click(function () {//给文档添加事件
    //   $("#toggle").toggle("blind");//百叶窗,默认向上
    $("#toggle").toggle("blind", {direction: "down"});//向下(消失)
    //  up, down, left, right, vertical, horizontal.
});

3.Color Animation

 <style>
        #elem{
            border: 4px solid red;
            color: blue;
            background-color: #ffff00;
            font-size: 25px;
            padding: 1mm;
            text-align: center;
        }
    </style>

<div id="elem">color animations</div>
<button id="toggle">按钮</button>

$(document).ready(function () {
    $("#toggle").button().click(function () {
        $("#elem").animate({//功能和addClass很像
            color:"green",
            backgroundColor:"pink",
            borderColor:"gray",
            width:"200px",
            height:"200px"
        });
    });
});

4.hide

 <style>
        div{
            width: 100px;
            height: 100px;
            background: #ffff00;
            border: 1px solid red;
        }
    </style>

    <button>隐藏div</button>
    <div></div>

/*
.hide( effect [, options ] [, duration ] [, complete ] )
       特效      属性        执行时间      回调函数*/
$(document).ready(function () {
    $("button").button().click(function () {
        $("div").hide("drop",{direction:"left"},2000);//2s,向左消失
    });
});

5.removeClass

 <style>
        div{
            width: 100px;
            height: 100px;
            background-color: gray;
        }

        .changediv{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

<div class="changediv"></div>

$(document).ready(function () {
    $("div").on("click",function(){//和addClass相对应
       $(this).removeClass("changediv",1000,"easeInCirc");
    });
});

6.show

 <style>
        div{
            display: none;/*隐藏*/
            width: 100px;
            height: 100px;
            background-color: gray;
        }
    </style>
</head>
<body>
<button>show div</button>
<div></div>

$(document).ready(function () {
    $("button").button().click(function () {
 //       $("div").show();//直接显示,和hide用法一样
        $("div").show("drop",{direction:"right"},1000);//右向左,默认左向右
    });
});

7.toggleClass

 <style>
        div{
            width: 100px;
            height: 100px;
            background-color: gray;
        }

        .changediv{
            width: 200px;
            height: 200px;
        }
    </style>

<div></div>

/*.toggleClass( className              [, switch ]          [, duration ] [, easing ] [, complete ] )
              定义好的class名称      选择(默认显示/隐藏)   时间           效果          回调*/
$(document).ready(function(){
    $("div").click(function () {//toggleClass:addClass+removeClass
 //       $(this).toggleClass("changediv",1000,"easeOutSine");
//        $(this).toggleClass("changediv",true,1000,"easeOutSine");//点击addClass,再点击不会removeClass
        $(this).toggleClass("changediv",false,1000,"easeOutSine");//点击没效果,只在已经添加了class时有效,执行removeClass
    });
});

本页所有源码: http://download.csdn.net/detail/oyuemijindu/8447873