- 浏览: 1773 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
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插件的详细介绍，...
本文将深入探讨如何利用jQuery来创建自定义的下拉菜单。 首先，我们需要了解HTML基础结构。一个简单的下拉菜单通常由`<select>`标签和一系列`<option>`标签组成。然而，为了实现更复杂的自定义效果，我们通常会用到...
要创建一个jQuery自定义下拉菜单，我们需要以下步骤： 1. **基础HTML结构**：创建一个包含`<option>`元素的`<select>`标签。每个`<option>`代表一个可选项目。例如： ```html 选项1 选项2 选项3 ``` 2. *...
jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码 jQuery select框美化自定义下拉菜单选择表单代码
jQuery自定义下拉菜单插件Dropkick是一种高效且美观的解决方案，用于替换浏览器原生的HTML下拉菜单。它利用JavaScript库jQuery的强大功能，为网页设计师提供了更多自定义选项，以提升用户界面的视觉吸引力和交互体验...
自定义下拉菜单jquery插件 自定义下拉菜单jquery插件
本文将深入探讨“jQuery自定义下拉分类多选代码”这个主题，帮助开发者了解如何创建一个功能丰富的下拉菜单，实现分类选择和搜索功能。 首先，我们来看“jQuery Select”。在网页开发中，`<select>`元素常用于创建...
本篇文章将深入探讨如何利用jQuery和dropkick.js插件来创建美观且易用的自定义下拉菜单。 首先，jQuery的核心优势在于它的API简洁易用，它通过简化DOM操作、事件处理和动画效果，让开发者能够快速实现复杂的网页...
在IT行业中，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax...这只是一个基本的示例，实际应用中可能需要根据具体需求进行调整和优化，比如添加自定义样式、支持多级下拉菜单等。
jQuery，作为一个轻量级的JavaScript库，因其简洁的API和丰富的功能，常被用来实现动态效果，包括下拉菜单的创建。本教程将详细讲解如何使用jQuery来实现一个下拉菜单，以及相关的注意事项。 首先，我们需要了解...
压缩包中的"jquery-drill-down-menu-plugin"可能是一个已经封装好的jQuery下拉菜单插件，使用它可以快速构建动画下拉菜单，减少自定义代码的工作量。通常，这样的插件会提供一些配置选项，如动画速度、方向、触发...
通过以上步骤，你可以将`dropkick.js` 成功集成到项目中，创建出与界面风格一致且功能强大的自定义下拉菜单。这个插件不仅简化了开发过程，还提供了丰富的自定义选项，使网页的交互体验更上一层楼。在实际应用中，...
jQuery自定义下拉框选择菜单 支持右键弹出菜单 jQuery自定义下拉框选择菜单 支持右键弹出菜单 jQuery自定义下拉框选择菜单 支持右键弹出菜单 jQuery自定义下拉框选择菜单 支持右键弹出菜单
在网页设计中，下拉菜单列表是常见的交互元素，它能有效地节省空间并提供便捷...这样不仅可以学习到如何创建自定义下拉菜单，还能了解到如何优化用户体验和提高代码质量。对于前端开发者来说，这些都是非常实用的技能。
在网页设计中，导航菜单是不可或缺的部分，尤其在大型网站中，多级下拉菜单能够有效地组织和展示复杂的层级结构。jQuery作为一种强大的JavaScript库，提供了简单且高效的API来实现这样的功能。本文将深入探讨如何...
但在CSS和jQuery的帮助下，我们可以创建自定义的、更具有视觉吸引力的下拉菜单。`index.html`可能包含了这样的HTML结构： ```html <li><a href="#">菜单项1 <li><a href="#">子菜单项1</a></li> <li><a ...
jQuery 渐变下拉菜单是一种常见的网页交互设计，它结合了JavaScript库jQuery的高效功能和美观的CSS渐变效果，为网站的导航菜单提供了一种动态且吸引人的展示方式。这种菜单在用户悬停或点击主菜单项时，会平滑地展开...
本文将深入探讨jQuery UI下拉菜单的实现、配置、自定义以及与其他组件的集成。 ### jQuery UI 下拉菜单的基础 jQuery UI的下拉菜单是基于其可交互部件（Widgets）框架构建的，通过`$.widget()`方法创建。下拉菜单...
《jQuery动画下拉菜单Smart Menu深度解析》 在网页设计中，下拉菜单是一种常见的交互元素，它能够有效地节省空间并提升用户体验。jQuery作为一个强大的JavaScript库，提供了丰富的功能来实现这种效果，其中“jQuery...