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

部分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. 数据库的点数据根据行政区shp来进行行政区处理，python定时器实现

    # -*- coding: utf-8 -*- import struct import decimal import itertools import arcpy import math impor ...

  2. hibernate映射的 关联关系：有 一对多关联关系，一对一关联关系，多对多关联关系，继承关系

    hibernate环境配置:导包.... 单向n-1:单向 n-1 关联只需从 n 的一端可以访问 1 的一端 <many-to-one> 元素来映射组成关系: name: 设定待映射的持 ...

  3. SharePoint 2013 一些小技巧

    一.添加“SharePoint 2013 切换用户”标签 相比SharePoint 2010,SharePoint2013版本去掉了切换用户登陆的功能(如下图),其实这个可以通过改welcome.as ...

  4. Android中插件开发篇之----动态加载Activity(免安装运行程序)

    一.前言 又到周末了,时间过的很快,今天我们来看一下Android中插件开发篇的最后一篇文章的内容:动态加载Activity(免安装运行程序),在上一篇文章中说道了,如何动态加载资源(应用换肤原理解析 ...

  5. easyui datagrid 仿ext—右键

    var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* gri ...

  6. Oracle的排序和限制条件（order by 和where）

    1.Order by 子句的使用 select column.... from .... order by ... 1) Order by子句在整个 select语句中的位置: 始终位于最后 2) o ...

  7. (转)内联（inline）函数与虚函数（virtual）的讨论

    本文转自: http://topic.csdn.net/t/20051220/09/4469273.html 函数的inline属性是在编译时确定的, 然而,virtual的性质是在运行时确定的,这两 ...

  8. javascript 去掉空格之后的字符 正则表达式

    从后端数据库读取时间时,经常会把整个日期年月日包括时分秒都取到,如2015-1-28 14:56:00,但是一般的我们只需要前面的年月日就行了.一个简单的方法,直接用split(" &quo ...

  9. 《BI那点儿事》运用标准计分和离差——分析三国超一流统帅综合实力排名 绝对客观，数据说话

    数据分析基础概念:标准计分: 1.无论作为变量的满分为几分,其标准计分的平均数势必为0,而其标准差势必为1.2.无论作为变量的单位是什么,其标准计分的平均数势必为0,而其标准差势必为1.公式为: 离差 ...

  10. 《K&R》中引用的几个排序算法（shellsort、）以及一个自己乱写的排序

    留待期末考后更新... void shellsort(int v[], int n) { int gap, i, j, temp; ; gap > ; gap /= ) for(i = gap; ...