基于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 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
详解jquery和vue对比
Apr 16 jQuery
JavaScript中EventBus实现对象之间通信
Oct 18 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遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
js禁止表单重复提交
2017/08/29 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
职称自我鉴定
2013/10/15 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
旅游活动总结
2014/08/27 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
人与自然的观后感
2015/06/18 职场文书
表扬信范文
2019/04/22 职场文书
python获取对象信息的实例详解
2021/07/07 Python
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技