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

部分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. wex5 教程之 图文讲解 文件上传attachmentSimple（1）

    视频教程地址:http://v.youku.com/v_show/id_XMTc4NDAyMTY4OA==.html 效果预览: 1 调用attchmentSimple组件,打开文件管理器,并选中,显 ...

  2. 查看oracle被锁的表

    SELECT /*+ rule*/ a.sid, b.owner, object_name, object_type FROM v$lock a, all_objects b WHERE TYPE = ...

  3. 读取NfcA格式数据

    如何读取数据? Tag tagFromIntent = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG); NfcA nfcA = NfcA.get(ta ...

  4. Sublime Text怎么在切分两行视口内显示同一个文件

    原文链接:http://devlog.en.alt-area.org/?p=1098 How to split one file into two views in Sublime Text2 You ...

  5. 弹窗的封装（css,js） 和弹窗的例子

    //每个弹窗的标识 var x =0; var idzt = new Array(); var Window = function(config){ //ID不重复 idzt[x] = "z ...

  6. Web Performance Test : IP切换/IP欺骗

    译者前言 本文翻译自<Visual Studio Performance Testing Quick Reference Guide 3.6> 有关于IP Switching的章节.< ...

  7. Training

    Purley Skylake RAS training: https://cisco.webex.com/ciscosales/lsr.php?RCID=8042a15a27aa46509a91d8f ...

  8. 删除DSO Change Log表数据

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. 【Android】解析Json数据

    Json数据:"{\"UserID\":\"Allen\",\"Dep\":IT,\"QQ\":\" ...

  10. 转：画图解释 SQL join 语句

    画图解释 SQL join 语句 我认为 Ligaya Turmelle 的关于SQL联合(join)语句的帖子对于新手开发者来说是份很好的材料.SQL 联合语句好像是基于集合的,用韦恩图来解释咋一看 ...