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

部分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. (转) CCTextFieldTTF输入框

    CCTextFieldTTF输入框 分类: cocos2d-x 2013-04-08 16:32 2964人阅读 评论(1) 收藏 举报 新建工程,testInput 修改HelloWorldScen ...

  2. (8) 深入理解Java Class文件格式(七)

    转载:http://blog.csdn.net/zhangjg_blog/article/details/22091529 本专栏列前面的一系列博客, 对Class文件中的一部分数据项进行了介绍. 本 ...

  3. jquery之replaceAll(),replaceWith()方法详解

    一:replaceAll() replaceAll()函数用于使用当前匹配元素替换掉所有的目标元素. 该函数属于jQuery对象(实例). 语法 jQuery 1.2 新增该函数. jQueryObj ...

  4. Python 基础练习

    今天接触了python,了解了一下 python 的基础语法,于是想着手训练一下,在本习题集中,参考代码为提供的参考答案,前面的代码为自己思考的代码,最后每道题给出练习的时间. Python 基础练习 ...

  5. WPF+WEB+WinForm->>表现层共用类

    首先在解决方案里新建一个类库,然后在解决方案里新建三个项目,WPF,WEB,WinForm,但是这三个项目都需要一个计算类进行计算,那么就在新建的类库Calculator里面放一个Calculat.c ...

  6. nodejs系列(二)REPL交互解释 事件循环

    一.REPL交互解释 命令行中输入node启动REPL: > var x =2;undefined> do{x++;... console.log("x:="+x);. ...

  7. 正则神器,RegexBuddy

    解释 转换 测试匹配 使用帮助 正则图书馆 转为PHP案例 功能强大,虽然是英文的!挺不错的~

  8. centos7 禁止防火墙

    #CentOS .0默认使用的是firewall作为防火墙,这里改为iptables防火墙. #firewall: systemctl start firewalld.service#启动firewa ...

  9. fsimage 和 edits log

    standby NN每隔一段时间(由参数dfs.ha.tail-edits.period决定,默认是60s)去检查Journal node上新的Edits log文件. standby NN每隔一段时 ...

  10. iframe 子页面获取父页面的元素并且控制样式

    父页面的代码 <div id="div5" style="position:relative;height:500px;">             ...