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 相关文章推荐
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
js实现按座位号抽奖
Apr 05 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
gulp构建小程序的方法步骤
May 31 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使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python中方法链的使用方法
2016/02/23 Python
Python基于当前时间批量创建文件
2020/05/07 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
销售经理工作职责范文
2013/12/03 职场文书
给老婆的保证书范文
2014/04/28 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
实习单位证明范例
2014/11/17 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
监护人证明
2015/06/19 职场文书
保外就医申请书范文
2015/08/06 职场文书