基于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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
js+html实现点名系统功能
Nov 05 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/06/09 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Python运行异常管理解决方案
2020/03/09 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
Bootstrap 学习分享
2012/11/12 HTML / CSS
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
餐饮主管岗位职责
2013/12/10 职场文书
办理居住证介绍信
2014/01/15 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
医疗纠纷协议书
2014/04/16 职场文书
华山导游词
2015/02/03 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP