jQuery UI -- widgets各种部件的使用
注意：如果需要使用到 jQueryUI的icons，那么需要将下载的文件中的images文件夹拷贝到项目中，最好是在做项目的时候将下载的整体插件全部拷贝进去，方便使用。
下面的代码中基本包含了所有部件的使用，所以代码有点凌乱。
html5文件：（中间包含了JS脚本和css样式）
<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>
<label for="tags">Tags:label>
<input id="tags">
<p>Date:<input type="text" id="datepicker">p>
<div id="div">
<p>这是一个对话框dialogp>
div>
<a id="btn">按钮a>
<div id="pb">div>
<ul id="menu">
<li>
<a href="#">iOSa>
<ul>
<li><a href="#">ios1a>li>
<li><a href="#">ios2a>li>
<li><a href="#">ios3a>li>
ul>
li>
<li>javali>
<li>cli>
<li>c++li>
<li>html5li>
ul>
<span id="span">0span>
<div id="slider">div>
<input id="input">
<button id="spinnerbtn">getValuebutton>
<div id="tabs">
<ul>
<li><a href="#hello1">hello1a>li>
<li><a href="#hello2">hello2a>li>
<li><a href="#hello3">hello3a>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文件中,以