基于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 相关文章推荐
可输入的下拉框
Jun 19 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
openlayers实现地图弹窗
Sep 25 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中常用编辑器推荐
2007/01/02 PHP
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
php邮件发送的两种方式
2020/04/28 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
提高jQuery性能的十个诀窍
2013/11/14 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python中的index()方法使用教程
2015/05/18 Python
python中函数默认值使用注意点详解
2016/06/01 Python
Python图算法实例分析
2016/08/13 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
python保留小数位的三种实现方法
2020/01/07 Python
python对文件的操作方法汇总
2020/02/28 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
应届生服装设计自我评价
2013/09/20 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
离职告别感言
2015/08/04 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技