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 getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
关于延迟加载JavaScript
May 05 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
javascript Number 与 Math对象的介绍
Nov 17 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
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
利用Python实现图书超期提醒
2016/08/02 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
电厂厂长岗位职责
2014/01/02 职场文书
教师自我反思材料
2014/02/14 职场文书
大家访活动实施方案
2014/03/10 职场文书
环保项目建议书
2014/08/26 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
同意报考证明
2015/06/17 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript