jQuery 自定义下拉框(DropDown)附源码下载


Posted in Javascript onJuly 22, 2016

先给大家展示下效果图,喜欢的朋友可以下载源码哦

jQuery 自定义下拉框(DropDown)附源码下载

jQuery 自定义下拉框(DropDown)附源码下载

效果演示   源码下载

<section class="main">
 <div class="wrapper-demo">
 <div id="dd" class="wrapper-dropdown-1" tabindex="1">
 <span>手册网</span>
 <ul class="dropdown" tabindex="">
 <li><a href="#">jQuery特效</a></li>
 <li><a href="#">网站模板</a></li>
 </ul>
 </div>
 </div>
 </section>
</div>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
 function DropDown(el) {
 this.dd = el;
 this.placeholder = this.dd.children('span');
 this.opts = this.dd.find('ul.dropdown > li');
 this.val = '';
 this.index = -;
 this.initEvents();
 }
 DropDown.prototype = {
 initEvents: function() {
 var obj = this;
 obj.dd.on('click', function(event) {
 $(this).toggleClass('active');
 return false;
 });
 obj.opts.on('click', function() {
 var opt = $(this);
 obj.val = opt.text();
 obj.index = opt.index();
 obj.placeholder.text('Gender: ' + obj.val);
 });
 },
 getValue: function() {
 return this.val;
 },
 getIndex: function() {
 return this.index;
}
 }
 $(function() {
 var dd = new DropDown($('#dd'));
 $(document).click(function() {
 $('.wrapper-dropdown-1').removeClass('active');
 });
 });
</script>

以上所述是小编给大家介绍的jQuery 自定义下拉框(DropDown)附源码下载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript Perfection kill 测试及答案
Mar 23 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
php+js实现倒计时功能
Jun 02 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 #Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 #Javascript
高效Web开发的10个jQuery代码片段
Jul 22 #Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 #Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 #Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 #Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 #Javascript
You might like
php错误级别的设置方法
2013/06/17 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
python3 实现调用串口功能
2019/12/26 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
校园门卫岗位职责
2013/12/09 职场文书
职工运动会感言
2014/02/07 职场文书
同学聚会主持词
2014/03/18 职场文书
考察现实表现材料
2014/05/19 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
结婚老公保证书
2015/02/26 职场文书
合作协议书格式范本
2016/03/21 职场文书