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新手语法小结
Jun 15 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
javascript中setInterval的用法
Jul 19 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
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 exif扩展方法开启详解
2014/07/28 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
儿童学习python的一些小技巧
2018/05/27 Python
详解python中的json和字典dict
2018/06/22 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
求职信范文怎么写
2014/01/29 职场文书
广播节目策划方案
2014/05/23 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript