基于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 相关文章推荐
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
详解webpack 多入口配置
Jun 16 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
详解 TypeScript 枚举类型
Nov 02 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
Linux中Python 环境软件包安装步骤
2016/03/31 Python
python实现分页效果
2017/10/25 Python
Python3 处理JSON的实例详解
2017/10/29 Python
快速了解Python相对导入
2018/01/12 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
django自定义模板标签过程解析
2019/12/14 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
椰子猫砂:CatSpot
2018/08/27 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
部队党性分析材料
2014/02/16 职场文书
法律专业自荐信
2014/06/03 职场文书
售票员岗位职责
2015/02/15 职场文书
公司放假通知范文
2015/04/14 职场文书
小学语文国培研修日志
2015/11/13 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python