基于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 相关文章推荐
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
javascript实现前端成语点击验证
Jun 24 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/07/08 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
python实现员工管理系统
2018/01/11 Python
python中map的基本用法示例
2018/09/10 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
移动通信行业实习自我鉴定
2013/09/28 职场文书
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
办公室文书岗位职责
2013/12/16 职场文书
物业管理计划书
2014/01/10 职场文书
计算机软件专业求职信
2014/06/10 职场文书
精神文明建设标语
2014/06/16 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL