前言 最近几天在公司做了个后台管理系统的小模块，其中有个功能是实现复选框的全选和全不选，用bootstrap和jQuery来实现。效果是这样：因为是内部用，样式也不要求太好看，直接上代码。 示例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><META content="IE=11.0000" http-equiv="X-UA-C...
一般我们通常使用select制作下拉菜单，但是H5之后，datalist也可以充当select的角色，而且两者还有一点小的不同。 对于select来说，select的下拉菜单是供用户选择的，用户只能选择其中的选项不能自己添加。 但是datalist就不同了，datalist不仅可以供用户选择，用户还可以自己输入，而且datalist还可以达到模糊匹配的效果，使用很方便。 据代码示例如下： <input type="text" list="addr"/> <datalist id="addr"> <option value="上...
本文实例讲述了jQuery实现的checkbox级联选择下拉菜单效果。分享给大家供大家参考，具体如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <script language="JavaScript" src="jquery-1.4.2.min.js"></script> </head> <body> <!--table 一行一列：table 三行一列：table 一行一列：table 三行一列：table--><table width="156"><tr><td><table width="152"><tr width=...
jQuery是一款流行已久的Javascript框架,确实很好用。今天我给大家介绍jquery下拉菜单的实现代码，具体代码如下所述：<!DOCTYPE html> <head lang="en"> <meta charset="UTF-8"> * { padding: 0; margin: 0; ul { list-style: none; .wrap { width: 730px; height: 50px; margin: 100px auto 0; background-color: lightgray; padding-left: 10px; border-radius: 10px; padding-bottom: 3px; .wrap li { float: left; width: 130px...
本文实例讲述了jQuery实现的无限级下拉菜单功能。分享给大家供大家参考，具体如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单(无限级)</title> <style> *{padding: 0;margin: 0; } li{list-style-type: none; } body{margin: 50px; } .hide{display: none; } .menu{cursor: pointer; } </style> </head> <body> <ul><li class="menu" style="float: left;"><span>一级菜单</span><ul clas...
本文实例讲述了jQuery实现的导航下拉菜单效果。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航</title> <link rel="stylesheet" type="text/css" href="css/basic.css" ...
本文实例讲述了jQuery实现的纵向下拉菜单。分享给大家供大家参考，具体如下： 当我们浏览网页和使用word编辑一下文字的时候，我们都能看见横向下拉的身影，有了横向菜单，我们能对整个界面进行更好的布局，达到我们想要的效果，那么这些横向菜单式如何用代码实现的，当我们浏览或使用的时候她又是如何呈现在我们面前的，学习了JQuery之后，小编渐渐看到她美丽的容颜，接下来，小编主要讲解如何通过jquery实现纵向下拉菜单。 第一步...
工程分享：模块1：下拉菜单的实时显示最近一周时间：//显示日期下拉选框 for(var i=0;i<7;i++){ $("#choose1>option:eq("+i+")").html(GetDateStr(-i)); $("#choose1>option:eq("+i+")").attr("value",GetDateStr(-i));//该语句为了便于下拉选中的数据的值 } //这个是上述的对应函数 //以下为日期下拉选择框自动调整 function GetDateStr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+AddDayCount);//获取Ad...
本文实例讲述了jQuery实现的导航下拉菜单效果。分享给大家供大家参考，具体如下： 1.效果如图所示：2.html代码： <div id="navigation"><ul><li><a href="#">首 页</a></li><li><a href="#">衬 衫</a><ul><li><a href="#">短袖衬衫</a></li><li><a href="#">长袖衬衫</a></li><li><a href="#">无袖衬衫</a></li></ul></li><li><a href="#">卫 衣</a><ul><li><a href="#">开襟卫衣</a></li><li><a href="#">套头卫衣</a></li></ul><...
随着电商的火爆，这多级联动下拉菜单体现的更加充分，最明显的就是地址的多级联动下拉选择，所以这里就简单的分享一下 jQuery cxSelect 多级联动下拉菜单 cxSelect 是基于 jQuery 的多级联动菜单插件，适用于省市、商品分类等联动菜单。 列表数据通过 AJAX 获取（需要在服务器环境运行），也可以使用变量自定义，数据内容使用 JSON 格式。 提供国内省市县数据（数据来源：basecss/cityData Date: 2014.03.31） 个人一直都有习惯，当...
用jquery模拟一淘上面的搜索下拉的功能，利用css3做箭头的动画效果。 JS代码：/** 模拟搜索下拉select* 默认调用方式：$(el).setSelect({* optionList: [], //这里是下拉的选项，如[aa,bb]* hiddenInput: #optionHidden, //隐藏的input获取选中后的值，供表单提交时传值* getOption: #sOptionBtn,* callback: function(option){}* })* */ (function ($) {$.fn.setSelect = function(options){var opt = $.extend({optionList: [],g...
Bootstrap是当下流行的前端UI组件库之一。利用Bootstrap，可以很方便的构造美观、统一的页面。把设计师从具体的UI编码中解放出来。Bootstrap提供了不少的前端UI组件。带下拉菜单的文本框就是其中之一，效果图如下（真要自己完全设计，还得费一番功夫）关于该组件的详情参看Bootstrap官网、带下拉菜单的文本框 看到上面的效果图，使我想到WinForm编程中的DropDownList控件。不过，和DropDownList控件相比，还缺少以下内容 1、当点击...
jquery 无限极下拉菜单的简单实例(精简浓缩版) <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>脚本之家 www.gxlcms.com</title> <script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function(){$(".menu li").hover(function(){$(this).children("ul").show(); //mouseover},function()...
本文实例为大家分享了jquery三级下拉菜单的具体实现代码，供大家参考，具体内容如下 在写这个的时候，首先要捋顺思路。点一个菜单的时候，其他的要闭合，点一级菜单的时候，二三级菜单要闭合，等等。 大致代码如下： <body><aside><ul class="one"><li> <a href="#" class="a">目录A</a><ul class="two" style="display: none"><li><a href="#" class="a">二级目录A</a><ul class="three" style="display: none"><li><a href="#">...
本文实例讲述了jQuery实现的精美平滑二级下拉菜单效果。分享给大家供大家参考，具体如下： 这是一款jQurey实现的向下二级导航菜单效果。效果非常不错，由上到下平滑延伸，给人的感觉协调唯美！js与html代码结构简单明了，便于使用与修改！ 运行效果截图如下：具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www...