前提：用到的jquery库jquery-1.4.2.js，jquery-ui-1.7.2.custom.min.js，ui.datepicker-zh-CN.js，ui.datetimepicker-zh-CN.js和ui.datetimepicker.js（这是另外下载的jquery的插件），以及jquery的资源。
1.日期控件
$(function() {
$("#datepicker").datepicker({//datepicker是页面上文本域的id
wOn: 'button',//此处还可以用'both'，表示在按钮和文本域点击均可弹出
buttonImage :'./images/calendar.gif',
buttonImageOnly :true
});
});
2.日期时间控件
$(function() {
$("#createTime").datetimepicker({
showOn : 'both',
buttonImage :
'./images/calendar.gif',
buttonImageOnly : true
});
3.页面初始化时在日期时间控件显示当前时间
$(function() {
$("#createTime").datetimepicker({
showOn : 'both',
buttonImage :
'./images/calendar.gif',
buttonImageOnly : true
});
$("#endTime").datetimepicker({
showOn :
'both',
buttonImage :
'./images/calendar.gif',
buttonImageOnly : true
});
Date.prototype.format = function(format){
var o = {
"M+" :
this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" :
this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" :
this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3),
//quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in
o)if(new RegExp("("+ k +")").test(format))
format =
format.replace(RegExp.$1,
RegExp.$1.length==1 ? o[k] :
("00"+
o[k]).substr((""+ o[k]).length));
return format;
};
var date = new
Date();
$("#createTime").val(date.format("yyyy-MM-dd hh:mm"));
});
4.反转显示/隐藏
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table>
<tr><td>
<a href="#" class="trigger">查询产品</a></h6>
</td>
</tr>
<tr>
<td>
<div class="toggle_container">
<div class="block">
<h3>Content Header</h3>
<!--Content-->
</div>
</div>
</td>
</tr>
</table>
<script>
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click
$(".trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
//Slide up and down on click
$(".trigger").click(function(){
$(".toggle_container").slideToggle("slow");
});
});
</script>
</body>
</html>
5.tab
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css" href="./stylesheets/base/ui.all.css"
rel="stylesheet" />
<link type="text/css" href="stylesheets/base/ui.tabs.css"
rel="stylesheet" />
<script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="javascripts/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="javascripts/ui.tabs.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab1</a></li>
<li><a href="#tabs-2">tab2</a></li>
<li><a href="#tabs-3">tab3</a></li>
</ul>
<div id="tabs-1">page 1</div>
<div id="tabs-2">page 2</div>
<div id="tabs-3">page 3</div>
</div>
</body>
</html>
6.批量清除控件内容
function cfields(){
$("#queryName").val("");//queryName为文本域id，以下同
$("#queryNumber").val("");
$("#type1List").val("---请选择---");//type1List为下拉框id，"---请选择---"为默认选项，以下同
$("#type2List").val("---请选择---");
}
一般都用jquery官方的插件 然后根据自己需要修改
参考资料：http://www.jquery.com 具体用哪个你再查下
|
收藏
淘帖
踩
