基于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 相关文章推荐
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
vue如何判断dom的class
Apr 26 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
Yii框架登录流程分析
2014/12/03 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python编程开发之日期操作实例分析
2015/11/13 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
自我鉴定模板
2013/10/29 职场文书
资产评估专业学生的自我鉴定
2013/11/14 职场文书
财务会计实习报告体会
2013/12/20 职场文书
学生实习介绍信
2014/01/15 职场文书
高三体育教学反思
2014/01/29 职场文书
安全目标责任书
2014/07/22 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
员工离职感谢信
2015/01/22 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python