基于jquery的多功能软键盘插件


Posted in Javascript onJuly 25, 2012

支持查询功能的键盘和简单得软键盘,键盘样式完全在独立的css文件中定义,可以自行美化。

基于jquery的多功能软键盘插件

(支持从查询的软键盘)

基于jquery的多功能软键盘插件

(简单的软件盘)

插件的默认参数

jquery.fn.softkeyboard.defaults = { 
names: { 
_delbtn: "skbdel", 
_clearbtn: "skbclear", 
_querybtn: "skbquery", 
_closebtn: "skbclose", 
_letterbtn: "skbbtn", 
_maindiv: "skbsoftkeyboard", 
_leftdiv: "skbleft", 
_rightdiv: "skbright", 
_keyboarddiv: "skbkeyboard", 
_operationdiv: "skboperation", 
_codetxt: "skbcode", 
_resultsselect: "skbresults", 
_postparamcode: "sfbcode", 
_clearbtnviewname: "clear", 
_delbtnviewname: "delete", 
_querybtnviewname: "query", 
_closebtnviewname: "close" 
}, //插件的相关元素命名 
listmultiple: true, //select是否展开 
simplekeyboard: true, //是否显示大写字母 
onlykeyboard: false, //是否带查询功能 
maxlength: null, //可输入的最大长度 
requestdataurl: null, //查询数据的post地址 
oncompleted: function (data) { }, //完成时出发此时间 
onkeydown: function (data) { } //按键时出发此事件 
};

插件的使用方法
使用方法
<link href="softkeyboard.css" rel="stylesheet" type="text/css" /> 
<script src="jquery-1.6.2.js" type="text/javascript"></script> 
<script src="jquery.softkeyboard.js" type="text/javascript"></script>

在页面中加入一个文本框使用方法2
<input type="text" class="querytxt" />
为class为querytxt的文本框使用插件
<script type="text/javascript"> 
$(".querytxt").softkeyboard() 
</script>

更改相关参数
$(".querytxt").softkeyboard({ 
simplekeyboard: true, 
listmultiple: true, 
maxlength: 10, 
onkeydown: function (d) { alert(d) }, 
requestdataurl: "GetData.ashx", 
onlykeyboard: true 
})

其中GetData.ashx返回的json数据格式类似如下
[{code:"DL",name:"大连"},{code:"DT",name:"大同"},{code:"DL",name:"大理"}]
Javascript 相关文章推荐
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
利用JavaScript写一个简单计算器
Nov 27 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 #Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 #Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 #Javascript
原生js 秒表实现代码
Jul 24 #Javascript
javascript设计模式 接口介绍
Jul 24 #Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 #Javascript
js+xml生成级联下拉框代码
Jul 24 #Javascript
You might like
用PHP动态创建Flash动画
2006/10/09 PHP
第二节--PHP5 的对象模型
2006/11/16 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
做网页的一些技巧
2007/02/01 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
javascript中一些util方法汇总
2015/06/10 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
k-means 聚类算法与Python实现代码
2020/06/01 Python
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
卫校毕业生自我鉴定
2013/10/31 职场文书
党校学习心得体会范文
2014/09/09 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server