基于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 SELECT单选模拟jQuery.select.js
Nov 12 Javascript
jquery插件 cluetip 关键词注释
Jan 12 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
前端监听websocket消息并实时弹出(实例代码)
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 求质素(素数) 的实现代码
2011/04/12 PHP
php模拟post提交数据的方法
2015/02/12 PHP
CI框架附属类用法分析
2018/12/26 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
javascript获取当前ip的代码
2009/05/10 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
python代码区分大小写吗
2020/06/17 Python
简单的Python人脸识别系统
2020/07/14 Python
python定义具名元组实例操作
2021/02/28 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
英语师范专业毕业生自荐信
2013/09/21 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
家长建议怎么写
2014/05/15 职场文书
民政局个人整改措施
2014/09/24 职场文书
2014年仓库工作总结
2014/11/20 职场文书
中秋节慰问信
2015/02/15 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL