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 日期时间 转换的方法
Feb 21 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
详解Js模块化的作用原理和方案
Apr 29 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语法(3)
2006/10/09 PHP
php mysql索引问题
2008/06/07 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
PHP children()函数讲解
2019/02/03 PHP
php intval函数用法总结
2019/04/14 PHP
js键盘事件的keyCode
2014/07/29 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
python+opencv识别图片中的圆形
2020/03/25 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
python解包概念及实例
2021/02/17 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
C#面试常见问题
2013/02/25 面试题
会计辞职信范文
2014/01/15 职场文书
民生工程实施方案
2014/03/22 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书