下面介绍下jQuery的一些应用，在之前的上一篇中讲解了jQuery的知识点，可以进行阅读一下。而这里主要是说一下jQuery还运用到某些其他的方面的知识。
1：网页端本地存储的方式（三种）
（一）：cookie存储
// cookie的读和写需要在服务器环境下
//写cookie
$.cookie('mycookie','ok!',{expires:7,path:'/'});
//读cookie
var val = $.cookie('mycookie');
alert(val);（二）：localStorage存储
<script type="text/javascript">
//写入
//localStorage.setItem('mystorage','ok!');
//sessionStorage.setItem('pwd','123');
// 读取
alert(localStorage.mystorage);
</script
//获取：
localStorage.getItem("dat");
localStorage.dat
//删除
localStorage.removeItem("dat"); （三）：
sessionStorage
方法：sessionStorage。setItem（‘pad’，‘123’）；
总结：它们的区别：（1）：存储大小：cookie为4k，而后面两个为5M
（2）：传输携带：cookie会被在HTTP传输中被携带，loaclStrorage是保存在本地，session是在同源页面
（3）：存在时间：cookie可以进行设置，loaclStorage一直会存在本地（不被用户主动删除的情况），而sessoin是在关闭页面后消失
注意一下：Iphone的无痕浏览只能支持cookie，其他两个都不支持
（四）具体实例（网页的消息推送）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin:0;
}
.pop{
width:400px;
height:300px;
background-color:#fff;
border:1px solid #ccc;
position:fixed;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-250px;
z-index:9999;
opacity:0;
filter:alpha(opacity=0);
}
.pop span{
float:right;
font-size:30px;
cursor:pointer;
}
.mask{
width:100%;
height: 100%;
background-color:#000;
opacity:0.6;
filter:alpha(opacity=60);
position:fixed;
z-index:9990;
left:0;
top:0
}
.pop_con{
display:none;
}
.hasknow{
text-align:center;
cursor:pointer;
margin-top:100px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
$(function(){
var read = $.cookie('hasread');
//alert(read);
if(read==undefined)
{
$('.pop_con').show();
$('.pop').animate({marginTop:-150,opacity:1});
}
$('.hasknow').click(function() {
$.cookie('hasread','ok',{expires:7,path:'/'});
$('.pop_con').hide();
});
})
</script>
</head>
<body>
<div class="pop_con">
<div class="pop">
<span>×</span>
<p>我们网站有优惠，赶紧行动吧！亲！</p>
<p class="hasknow">我知道了</p>
</div>
<div class="mask"></div>
</div>
<h1>网站首页</h1>
</body>
</html>2：jQueryUI插件的使用
（1）例子：实现拖拉功能
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$('.box').draggable({
// 约束元素在父级内拖动
containment:'parent',
//限制在x轴向拖动
//axis:'x',
//拖动是透明度变为0.6
opacity:0.6,
drag:function(ev,ui){
console.log(ui.position.left);
}
});
})
</script>
<style type="text/css">
.con{
width:300px;
height:300px;
border:1px solid #000;
margin:50px auto 0;
}
.box{
width:40px;
height:40px;
background-color:gold;
cursor:pointer;
}
</style>
</head>
<body>
<div class="con">
<div class="box"></div>
</div>
</body>
（2）例子：实现拖拉进度条功能
<script type="text/javascript">
$(function(){
$('.dragbar').draggable({
axis:'x',
containment:'parent',
//containment:[0,0,600,0]
opacity:0.6,
drag:function(ev,ui){
//console.log(ui.position.left);
var nowleft = ui.position.left;
$('.progress').css({width:nowleft});
$('.slide_count').val(parseInt(nowleft*100/570));
}
});
})
</script>
<style type="text/css">
.slidebar_con{
width:650px;
height:32px;
margin:50px auto 0;
}
.slidebar{
width:600px;
height:30px;
border:1px solid #ccc;
float:left;
position:relative;
}
.slidebar .dragbar{
width:30px;
height:30px;
background-color:gold;
cursor:pointer;
position:absolute;
left:0;
top:0;
}
.slidebar .progress{
width:0px;
height:30px;
background-color:#f0f0f0;
position:absolute;
left:0;
top:0;
}
.slide_count{
padding:0;
float:right;
width:40px;
height:30px;
border:1px solid #ccc;
text-align:center;
font-size:16px;
}
</style>
</head>
<body>
<div class="slidebar_con">
<div class="slidebar">
<div class="progress"></div>
<div class="dragbar"></div>
</div>
<input type="text" name="" value="0" class="slide_count">
</div>
</body>
（3）例子：实现自定义滚动条
<script type="text/javascript">
$(function(){
var h = $('.paragraph').outerHeight();
var hide = h-500;
$('.scroll_bar').draggable({
axis:'y',
containment:'parent',
opacity:0.6,
drag:function(ev,ui){
var nowtop = ui.position.top;
var nowscroll = parseInt(nowtop/290*hide);
$('.paragraph').css({top:-nowscroll});
}
});
})
</script>
<style type="text/css">
.scroll_con{
width:400px;
height:500px;
border:1px solid #ccc;
margin:50px auto 0;
position:relative;
overflow:hidden;
}
.paragraph{
width:360px;
position:absolute;
left:0;
top:0;
padding:10px 20px;
font-size:14px;
font-family:'Microsoft Yahei';
line-height:32px;
text-indent:2em;
}
.scroll_bar_con{
width:10px;
height:490px;
position:absolute;
right:5px;
top:5px;
}
.scroll_bar{
width:10px;
height:200px;
background-color:#ccc;
position:absolute;
left:0;
top:0;
cursor:pointer;
border-radius:5px;
}
</style>
</head>
<body>
<div class="scroll_con">
<div class="paragraph">
2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。
学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。
学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。
了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。
了解Web服务器当你对Apache的基本配置，htaccess配置技巧有一些掌握的话，将来必定受益，而且这方面的知识学起来也相对容易。
</div>
<div class="scroll_bar_con">
<div class="scroll_bar">
</div>
</div>
</div>
3：Zepto插件的使用（用于移动端开发插件，比如手指左右滑动，点击等）
（1）基本事件（测试的时候，要将网页转为移动端面板才会有效果）
<script type="text/javascript" src="js/zepto.min.js"></script>
<style type="text/css">
.box{
width:300px;
height:300px;
background-color: gold;
}
</style>
<script type="text/javascript">
$(function(){
$('.box').tap(function(){
alert('tap');
});
$('.box').click(function(){
alert('click');
});
$('.box').longTap(function(){
alert('long tap');
});
$('.box').swipe(function(){
alert('swipe');
})
$('.box').swipeLeft(function(){
alert('swipe left');
})
$('.box').swipeRight(function(){
alert('swipe right');
})
$('.box').swipeUp(function(){
alert('swipe up');
})
$('.box').swipeDown(function(){
alert('swipe down');
})
});
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>（2）滑动删除的效果（同样，将网页切换成移动端页面）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="js/zepto.min.js"></script>
<title>zepto touch</title>
<style type="text/css">
body,ul{margin:0;padding:0}
.list{
list-style:none;
margin:20px auto 0;
width:90%;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ddd;
position:relative;
overflow:hidden;
}
.list li a{
text-decoration:none;
color:#333;
position:absolute;
left:0
}
.list li span{
position:absolute;
right:-60px;
background-color:red;
padding:0 10px;
color:#fff;
}
</style>
<script type="text/javascript">
$(function(){
$('.list li').swipeLeft(function(){
$(this).children('a').animate({left:-60});
$(this).children('span').animate({right:0});
});
$('.list li').swipeRight(function(){
$(this).children('a').animate({left:0});
$(this).children('span').animate({right:-60});
})
$('.list span').click(function(){
$(this).parent().animate({height:0},function(){
$(this).remove();
})
});
})
</script>
</head>
<body>
<ul class="list">
<li><a href="#">新闻标题111111</a><span>删除</span></li>
<li><a href="#">新闻标题222222</a><span>删除</span></li>
<li><a href="#">新闻标题333333</a><span>删除</span></li>
<li><a href="#">新闻标题444444</a><span>删除</span></li>
<li><a href="#">新闻标题555555</a><span>删除</span></li>
</ul>
</body>
</html>4：插件Swiper的使用（这个也是一种移动端的插件，主要可以用来制作幻灯片和屏幕滑动的效果）
（1）例子：幻灯片（关键代码，可以直接用的，使用在对应的位置），这个可以去这个插件的官网看看，还有很多类似的效果
<script type="text/javascript">
$(function(){
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
initialSlide :1,
paginationClickable: true,
loop: true,
autoplay:3000,
autoplayDisableOnInteraction:false
});
})
</script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>
<div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>
<div class="swiper-slide"><a href="#"><img src="images/slide.jpg" alt="幻灯片"></a></div>
</div>
<div class="swiper-pagination"></div>
</div>（2）例子：整屏滑动
<script type="text/javascript">
$(function(){
setTimeout(function(){
$('.p1').addClass('moving');
},0);
var myswiper = new Swiper('.swiper-container',{
direction: 'vertical',
pagination: '.swiper-pagination',
onSlideChangeEnd:function(swiper){
console.log(swiper);
var index = swiper.activeIndex;
$('.swiper-slide').removeClass('moving').eq(index).addClass('moving');
}
})
});
</script>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide p1">
<h1>页面标题一</h1>
<p>页面内容</p>
</div>
<div class="swiper-slide p2">
<h1>页面标题二</h1>
<p>页面内容</p>
</div>
<div class="swiper-slide p3">
<h1>页面标题三</h1>
<p>页面内容</p>
</div>
<div class="swiper-slide p4">
<h1>页面标题四</h1>
<p>页面内容</p>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="up_icon"></div>
</body>
3.
简单的介绍一下关于EasyUI这个前端框架的基本内容（前端框架还要熟悉Bootstrap这个）。
1：EasyUI引用的知识点
<!-- 引入css文件，不限顺序 -->
<link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
<!-- 引入js文件，有顺序限制 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
对于这个引用的，顺便就再提一下，如何引用Bootstrap前端框架的资源文件
（1）详细版的介绍（适合初学者熟悉具体的内容）
<head>
<meta charset="utf-8">
<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
<!--视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，会将页面缩放到设备这么大来展示-->
<!--width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"(表示采用设备的宽度)
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
如果设置"user-scalable=no",那么"minimum-scale"和"maximum-scale"无效
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap完整模板</title>
<!-- 引入Bootstrap核心样式文件 -->
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果，必须放置到web服务器中，暂时不必掌握 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>（2）简单版（开发中用就可以了）
<head>
<meta charset="utf-8">
<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>商城首页</title>
<!-- 引入Bootstrap核心样式文件 -->
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- 引入jQuery核心js文件 -->
<script src="../js/jquery-1.11.3.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="../js/bootstrap.min.js"></script>
</head>解析：记住为了适配的话，一定要引用meta标签的这几个内容，还要就是先引用CSS再引用JS文件，并且需要先引用jQuery的文件，再引用Bootstrap的文件，然后再引用自己需要添加的额外的js外部文件。
2：划分页面区域（五个区域的构造和混合构造）
<!-- 正规布局 -->
<div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true">
<!-- 区域面板--北边 -->
<div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div>
<!-- 区域面板--南边 -->
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<!-- 区域面板--东边 -->
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<!-- 区域面板--西边 -->
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<!-- 区域面板--中间 -->
<div data-options="region:'center',title:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>
</div>
(混合构造，可根据需要进行自由的组合)
<div id="layoutID" class="easyui-layout" data-options="fit:true">
<!-- 北 -->
<div data-options="region:'north'" style="height:100px"></div>
<!-- 中 -->
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<!-- 西 -->
<div data-options="region:'west'" style="width:200px"></div>
<!-- 中 -->
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<!-- 北 -->
<div data-options="region:'north'" style="height:100px"></div>
<!-- 中 -->
<div data-options="region:'center'"></div>
</div>
</div>
</div>
</div>
</div> 3：以下说几个用在form表单中的一些标签元素
（1）form表单中的验证功能（例子包含了，如何进行自定义验证的方法）
姓名：<input id="nameID"/><p/>
<script type="text/javascript">
$("#nameID").validatebox({
required : true,
validType : ['length[1,6]','zhongwen'] //当需要多个验证条件的时候，就用这样的数组方式，否则可以用key，value的映射方式
});
</script>
<script type="text/javascript"> //自定义验证格式
//自定义规则:zhongwen
$.extend($.fn.validatebox.defaults.rules, {
//zhongwen规则名
zhongwen: {
//validator验证体
//value表示用户在文本框中输入的内容
validator: function(value){
//如果符合中文规则
if(/^[\u3220-\uFA29]*$/.test(value)){
return true;
}
},
//如果不符合中文规则，以下就是提示信息
message: '姓名必须为中文'
}
});
</script>
邮箱：<input id="emailID"/><p/>
<script type="text/javascript">
$("#emailID").validatebox({
required : true,
validType : ['length[1,30]','email']
});
</script>
密码：<input id="passwordID"/><p/>
<script type="text/javascript">
$("#passwordID").validatebox({
required : true,
validType : ['length[6,6]','english']
});
</script>
<script type="text/javascript"> //自定义验证格式
$.extend($.fn.validatebox.defaults.rules, {
english: {
validator: function(value){
if(/^[a-zA-Z]*$/.test(value)){ //英文的正则匹配
return true;
}
},
message: '密码必须为英文'
}
});
</script>
（2）:下拉列表的使用(这里面的内容，是用json格式的数据来进行测试的，当然这个url还可以是你的servlert等等)
城市：
<input id="cityID" name="city"/>
<script type="text/javascript">
//url表示请求的路径
//valueField表示传到服务器的值，看不见的
//textField表示页面中显示的值，看得见
$("#cityID").combobox({
url : "../json/city.json",
valueField :"id",
textField : "name"
});
</script>
<script type="text/javascript">
$(function(){
//为下拉组合框设置值
$("#cityID").combobox("setValue","长沙");
});
</script>
（3）:datebox日期输入框
入职时间：
<input id="dd" type="text"/>
<script type="text/javascript">
$("#dd").datebox({
required : true
});
</script>
<script type="text/javascript">
$("#dd").datebox({
onSelect : function(mydate){
var year = mydate.getFullYear();
var month = mydate.getMonth() + 1;
var date = mydate.getDate();
alert(year+ "年" + month + "月" + date + "日");
}
});
</script>
（4）：数字微调器numberspinner
商品数量:
<input id="ss" style="width:80px;">
<script type="text/javascript">
$("#ss").numberspinner({
min : 1, //设置最小值
max : 100, //设置最大值
value : 1 //设置默认值
});
</script>
<p/>
你一共购买了<span id="num">1</span>个商品
//上下调的监听
<script type="text/javascript">
$("#ss").numberspinner({
onSpinUp : function(){ //上调的监听
//获取数字微调的当前值
var value = $("#ss").numberspinner("getValue");
//将当前值设置到span标签中
$("#num").text(value).css("color","red");
},
onSpinDown : function(){ //下调的监听
//获取数字微调的当前值
var value = $("#ss").numberspinner("getValue");
//将当前值设置到span标签中
$("#num").text(value).css("color","red");
}
});
</script>
//funciton：当在输入框中输入数字后，回车，将内容显示到span中，同步
<script type="text/javascript">
$("#ss").keyup(function(xxx){
//将浏览器产生的事件对象设置到myevent变量中
var myevent = xxx;
//获取按键的unicode编码
var code = myevent.keyCode;
//如果按钮是回车
if(code == 13){
//获取数字微调的当前值，因为$(this)此时表示的是文本框，直接获取value属性值即可
var value = $(this).val();
//将当前值设置到span标签中
$("#num").text(value).css("color","red");
}
});
</script>
（5）：slide滑块条
<div style="margin:100px">
身高：<span id="tip"></span>
<p/>
<div id="ss" style="height:400px;width:600px"></div>
</div>
<script type="text/javascript">
$("#ss").slider({
mode : "v",
min : 150,
max : 190,
rule : [ 150,'|',160,'|',170,'|',180,'|',190 ],
showTip : true,
value : 150
});
</script>
//当滑动条的数值改变后，进行对数值的一个判定的小例子
<script type="text/javascript">
$("#ss").slider({
onChange : function(newValue){
if(newValue == 160){
$("#tip").text("合格").css("color","blue");
}else if(newValue == 170){
$("#tip").text("良好").css("color","green");
}else if(newValue == 180){
$("#tip").text("优秀").css("color","pink");
}else if(newValue == 190){
$("#tip").text("卓越").css("color","red");
}
}
});
</script>
4：progressBar进度条
<div id="p" style="width:400px;"></div>
<script type="text/javascript"> //用动态的方法来绑定，这其实都可以直接在初始化的时候，直接进行写，注意一下就好了，上面的例子都可以
$("#p").progressbar({
width : 1300,
height : 100,
value : 0
});
</script>
<input id="startID" type="button" value="动起来" style="width:111px;height:111px;font-size:33px"/>
<script type="text/javascript">
//获取1到9之间的随机数，包含1和9
function getNum(){
return Math.floor(Math.random()*9)+1;
}
</script>
<script type="text/javascript">
var timeID = null;
//函数
function update(){
//获取随机值,例如：3
var num = getNum();
//获取进度条当前值，例如：99
var value = $("#p").progressbar("getValue");
//判断
if(value + num > 100){
//强行设置进度条的当前值为100
$("#p").progressbar("setValue",100);
//停止定时器
window.clearInterval(timeID);
//按钮正效
$("#startID").removeAttr("disabled");
}else{
//设置进度条的当前值为num+value的和
$("#p").progressbar("setValue",(value+num));
}
}
//定拉按钮，同时提供单击事件
$("#startID").click(function(){
//每隔300毫秒执行update方法
timeID = window.setInterval("update()",300);
//按钮失效
$(this).attr("disabled","disabled");
});
</script>
5：window
<input type="button" value="打开窗口1" id="open1"/>
<input type="button" value="关闭窗口1" id="close1"/>
<div style="margin:600px"></div>
<div id="window1"></div>
<script type="text/javascript">
//定位打开窗口1按钮，同时添加单击事件
$("#open1").click(function(){
//打开窗口1
$("#window1").window({
title : "窗口1",
width : 840,
height : 150,
left : 200,
top : 100,
minimizable : false,
maximizable : false,
collapsible : false,
closable : false,
draggable : false,
resizable : true,
href : "/js-day06/empList.jsp"
});
});
</script>
<script type="text/javascript">
//定位关闭窗口1按钮，同时添加单击事件
$("#close1").click(function(){
//关闭窗口1
$("#window1").window("close");
});
</script>
6：dialog对话框
<input type="button" value="打开对话框" id="open"/>
<div style="margin:600px"></div>
<div id="dd"></div>
<script type="text/javascript">
$("#open").click(function(){
$("#dd").dialog({
title : "对话框",
width : 300,
height : 400,
left : 200,
top : 100,
minimizable : false,
maximizable : false,
collapsible : false,
closable : false,
draggable : false,
resizable : true,
toolbar : [
{
text:'编辑',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},
{
text:'帮助',
iconCls:'icon-help',
handler:function(){alert('help')}
}
],
buttons : [
{
text:'提交',
handler:function(){alert("提交");}
},
{
text:'关闭',
handler:function(){
//关闭对话框
$("#dd").dialog("close");
}
}
],
href : "/js-day06/easyui/10_form.html"
});
});
</script> 其中的href是另外一个页面（这个相当于内嵌一样的作用）
<form>
<table border="2" align="center">
<tr>
<th>姓名：</th>
<td><input id="nameID" type="text"/></td>
</tr>
<tr>
<th>入职时间：</th>
<td><input id="dateID" type="text"/></td>
</tr>
</table>
</form>
<script type="text/javascript">
$("#nameID").validatebox({
required : true,
validType : ['length[1,6]','zhongwen']
});
</script>
<script type="text/javascript">
$.extend($.fn.validatebox.defaults.rules, {
zhongwen: {
validator: function(value){
if(/^[\u3220-\uFA29]*$/.test(value)){
return true;
}
},
message: '姓名必须为中文'
}
});
</script>
<script type="text/javascript">
$("#dateID").datebox({
required : true
});
</script>注意一点：大家在运行的时候，记得修改好对应的路径，否则是加载不出来的！！！！
7：message信息框
<input type="button" value="警告框"/><br/>
<input type="button" value="确认框"/><br/>
<input type="button" value="输入框"/><br/>
<input type="button" value="显示框"/><br/>
<div style="margin:100px"></div>
<script type="text/javascript">
//定位所有的button按钮，同时提供单击事件
$(":button").click(function(){
//获取value属性值
var tip = $(this).val();
//去空格
tip = $.trim(tip);
//如果警告框的话
if("警告框" == tip){
$.messager.alert("警告框","继续努力","warning",function(){
alert("关闭");
});
}else if("确认框" == tip){
$.messager.confirm("确认框","你确认要关闭该确认框吗?",function(value){
alert(value);
});
}else if("输入框" == tip){
$.messager.prompt("输入框","你期希的月薪是多少?",function(sal){
if(sal == undefined){
alert("请输入月薪");
}else{
if(sal<6000){
alert("你的谦虚了");
}else if(sal < 7000){
alert("你加点油了");
}else{
alert("你很不错了");
}
}
});
}else if("显示框" == tip){
$.messager.show({
showType : "slide",
showSpeed : 500,
width : 300,
height : 300,
title : "显示框",
msg : "这是内容",
timeout : 5000
});
}
});
8：tree树
（1）静态生成一个tree树的内容
<ul id="treeID" class="easyui-tree">
<li>
<span>第一章</span>
<ul>
<li>
<span>第一节</span>
<ul>
<li>
<span>第一条</span>
</li>
<li>
<span>第二条</span>
</li>
</ul>
</li>
<li>
<span>第二节</span>
</li>
</ul>
</li>
<li>
<span>第二章</span>
</li>
</ul>
<script type="text/javascript">
$(function(){
//收起所有的选项
$("#treeID").tree("collapseAll");
});
</script>（2）动态生成tree树
<ul id="treeID"></ul>
<script type="text/javascript">
$("#treeID").tree({
url : "/js-day06/json/pro.json"
});
</script>注意一点：上面的tree树的内容是用json格式来存储的，这个在开发中就可以通过数据库中的内容来自动进行生成。下面就是例子中的json格式的数据
[
{
"id":1,
"text":"广东",
"state":"closed",
"children":[
{
"id":11,
"text":"广州" ,
"state":"closed",
"children":[
{
"id":111,
"text":"天河"
},
{
"id":112,
"text":"越秀"
}
]
},
{
"id":12,
"text":"深圳"
}
]
},
{
"id":2,
"text":"湖南"
}
] 9：几款比较有趣的jQuery插件
（1）列表下拉框的效果
<link href="css/webwidget_menu_dropdown.css" rel="stylesheet" type="text/css">
</link>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/webwidget_menu_dropdown.js"></script>
<style type="text/css">
h2 { color: red; }
pre { padding: 4px; border: #F90 dotted 1px; }
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_menu_dropdown").webwidget_menu_dropdown({
m_w: '100', //li的宽度
m_t_c: '#FFF', //li的字体颜色
m_c_c: '#8FC45A', //第一个li的颜色
m_bg_c: '#56A901',//除去第一个li的颜色
m_b_s: '2', //每个li的间隔
m_bg_h_c: '#8FC45A', //选中li时候的颜色
s_s: 'fast', //展开列表的速度，还可以是slow（缓慢）
m_s: 'small' //li的高度
});
</script>
<h1>Multicolor animation drop down navigation menu with jQuery</h1>
<h2>Demo1</h2>
<div id="webwidget_menu_dropdown" class="webwidget_menu_dropdown">
<ul>
<li class="current"><a href="link1">Menu1</a>
<ul>
<li><a href="link1">submenu1</a> </li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">牛niu图tu库ku</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link2">Menu2</a>
<ul>
<li><a href="link1">submenu1</a> </li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link3">牛niu图tu库ku</a>
<ul>
<li><a href="link1">submenu1</a> </li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link4">Menu4</a>
<ul>
<li><a href="link1">submenu1</a> </li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link5">Menu5</a>
<ul>
<li><a href="link1">submenu1</a> </li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link6">Menu6</a>
<ul>
<li><a href="link1">submenu1</a> </li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
</ul>
<div style="clear: both"></div>
</div>记得导入上面提到的CSS和JS两个库，否则没有效果
（2）图片的轮播效果
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
</head>
<body style="text-align:center;">
<link href="css/webwidget_slideshow_dot.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/webwidget_slideshow_dot.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#demo1").webwidget_slideshow_dot({
slideshow_time_interval: '5000',
slideshow_window_width: '200',
slideshow_window_height: '200',
slideshow_title_color: '#17CCCC',
soldeshow_foreColor: '#000',
directory: 'images/'
});
});
</script>
<div id="demo1" class="webwidget_slideshow_dot">
<ul>
<li><a href="link1" title="Sky"><img src="images/slideshow_large_1.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
<li><a href="link2" title="Sea"><img src="images/slideshow_large_2.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
<li><a href="link3" title="Flower"><img src="images/slideshow_large_3.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
<li><a href="link4" title="Treelink4"><img src="images/slideshow_large_4.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
</ul>
<div style="clear: both"></div>
</div>记得导入例子中引用的资源文件，这个百度下载都有
（3）如果想看到更多的插件的效果，下面粘贴一个网站，里面有很多大神写的东西，简单和便捷
内容还没完，我会不断进行更新的哦。。。感谢大家的浏览，欢迎共同学习交流！！！！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/12446.html
