总结：总的来说，这些控件可以在官网找到列子，

部分ui效果不如意的，可根据jQueryUI上添加的类选择器等，进行再加工

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="../jquery-2.2.4.min.js"></script>

    <script src="jquery-ui.min.js"></script>

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

    <script>

        var current = 0;

        var max = 100;

        function changePro() {

            current++;

            if (current > max) {

                current = 0;

            }

            $('#pro').progressbar('option', 'value', current);

        }

        $(function () {

            //列表Section控件

            $('#acc').accordion({

                collapsible: true

            });

            //自动补全控件

            var autoArray = ['herry', 'right', 'i love you', 'hehe'];

            $('#auto').autocomplete({

                source: autoArray,

            })

            //日期控件

            $('#date').datepicker();

            //对话框控件

            $('#btn1').button().on('click', function () {

                $('#dio').dialog();

            })

            //进度条

            $('#pro').progressbar({max: 100});

            updatePro();

            //菜单

            $('#menu').menu( {

                role: null,

                position: { at: "left bottom" }

            });

            //滑动进度条

            $('#slider').slider({

                slide:function (event,ui) {

                    $('#show_value').text(ui.value);

                }

            });

            //列表标签切换

            $('#tabs').tabs();

        })

        function updatePro() {

            setInterval(changePro, 100);

        }

    </script>

    <style>

        /*Chome查看源码后,CSS再加工*/

        .ui-menu {

            width: 217.3px;

        }

        .ui-menu:after{

            content: '';

            display: block;

            overflow: hidden;

            clear: both;

        }

        .ui-menu-item{

            display: inline-block;

            float: left;

            width: 50px;

            padding: 5px 10px;

            margin: 0;

            text-align: center;

        }

        .ui-front{

            width: 100px;

        }

        .ui-icon{

            width: 0;

            height: 0;

        }

    </style>

</head>

<body>

<div id="acc">

    <h1>标题1</h1>

    <div>

        <p>傲娇攻骄傲公积金垃圾哦我日记噢 哈多喝点大哥大哥更让人哥哥了个个人也好久

        </p>

    </div>

    <h1>标题2</h1>

    <div>

        <p>傲娇攻骄傲公积金垃圾哦我日记噢 哈多喝点大哥大哥更让人哥哥了个个人也好久

        </p>

    </div>

    <h1>标题3</h1>

    <div>

        <p>傲娇攻骄傲公积金垃圾哦我日记噢 哈多喝点大哥大哥更让人哥哥了个个人也好久

        </p>

    </div>

    <h1>标题4</h1>

    <div>

        <p>傲娇攻骄傲公积金垃圾哦我日记噢 哈多喝点大哥大哥更让人哥哥了个个人也好久

        </p>

    </div>

</div>

<br/>

<!--输入自动补全,或输入自动查找-->

<label for="auto">自动补全输入:</label>

<input type="text" id="auto">

<br/>

<!--日期控件-->

<label for="date">输入日期:</label>

<input type="text" id="date">

<br/>

<!--对话框-->

<div id="dio" style="display: none">

    <p>这是对话框</p>

</div>

<br/>

<a id="btn1">弹出对话框</a>

<br/>

<br/>

<!--进度条-->

<div id="pro"></div>

<br/>

<!--菜单-->

<ul id="menu">

    <li><a href="#">People</a>

        <ul>

            <li>工人</li>

            <li>农民</li>

            <li>医生</li>

            <li>军人</li>

        </ul>

    </li>

    <li><a href="#"> People</a>

        <ul>

            <li>工人</li>

            <li>农民</li>

            <li>医生</li>

            <li>军人</li>

        </ul>

    </li>

    <li><a href="#">People</a>

        <ul>

            <li>工人</li>

            <li>农民</li>

            <li>医生</li>

            <li>军人</li>

        </ul>

    </li>

</ul>

<br/>

<br/>

<span id="show_value">0</span>

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

<br/>

<br/>

<div id="tabs">

    <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">案件管理及爱国家案经过两个</div>

    <div id="hello2">;观看开关 山沟沟</div>

    <div id="hello3">晴天气突破期投票</div>

</div>

<br/>

<br/>

<br/>

<br/><br/>

<br/>

<br/>

<br/><br/>

<br/>

<br/>

<br/><br/>

<br/>

<br/>

<br/>

</body>

</html>

　　

jQueryUI 之控件们的更多相关文章

  1. mvc4中jquery-ui日期控件datepicker的应用

    mvc4中jquery-ui日期控件datepicker的应用 本文适合mvc中日期选择需要的同学: 假设读者已经具备了mvc4和javascript中的相关知识 一. 开始项目之前把项目中目录:/C ...

  2. jQueryUI 日期控件

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Inse ...

  3. datetimepicker[jquery-ui]时间控件的三种初始化方法

    1.只显示年月日 $( ".datepicker").datepicker({ needDay:true, changeMonth: true, //显示月份 changeYear ...

  4. fullcalendar日历控件知识点集合

    1.基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码.当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性.方 ...

  5. fullcalendar日历控件集合知识

    1.基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码.当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性.方 ...

  6. SSH+DWZ、JQuery-UI ，swfobject.embedSWF属性与用法，IE下日期控件被flash控件挡住

    ---恢复内容开始--- 最近在做SSH+DWZ(JQuery-UI)项目,在用到图表问题的时候,出现在IE下面,日期控件被flash被挡住而不能选取日期情况,经在网络搜查,现在解决办法如下: 1.首 ...

  7. 一不小心写了个bootstrap风格下拉控件 JqueryUI + bootstrap

    受够了EasyUI的封闭,Bootstrap虽然华丽但是功能太渣,闲着无聊写个下拉控件玩玩吧,不喜勿喷哈... 第一步:先设计下我的下拉控件的样子 1.既然是bootstrap风格的,我想应该是这样的 ...

  8. 如何使用jqueryUi的datepicker日历控件？

    参考: http://www.jb51.net/article/85007.htm 这里的日历控件是, 基于jquery的jqureyui中的一个 widget. 需要js 文件: 外部的js文件, ...

  9. 【日期控件】JQueryUI的datepicker日期控件

    在输入日期的时候我们经常需要日期控件,jQueryUI的datapicker就是一个很好的日期控件. 1.简单的datepicker控件 目录结构:(要将images图片放到css目录下面)

随机推荐

  1. 创建空列表遇到的问题-RF

    正确的方法:使用Create List,后面为空即可

  2. transient关键字

    transient关键字的英文意思是:瞬态,由此可见是瞬间的,不可固定的. 会不会与对象的状态等等有关系呢? 网上找了一下资料是跟对象的序列化有关. transient的作用 一个对象只要实现了Ser ...

  3. lua table 排序--满足多条件排序

    前提 假设 一个小怪 有三种属性,等级(level).品质(quality).id(pid) 我们需要对他们进行排序,两种排序情况,第一是单一属性排序,比如按照等级进行排序,或者多种属性进行优先级排序 ...

  4. ASP。net treeview xml

    this.TreeView2.ShowLines = false; //显示连接子节点与父节点之间的线条 TreeNodeBinding area = new TreeNodeBinding(); a ...

  5. ssh 免密码登录

    1.在本机下生成公钥/私钥对. ssh-keygen -t rsa -P '' -P表示密码,-P '' 就表示空密码,也可以不用-P参数,这样就要三车回车,用-P就一次回车.它在/home/yaoy ...

  6. Android EditText 密码框默认是小圆点 怎么改成其它的（*）？

    text.setTransformationMethod(new AsteriskPasswordTransformationMethod()); public class AsteriskPassw ...

  7. asp.net 微信支付 错误解决方案

    asp.net 微信支付 错误解决方案 在网上看到有人解决方案为: 解决方法 出现这种错误网上查出现有的原因是: 订阅号没有相关的权限 账号没有认证,没有相关的权限 那么这里遇到问题两种都不是.开发账 ...

  8. R实战之热点图（HeatMap)

    快速实现是搜索帮助文档的首要目的,所以此处涉及实战的文章一概略去传统帮助文档的理论部分,直接上代码加注释! 本文将介绍R语言下利用ggplot2包制作heatmap的代码 -------------- ...

  9. [poj3017] Cut the Sequence (DP + 单调队列优化 + 平衡树优化)

    DP + 单调队列优化 + 平衡树 好题 Description Given an integer sequence { an } of length N, you are to cut the se ...

  10. 动态创建的DOM元素进行事件绑定

    http://files.cnblogs.com/files/xsmhero/jquery.livequery.js <script type="text/javascript&quo ...