基于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判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
JavaScript对象原型链原理详解
Feb 05 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
10分钟学会js处理json的常用方法
Dec 06 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
基于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的开合式多级菜单程序
2006/10/09 PHP
php debug 安装技巧
2011/04/30 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
php分页查询的简单实现代码
2017/03/14 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
nodejs中实现sleep功能实例
2015/03/24 NodeJs
Javascript中作用域的详细介绍
2016/10/06 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
python实现网页链接提取的方法分享
2014/02/25 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
python的多重继承的理解
2017/08/06 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
Django 大文件下载实现过程解析
2019/08/01 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
Java程序员常见面试题
2015/07/16 面试题
暑期实践思想汇报
2014/01/06 职场文书
企业法人授权委托书
2014/04/03 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
致运动员加油稿
2015/07/21 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python