autocomplete智能提示
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<link href="css/autocomplete.css" rel="stylesheet" type="text/css" />
<script src="script/jquery-1.10.2.js" type="text/javascript"></script>
<script src="script/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var data = ["周杰伦", "周传雄", "老周", "刘德华", "刘恺威", "老刘", "杨幂", "杨瑞鹏", "杨贵妃", "老杨"];
$('#query').autocomplete({
source: data,
autoFosus: false,
select: function (event, ui) {
var query = ui.item.value;
window.location = 'http://www.baidu.com/s?wd=' + query;
}
})
})
</script>
</head>
<body>
<input type="text" id="query" /><input id="Button1" type="button" value="百度一下" />
</body>
</html>
cookie操作
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="script/jquery-1.10.2.js" type="text/javascript"></script>
<script src="script/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//$.cookie("username") 的值为字符串'null'
if ($.cookie("username") != 'null') {
$('#username').val($.cookie("username"));
}
$('#Button1').bind('click', function () {
//判断如果用户选中复选框“记住我”，则执行下面cookie的写入，否则不操作
if (document.getElementById('Checkbox1').checked == true) {
$.cookie("username", $('#username').val(), { expires: 1 })//过期时间单位为天
}
})
$('#Button2').bind('click', function () {
$.cookie("username", null); //设定cookie过期
})
})
</script>
</head>
<body>
<p>
用户名：<input id="username" type="text" /></p>
<p>
密码：<input id="password" type="text" /></p>
<p>
记住我：<input id="Checkbox1" type="checkbox" /></p>
<p>
<input id="Button1" type="button" value="登录" /><input id="Button2" type="button"
value="清除cookie" /></p>
</body>
</html>
图片
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/nf.lightbox.css" rel="stylesheet" type="text/css" />
<script src="script/jquery-1.7.2.js" type="text/javascript"></script>
<script src="script/NFLightBox.js" type="text/javascript"></script>
<style type="text/css">
#gallery
{
width: 500px;
background-color: Gray;
padding: 10px;
}
#gallery ul
{
list-style-type: none;
}
#gallery ul li
{
display: inline;
}
#gallery ul li img
{
border: 5px solid white;
width: 100px;
height: 66px;
}
#gallery ul li a:hover img
{
border-width:5px 5px 20px 5px;
}
</style>
<script type="text/javascript">
$(function () {
var settings = { containerResizeSpeed: 350
};
$('#gallery a').lightBox(settings);
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="gallery">
<ul>
<li><a href="photos/image1.jpg">
<img src="photos/thumb_image1.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image2.jpg">
<img src="photos/thumb_image2.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image3.jpg">
<img src="photos/thumb_image3.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image4.jpg">
<img src="photos/thumb_image4.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image5.jpg">
<img src="photos/thumb_image5.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image6.jpg">
<img src="photos/thumb_image6.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image7.jpg">
<img src="photos/thumb_image7.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image8.jpg">
<img src="photos/thumb_image8.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image9.jpg">
<img src="photos/thumb_image9.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image10.jpg">
<img src="photos/thumb_image10.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image11.jpg">
<img src="photos/thumb_image11.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image12.jpg">
<img src="photos/thumb_image12.jpg" alt="" title="图片1" /></a> </li>
</ul>
</div>
</form>
</body>
</html>
draggable拖动插件
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="script/jquery-1.10.2.js" type="text/javascript"></script>
<script src="script/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('img').draggable({
//axis:'y'
//containment: 'parent'
//containment: '#div2'
//containment:[100,100,500,500],
//cursor: 'wait',
// delay: 500,
opacity: 0.4,
revert: false,
revertDuration: 3000,
snap: '#div2',
//snapTolerance: 500,
start: function () {
$('#div2').text('看，我动了');
},
drag: function () {
$('#div2').text('看，我一直在动');
},
stop: function () {
$('#div2').text('看，我停下了');
}
});
$('#Button1').bind('click', function () {
$('img').draggable('disable');
})
$('#Button2').bind('click', function () {
$('img').draggable('enable');
})
$('#div2').droppable({
activate: function () {
$(this).css('background-color','red');
}
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="mydiv">
<img src="images/Jellyfish.jpg" />
</div>
<div id="div2">
</div>
<input id="Button1" type="button" value="关闭拖动" /><input id="Button2" type="button"
value="开启拖动" />
</form>
</body>
</html>
validate验证插件
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="script/jquery-1.10.2.js" type="text/javascript"></script>
<script src="script/jquery.validate.js" type="text/javascript"></script>
<script src="script/messages_cn.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#myform').validate({
rules: {
username: {
/*required: function () {
if (4 < 5) {
return false;
}
else {
return true;
}
},*/
required: true,
//minlength: 6
rangelength: [6, 12]
},
age: {
required: true,
max: 100,
min: 10
},
email: {
required: true,
email: true
},
home: {
required: true,
url: true
},
height: {
digits: true
},
confirm_password: {
equalTo: '#passowrd'
}
}
});
})
</script>
</head>
<body>
<form id="myform">
<p>
用户名：<input id="username" name="username" type="text" /></p>
<p>
<p>
密码：<input id="passowrd" name="passowrd" type="text" /></p>
<p>
<p>
确认密码：<input id="confirm_password" name="confirm_password" type="text" /></p>
<p>
<p>
年龄：<input id="age" name="age" type="text" /></p>
<p>
<p>
邮箱：<input id="email" name="email" type="text" /></p>
<p>
<p>
个人主页：<input id="home" name="home" type="text" /></p>
<p>
<p>
身高：<input id="height" name="height" type="text" />cm</p>
<p>
<input id="Submit1" type="submit" value="提交" /><span></span></p>
</form>
</body>
</html>