基于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插件制作 表单验证实现代码
Aug 17 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
基于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 FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
Python连接字符串过程详解
2020/01/06 Python
python3字符串输出常见面试题总结
2020/12/01 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
allbeauty美国:英国在线美容店
2019/03/11 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
个人素质的自我评价分享
2013/12/16 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
党支部意见范文
2015/06/02 职场文书
基层党建工作简报
2015/07/21 职场文书
学习委员竞选稿
2015/11/20 职场文书
培训心得体会怎么写
2016/01/25 职场文书
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL