基于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 asp.net 用json格式返回自定义对象
Apr 07 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 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支付宝在线支付接口开发教程
2016/09/19 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
一些javascript一些题目的解析
2010/12/25 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
入党申请书自我鉴定
2013/10/12 职场文书
汽修专业学生自我鉴定
2013/11/16 职场文书
运动会领导邀请函
2014/01/10 职场文书
抽奖活动主持词
2014/03/31 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
企业务虚会发言材料
2014/10/20 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
JS setTimeout与setInterval的区别
2022/04/20 Javascript