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 相关文章推荐
关于文本框的一些限制控制总结~~
Apr 15 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
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
PHP4中实现动态代理
2006/10/09 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
php事件驱动化设计详解
2016/11/10 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
用Python实现协同过滤的教程
2015/04/08 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
python使用minimax算法实现五子棋
2019/07/29 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
python re.match()用法相关示例
2021/01/27 Python
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
经济类毕业生求职信
2014/06/26 职场文书
先进学校事迹材料
2014/12/30 职场文书
干部年终考核评语
2015/01/04 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS