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

部分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. Linux VFS中write系统调用实现原理【转】

    转自:http://blog.chinaunix.net/uid-28362602-id-3425881.html 目录 用户空间的write函数在内核里面的服务例程为sys_write Vfs_wr ...

  2. 初识python第二天（3）

    我们接着上一篇博客,继续来来了解Python一些常见类的函数使用方法 一.int # 运算符,>=,比较self是否大于等于value,只要满足大于或者等于其中一个条件,就返回True,否则就返 ...

  3. SpringMVC 手动控制事务提交

    描述 事务还是一个比较好的东东,有了这个,我们在做流程性的东西的时候,就会很好,很nice. 现在看看 SpringMVC 如何实现的,详细请看代码: 1.配置文件 applicationContex ...

  4. mina IoBuffer 常用方法

    Limit(int) 如果position>limit, position = limit,如果mark>limit, 重置mark Mark() 取当前的position的快照标记mar ...

  5. Python—装饰器

    装饰器 1.普通函数 #简单的函数和调用 def a1(): print("i am zhangsan") def a2(): print("i am lisi" ...

  6. UltraISO向U盘写入镜像特别慢

    电脑:Dell INSPIRON 1416 系统:WIN7旗舰版32位 U盘:金士顿8G 镜像:CentOS7 ×86_64 问题: 开始使用"写入"功能,写入速度72k/s 后来 ...

  7. Uva 11542 乘积是平方数

    题目链接:http://vjudge.net/contest/142484#problem/A 这个题目也是2016年CCPC网赛上面的题目,当时我是不会做的,但是大牛们都知道这是一个原题,最后给一队 ...

  8. WordPress搬家教程：换空间与换域名

    WordPress搬家教程:换空间与换域名 由于本人博客空间8月份已到期,便新购一个虚拟主机想进行WordPress搬家,于是特意在网上查了些WordPress搬家教程,进行了综合总结,并结合这次实操 ...

  9. 使用c#访问脚本里变量的方法

    首先,把要获取的变量权限定义为public类型变量. 方法一.public GameObject 另一个物体;    //监视面板拖拽赋值 另一个物体.GetComponent<脚本>() ...

  10. LabVIEW串口通信

    Instrument I/O 利用LabVIEW内置的驱动程序库和具有工业标准的设备驱动软件,可对 GPIB(通用接口总线).Ethernet(以太网)接口.RS-232(标准串行接口总线)/RS-4 ...