基于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 相关文章推荐
jQuery学习5 jQuery事件模型
Feb 07 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
详解Vue之父子组件传值
Apr 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中smarty区域循环的方法
2015/06/11 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
简单的php购物车代码
2020/06/05 PHP
JS 控制CSS样式表
2009/08/20 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
冰淇淋开店创业计划书
2014/02/01 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
企业总经理任命书
2014/06/05 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
党员自我评价范文2015
2015/03/03 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
2016党员党课心得体会
2016/01/07 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
vscode内网访问服务器的方法
2022/06/28 Servers