基于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控制框架刷新
Aug 01 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
vant中的toast轻提示实现代码
Nov 04 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 session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
Javascript面向对象之四 继承
2011/02/08 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
Python3 入门教程 简单但比较不错
2009/11/29 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
python爬虫基础知识点整理
2020/06/02 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
Ajax的优点和缺点
2014/11/21 面试题
办公文员的工作岗位职责
2013/11/12 职场文书
生产厂长岗位职责
2014/02/21 职场文书
市场营销战略计划书
2014/05/06 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
护士2015年终工作总结
2015/04/29 职场文书
python 网络编程要点总结
2021/06/18 Python
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL