基于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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
pycharm创建一个python包方法图解
2019/04/10 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
学生手册家长评语
2014/02/10 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
高考备战决心书
2014/03/11 职场文书
村干部培训方案
2014/05/02 职场文书
事业单位考核材料
2014/05/21 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
整改通知书
2015/04/20 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
李强感恩观后感
2015/06/17 职场文书
单位接收证明格式
2015/06/18 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
英镑符号 £
2022/02/17 杂记