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 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
js创建对象的方法汇总
Jan 07 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
React styled-components设置组件属性的方法
Aug 07 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
基于JS判断对象是否是数组
Jan 10 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 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自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
使用Apache的rewrite
2021/03/09 Servers
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
python基于socket实现网络广播的方法
2015/04/29 Python
python 中split 和 strip的实例详解
2017/07/12 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
python读取图片任意范围区域
2019/01/23 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
Python如何生成xml文件
2020/06/04 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
入党思想汇报
2014/01/05 职场文书
公司薪酬管理制度
2014/01/31 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
股指期货心得体会
2014/09/13 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python
python manim实现排序算法动画示例
2022/08/14 Python