- 浏览: 1710 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
jquery自定义下拉菜单
因工作需要自己写了个可填，可选，可自定义的日期下拉菜单...贴代码...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>select.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
$(document).ready(function(){
$(".select_button").click(function(){
setDisAll();//先把显示的下拉菜单隐藏掉
$(this).parent().addClass("zIndex"); //给父div加一个zIndex提高层的优先级
$(this).parent().siblings().find("ul").slideUp("fast");//点击当前的下拉按钮时收起其它下拉
$(this).parent().siblings().removeClass("zIndex");//取消其它下拉的层优先级让上面的层永远在最上层
$(this).prev().slideDown("fast");
return false;
});
$(".myli").click(function(){
$(this).parent().parent().find(".selected").val($(this).find("a").html());//给下拉框赋值
$(".option-wrap").slideUp("fast",function(){
$(".select").removeClass("zIndex");
});
return false;
});
$(".myliz").click(function(){
if($(this).attr("className").indexOf("myliz_bg")<0)
{
$(this).parent().find(".myliz_no").removeClass("myliz_no").removeClass("myliz_bl").addClass("myliz_bl");
$(this).removeClass("myliz_bg").addClass("myliz_bg");
}else
{
$(this).parent().find(".myliz_bl").removeClass("myliz_no").removeClass("myliz_bl").addClass("myliz_no");
$(this).removeClass("myliz_bg");
}
return false;
});
$(".selected").click(function(){
$(this).parent().addClass("zIndex"); //给父div加一个zIndex提高层的优先级
$(this).parent().siblings().find("ul").slideUp("fast");//点击当前的下拉按钮时收起其它下拉
$(this).parent().siblings().removeClass("zIndex");//取消其它下拉的层优先级让上面的层永远在最上层
$(this).prev().slideDown("fast");
return false;
});
$(".qd").click(function(){
var ary=$(this).parent().find('input[type="text"]');
var reg=/^(\d{4})-(\d{2})-(\d{2})$/;
var ero="";
if(ary[0].value=="")
{
ero="开始日期不能为空！";
$(this).parent().find(".ero").html(ero);
return false;
}
if(!isDate_yyyyMMdd(ary[0].value)){
$(this).parent().find(".ero").html("请保证开始日期格式为yyyy-mm-dd或正确的日期!");
return false;
}
if(ary[1].value=="")
{
ero="截止日期不能为空！";
$(this).parent().find(".ero").html(ero);
return false;
}
if(!isDate_yyyyMMdd(ary[1].value)){
$(this).parent().find(".ero").html("请保证截止日期格式为yyyy-mm-dd或正确的日期!");
return false;
}
$(this).parent().parent().parent().parent().find(".selected").val(ary[0].value+"至"+ary[1].value);
setDisAll();
});
$(".qx").click(function(){
setDisAll();
return false;
});
$(".disdate_bl").click(function(){
return false;
});
// $('input[type="text"]').val("123")
$("body").click(function(){//点击body任意位置收起下拉菜单
setDisAll();
return false;
});
function setDisAll()
{
$(".option-wrap").slideUp("fast",function(){
$(".select").removeClass("zIndex");
$(".myliz").removeClass("myliz_bg");
$(".myliz_bl").removeClass("myliz_bl").addClass("myliz_no");
$(".ero").html("");
});
}
/**
* 判断是否为正确的日期格式。
* 日期格式为yyyy-MM-dd或者为yyyy/MM/dd。
*
* @param str 需要检查的日期字符串
* @return false : 传入的字符串不是正确日期格式
* 例如：22dkdk
* 2010-2-29
* true ：传入的字符串是正确日期格式
* 例如：2010-2-28
* 2010/2/28
* 2010-07-28
* 2010/7/28
* 2012-02-29
*
*/
function isDate_yyyyMMdd(str) {
var reg = /^([0-9]{1,4})(-|\/)([0-9]{1,2})\2([0-9]{1,2})$/;
var r = str.match(reg);
if(r==null)return false;
var d= new Date(r[1], r[3]-1,r[4]);
var newstr=d.getFullYear()+r[2]+(d.getMonth()+1)+r[2]+d.getDate();
var yyyy = parseInt(r[1], 10);
var mm = parseInt(r[3], 10);
var dd = parseInt(r[4], 10);
var compstr = yyyy+r[2]+mm+r[2]+dd;
return newstr==compstr;
}
});
</script>
<style type="text/css">
<!--样式 -->
#selectDiv {padding-top:10px;}
.select {width:147px;height:18px;border:1px solid #aaaaaa;margin:0 auto;position:relative;background:#fff;margin-bottom:5px;}
a.select_button {display:block;background:#D3D3D3;width:23px;height:20px;position:absolute;right:-2px;top:-1px;text-align:center;text-decoration:none;}
a.select_button:active{background:#D3D3D3;}
a.select_button:hover{background-color:#ffa500}
.option-wrap {position:absolute;width:147px;margin:0;padding:0;top:18px;display:none;border:1px solid #ccc;left:-1px;background:#fff;}
.option-wrap li {list-style:none;}
.option-wrap a {display:block;height:20px;font:12px/20px "宋体";color:#333;padding-left:10px;text-decoration:none;}
.option-wrap a:hover {background:#ccc;color:#fff;}
.selected {font:12px/20px "宋体";color:#333;margin:0;padding-top:2px;height:16px;border:none;}
.zIndex {z-index:10000;}
.disdate_bl{
width:140px;
display:block;
margin-top:5px;
font:12px/20px "宋体";color:#333;padding-left:10px;
}
.myliz_no{
display:none;
}
.myliz_bl{
display:block;
}
.myliz_bg{
background:#D3D3D3;
}
.text{
width:100px;
height:18px;
}
.qd{
height:22px;
font:12px/20px "宋体";color:#333;padding-left:10px;
margin-top:5px;
text-align:center;
width:40px;
padding-left:3px;
padding-top:0px;
}
.qx{
height:22px;
font:12px/20px "宋体";color:#333;padding-left:10px;
margin-top:5px;
text-align:center;
width:40px;
padding-left:3px;
padding-top:0px;
}
.ero{
color:red;
}
</style>
</head>
<body>
<div id="selectDiv">
<div class="select">
<input type="text" class="selected" value="请选择..." id="xxx" />
<ul class="option-wrap">
<li class="myli"><a href="#">今天</a></li>
<li class="myli"><a href="#">7天</a></li>
<li class="myli"><a href="#">最近30天</a></li>
<li class="myliz"><a href="#">自定义</a></li>
<li class="myliz_no">
<div class="disdate_bl">
<div class="ero"></div>
从:<input type="text" class="text" name="startTime" /><br />
到:<input type="text" class="text" name="endTime" />
<br />
<input type="button" class="qd" value="确定" ><input class="qx" type="button" value="取消" >
</div>
</li>
</ul>
<a class="select_button" href="javascript:void(0);">↓</a>
</div><!--select-->
</div>
<div id="selectDiv">
<div class="select">
<input type="text" class="selected" value="请选择..." id="xxx" />
<ul class="option-wrap">
<li class="myli"><a href="#">今天</a></li>
<li class="myli"><a href="#">7天</a></li>
<li class="myli"><a href="#">最近30天</a></li>
<li class="myliz"><a href="#">自定义</a></li>
<li class="myliz_no">
<div class="disdate_bl">
<div class="ero"></div>
从:<input type="text" class="text" name="startTime" /><br />
到:<input type="text" class="text" name="endTime" />
<br />
<input type="button" class="qd" value="确定" ><input class="qx" type="button" value="取消" >
</div>
</li>
</ul>
<a class="select_button" href="javascript:void(0);">↓</a>
</div><!--select-->
</div>
<div id="selectDiv">
<div class="select">
<input type="text" class="selected" value="请选择..." id="xxx" />
<ul class="option-wrap">
<li class="myli"><a href="#">今天</a></li>
<li class="myli"><a href="#">7天</a></li>
<li class="myli"><a href="#">最近30天</a></li>
<li class="myliz"><a href="#">自定义</a></li>
<li class="myliz_no">
<div class="disdate_bl">
<div class="ero"></div>
从:<input type="text" class="text" name="startTime" /><br />
到:<input type="text" class="text" name="endTime" />
<br />
<input type="button" class="qd" value="确定" ><input class="qx" type="button" value="取消" >
</div>
</li>
</ul>
<a class="select_button" href="javascript:void(0);">↓</a>
</div><!--select-->
</div>
<div id="selectDiv">
<div class="select">
<input type="text" class="selected" value="请选择..." id="xxx" />
<ul class="option-wrap">
<li class="myli"><a href="#">今天</a></li>
<li class="myli"><a href="#">7天</a></li>
<li class="myli"><a href="#">最近30天</a></li>
<li class="myliz"><a href="#">自定义</a></li>
<li class="myliz_no">
<div class="disdate_bl">
<div class="ero"></div>
从:<input type="text" class="text" name="startTime" /><br />
到:<input type="text" class="text" name="endTime" />
<br />
<input type="button" class="qd" value="确定" ><input class="qx" type="button" value="取消" >
</div>
</li>
</ul>
<a class="select_button" href="javascript:void(0);">↓</a>
</div><!--select-->
</div>
</body>
</html>
- myjquery.rar (44.7 KB)
- 下载次数: 9
发表评论
相关推荐
jQuery自定义下拉菜单插件dropkick是一款使用dropkick.js插件创建美丽优雅的自定义下拉菜单，多种样式供你选择。
使用jquery脚本，简单实现下拉菜单基本功能。
jQuery自定义select下拉菜单
jQuery自定义下拉菜单插件dropkick是一款使用dropkick.js插件创建美丽优雅的自定义下拉菜单，多种样式供你选择。
jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码
自定义下拉菜单jquery插件 自定义下拉菜单jquery插件
jQuery自定义下拉分类多选代码是一款基于jQuery Select制作的下拉框插件自定义下拉分类菜单，多选分类搜索功能代码。
dropkick.js是一个jQuery插件，创建美丽优雅的自定义下拉菜单。
jQuery自定义下拉框选择菜单 支持右键弹出菜单 jQuery自定义下拉框选择菜单 支持右键弹出菜单 jQuery自定义下拉框选择菜单 支持右键弹出菜单 jQuery自定义下拉框选择菜单 支持右键弹出菜单
dropkick.js是一个jQuery插件，创建美丽优雅的自定义下拉菜单。演示地址：http://www.jq22.com/jquery-info489
jQuery自定义右键弹出菜单代码是一款网页仿电脑桌面点击鼠标右键弹出下拉菜单选择代码，样式挺漂亮的。
jQuery微信自定义菜单设置功能代码是一款仿微信自定义二级下拉菜单设置功能下载。
jQuery自定义下拉框是一款经过美化的自定义下拉表单特效。
5种自定义下拉菜单；基于jquery 源码，简洁，html应用
jquery仿微信自定义二级下拉菜单设置功能
DropKick, 用于创建漂亮优雅和无痛苦自定义下拉菜单的jQuery插件 DropKick创建定制下拉框通常是一个繁琐的过程，需要大量的安装时间。 本机下拉框通常缺少键盘导航之类的便利。 DropKick消除了单调乏味，让你专注于...
jQuery自定义下拉菜单插件dropkick是一款使用dropkick.js插件创建的美丽优雅的自定义下拉菜单。
jQuery实现可自定义菜单内容的动画下拉菜单特效源码.zip