jQuery UI -- widgets各种部件的使用
韶亮
注意：如果需要使用到 jQueryUI的icons，那么需要将下载的文件中的images文件夹拷贝到项目中，最好是在做项目的时候将下载的整体插件全部拷贝进去，方便使用。
下面的代码中基本包含了所有部件的使用，所以代码有点凌乱。
html5文件：（中间包含了JS脚本和css样式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉风琴效果</title>
<script src="jquery-2.2.3.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link href="jquery-ui.min.css" rel="stylesheet" type="text/css">
<script src="accordion.js"></script>
<script>
$(function(){
$("#datepicker").datepicker({
changeYear:true, //设置是否可以选择年份
changeMonth:true, // 设置是否可以选择月份
yearRange:"1900:2016", //设置可选年份的范围
numberOfMonths:1, // 设置一次出现几个月份的日期
// showButtonPanel:true //是否显示关闭按钮(没什么用)
showOn:"button", // 设置点击哪个弹出月份选择器,如果是both,那么点击日期输入框或者按钮,都可以出现
buttonText:"选择日期", //按钮的文字
// buttonImage:"1.png", //可以将按钮设置为图片的形式,但是文字依然存在,成为alt值
// buttonImageOnly:true //将button设置为只是用图片,这样可以隐藏text,使其更加美观,但是button的点击效果消失
})
});
// 用来将日历的格式语言为中文.
jQuery(function($){
$.datepicker.regional['zh-CN'] = {
closeText: '关闭',
prevText: '<上月',
nextText: '下月>',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: [' 1',' 2',' 3',' 4',' 5',' 6',
' 7',' 8',' 9','10','11','12'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
weekHeader: '周',
dateFormat: 'yy-mm-dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});
// 用在对话框中的方法
$(function(){
// 在UI自带属性上添加点击事件的书写方法:
$("#btn").button().on("click",function(){
$("#div").dialog({
title:"标题",
width:200,
height:100
});
});
});
// 用在progressBar的方法
// $(function(){
// $("#pb").progressbar({
// value:23,
// });
// });
// 使用在spinner
$(function(){
// $("#input").spinner();
// 设置默认的值,注意方法的使用!!
$("#input").spinner().spinner("value",10);
$("#input").spinner({
max:15,
min:1
});
// 点击按钮,可以弹出当前的值/设置新的值
$("#spinnerbtn").on("click",function(){
// alert($("#input").spinner("value"));
$("#input").spinner().spinner("value",5);
});
});
$(function(){
$("#tabs").tabs();
})
</script>
<style>
/*#menu{*/
/*width:200px;*/
/*}*/
/*
使用下面的设置,可以将菜单修改为横向的
*/
.ui-menu:after{
content: ".";
display: inline-flex;
clear: both;
visibility: hidden;
}
.ui-menu .ui-menu-item{
display: inline-block;
float: left;
width:auto;
}
</style>
</head>
<body>
<div id="accordion">
<h3>标签一</h3>
<div>
<p>
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
</p>
</div>
<h3>标签二</h3>
<div>
<p>
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
</p>
</div>
</div>
<!--自动补全 autoComplete-->
<!-- 注意这里 for 的使用 -->
<label for="tags">Tags:</label>
<input id="tags">
<!-- 日期控件的使用 -->
<p>Date:<input type="text" id="datepicker"></p>
<!-- 对话框 -->
<div id="div">
<p>这是一个对话框dialog</p>
</div>
<a id="btn">按钮</a>
<!-- progressBar 进度条-->
<div id="pb"></div>
<!-- menu菜单的使用 -->
<ul id="menu">
<li>
<a href="#">iOS</a>
<ul>
<li><a href="#">ios1</a></li>
<li><a href="#">ios2</a></li>
<li><a href="#">ios3</a></li>
</ul>
</li>
<li>java</li>
<li>c</li>
<li>c++</li>
<li>html5</li>
</ul>
<!-- slider 控件 -->
<span id="span">0</span>
<div id="slider"></div>
<!-- spinner 下拉菜单 -->
<input id="input">
<button id="spinnerbtn">getValue</button>
<!-- tab 的使用-->
<div id="tabs">
<ul>
<li><a href="#hello1">hello1</a></li>
<li><a href="#hello2">hello2</a></li>
<li><a href="#hello3">hello3</a></li>
</ul>
<div id="hello1">
hello1
hello1
hello1
hello1
</div>
<div id="hello2">
hello2
hello2
hello2
hello2
</div>
<div id="hello3">
hello3
hello3
hello3
hello3
</div>
</div>
</body>
</html>JS文件：（其中代码方法的顺序和H5文件中部件模块的顺序基本一致）
var pb;
var max = 100;
var current = 0;
var valueSpan,slider;
$(document).ready(function(){
$("#accordion").accordion();
// 输入框自动补齐
var autoTags = ["i2wen","ime","html","css","java","ios"];
$("#tags").autocomplete({
source:autoTags
});
// 这一部分也可以直接写到html5文件中,以<script>标签的形式
// 用在progressBar
pb=$("#pb");
pb.progressbar({max:100});
setInterval(changepb,100);
// 使用在 menu 中
$("#menu").menu({
// 括号内的参数是用来修改菜单子级菜单的位置,也有替他属性,可以自行查询博客
position:{at:"right bottom"}
});
// slider
slider = $("#slider");
valueSpan = $("#span");
// 在拖动滑块后,span标签显示当前的值
// slider.slider({
// change:function(event,ui){
// valueSpan.text(slider.slider("option","value"));
// }
// });
// 拖动的同时,span标签就已经开始更改数值
slider.slider({
slide:function(event,ui){
valueSpan.text(slider.slider("option","value"));
}
});
});
function changepb(){
current++;
if (current>=100){
current=0;
}
// 注意这里参数的使用
pb.progressbar("option","value",current);
}
类似资料：