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

部分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. Scala-Trait:混入与多态

    Scala 的 Trait 结合了抽象类与接口的能力,通过混入来获得灵活的多态能力. 代码如下所示: FileAbility 提供了读取文件.处理文件的能力, 其中继承一个空实现的 Trait:Lin ...

  2. iOS中Block的基础用法

    本文简介 本章不会对Block做过多的实现研究.只是讲解基本的用法.纯粹基础知识.结合实际项目怎么去做举例.Block使用场景,可以在两个界面的传值,也可以对代码封装作为参数的传递等.用过GCD就知道 ...

  3. 初识Python第三天（一）

    一.set集合 set是一个无序且不重复的元素集合 print(dir(set)) #['__and__', '__class__', '__contains__', '__delattr__', ' ...

  4. 初识Python第二天（1）

    在Python中,一切事物都是对象,对象是基于类创建的,对象继承了类的属性,方法等. 一.传递参数 1.1新建python文件,名为twoday_args.py,输出以下代码 import sys p ...

  5. JS闭包导致循环给按钮添加事件时总是执行最后一个

    加入如下脚本代码: <script> var list_obj = document.getElementsByTagName('li'); for (var i = 0; i <= ...

  6. Entity Framework 第八篇 结构优化

    在之前的文章里,业务层直接调用一个包装的仓储类入口,忽略了DAL层,在业务层绕过DAL直接调用仓储类似乎也没什么大的问题,但是这样做有一个很大的弊端,就是无法做到DAL层的原子操作的复用.假如多个业务 ...

  7. 改变Web Browser控件IE版本

    默认的webbrowser控件使用的渲染模式版本似乎是IE7,想要更改更高版本,如下: 在注册表位置 HKEY_CURRENT_USER\Software\Microsoft\Internet Exp ...

  8. python学习之if语句

    1.if条件表达式判断 ##判断条件是true or false var1=10 if var1: print("true") print(var1) else: print(&q ...

  9. python matplotlib 中文显示参数设置

    python matplotlib 中文显示参数设置 方法一:每次编写代码时进行参数设置 #coding:utf-8import matplotlib.pyplot as pltplt.rcParam ...

  10. PHP数据类型转换 （转）

    PHP数据类型转换 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: •(int).(integer):转换成整形 •(float).(double).(real):转换成浮点型 •(s ...