Jquery插件之打造自定义的select标签


Posted in Javascript onNovember 30, 2011

首先看下效果

Jquery插件之打造自定义的select标签

<head> 
<title></title> 
<link type="text/css" rel="Stylesheet" href="JQSelect.css" /> 
<script type="text/javascript" src="jquery-1.2.6.js"></script> 
<script type="text/javascript" src="JQSelect.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("#test").jsScroll(); 
}) 
</script> 
</head> 
<body> 
<select id="test"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> </select>

比较简陋只是将select转成自定义的样式

现在只有2个参数可以设置

$(function() { 
$("#test").jsScroll({ showLength: 3, option_click: function() { alert("1"); } }); 
})

showLength:下拉框默认显示数量 ---默认显示5个

option_click:点击每一个option执行的事件--默认是将options的值绑定到input中
在线演示:http://demo.3water.com/js/2011/JQSelect/
打包下载:https://3water.com/jiaoben/40362.html

Javascript 相关文章推荐
在JavaScript中获取请求的URL参数
Dec 22 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
JS前端加密算法示例
Dec 22 Javascript
JavaScript验证知识整理
Mar 24 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 #Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 #Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 #Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 #Javascript
基于jquery的拖动布局插件
Nov 25 #Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 #Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
Python unittest单元测试框架总结
2018/09/08 Python
Python 获取div标签中的文字实例
2018/12/20 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
艺术设计专业个人求职信
2013/09/21 职场文书
教师自我鉴定范文
2013/11/10 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
校车安全责任书
2014/08/25 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
档案接收函格式
2015/01/30 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers