澳门新浦京8455com有限公司欢迎您!

jquery比较简洁的软键盘特效实现方法,jquery键盘特效

时间:2020-01-02 08:32

本文实例讲述了jquery比较简洁的软键盘特效实现方法。分享给大家供大家参考。具体实现方法如下:

jquery比较简洁的软键盘特效实现方法

 这篇文章主要介绍了jquery比较简洁的软键盘特效实现方法,实例分析了jQuery实现软键盘特效的具体方法与功能效果,非常具有实用价值,需要的朋友可以参考下

 

 

本文实例讲述了jquery比较简洁的软键盘特效实现方法。分享给大家供大家参考。具体实现方法如下:

运行效果图如下:

图片 1

  1. html主要部分如下:

代码如下:

<div id="container">
<textarea id="write" rows="6" cols="60"></textarea>
<ul id="keyboard">
<li class="symbol"><span class="off">`</span><span class="on">~</span></li>
<li class="symbol"><span class="off">1</span><span class="on">!</span></li>
<li class="symbol"><span class="off">2</span><span class="on">@</span></li>
<li class="symbol"><span class="off">3</span><span class="on">#</span></li>
<li class="symbol"><span class="off">4</span><span class="on">$</span></li>
<li class="symbol"><span class="off">5</span><span class="on">%</span></li>
<li class="symbol"><span class="off">6</span><span class="on">^</span></li>
<li class="symbol"><span class="off">7</span><span class="on">&</span></li>
<li class="symbol"><span class="off">8</span><span class="on">*</span></li>
<li class="symbol"><span class="off">9</span><span class="on">(</span></li>
<li class="symbol"><span class="off">0</span><span class="on">)</span></li>
<li class="symbol"><span class="off">-</span><span class="on">_</span></li>
<li class="symbol"><span class="off">=</span><span class="on">+</span></li>
<li class="delete lastitem">delete</li>
<li class="tab">tab</li>
<li class="letter">q</li>
<li class="letter">w</li>
<li class="letter">e</li>
<li class="letter">r</li>
<li class="letter">t</li>
<li class="letter">y</li>
<li class="letter">u</li>
<li class="letter">i</li>
<li class="letter">o</li>
<li class="letter">p</li>
<li class="symbol"><span class="off">[</span><span class="on">{</span></li>
<li class="symbol"><span class="off">]</span><span class="on">}</span></li>
<li class="symbol lastitem"><span class="off"></span><span class="on">|</span></li>
<li class="capslock">caps lock</li>
<li class="letter">a</li>
<li class="letter">s</li>
<li class="letter">d</li>
<li class="letter">f</li>
<li class="letter">g</li>
<li class="letter">h</li>
<li class="letter">j</li>
<li class="letter">k</li>
<li class="letter">l</li>
<li class="symbol"><span class="off">;</span><span class="on">:</span></li>
<li class="symbol"><span class="off">'</span><span class="on">"</span></li>
<li class="return lastitem">return</li>
<li class="left-shift">shift</li>
<li class="letter">z</li>
<li class="letter">x</li>
<li class="letter">c</li>
<li class="letter">v</li>
<li class="letter">b</li>
<li class="letter">n</li>
<li class="letter">m</li>
<li class="symbol"><span class="off">,</span><span class="on"><</span></li>
<li class="symbol"><span class="off">.</span><span class="on">></span></li>
<li class="symbol"><span class="off">/</span><span class="on">?</span></li>
<li class="right-shift lastitem">shift</li>
<li class="space lastitem"> </li>
</ul>
</div>

 

  1. jQuery代码部分需要引入两个文件,具体如下:

?

1

2

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/keyboard.js"></script>

完整实例代码点击此处本站下载。

希望本文所述对大家的jQuery程序设计有所帮助。

这篇文章主要介绍了jquery比较简洁的软键盘特效实现方法,实例分析了jQuery实现软键盘特效的具体方法...

jquery比较简洁的软键盘特效实现方法,jquery键盘特效

本文实例讲述了jquery比较简洁的软键盘特效实现方法。分享给大家供大家参考。具体实现方法如下:

运行效果图如下:

图片 2

  1. html主要部分如下:
    复制代码 代码如下:<div id="container">
     <textarea id="write" rows="6" cols="60"></textarea>
     <ul id="keyboard">
      <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
      <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
      <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
      <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
      <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
      <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
      <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
      <li class="symbol"><span class="off">7</span><span class="on">&</span></li>
      <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
      <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
      <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
      <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
      <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
      <li class="delete lastitem">delete</li>
      <li class="tab">tab</li>
      <li class="letter">q</li>
      <li class="letter">w</li>
      <li class="letter">e</li>
      <li class="letter">r</li>
      <li class="letter">t</li>
      <li class="letter">y</li>
      <li class="letter">u</li>
      <li class="letter">i</li>
      <li class="letter">o</li>
      <li class="letter">p</li>
      <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
      <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
      <li class="symbol lastitem"><span class="off"></span><span class="on">|</span></li>
      <li class="capslock">caps lock</li>
      <li class="letter">a</li>
      <li class="letter">s</li>
      <li class="letter">d</li>
      <li class="letter">f</li>
      <li class="letter">g</li>
      <li class="letter">h</li>
      <li class="letter">j</li>
      <li class="letter">k</li>
      <li class="letter">l</li>
      <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
      <li class="symbol"><span class="off">'</span><span class="on">"</span></li>
      <li class="return lastitem">return</li>
      <li class="left-shift">shift</li>
      <li class="letter">z</li>
      <li class="letter">x</li>
      <li class="letter">c</li>
      <li class="letter">v</li>
      <li class="letter">b</li>
      <li class="letter">n</li>
      <li class="letter">m</li>
      <li class="symbol"><span class="off">,</span><span class="on"><</span></li>
      <li class="symbol"><span class="off">.</span><span class="on">></span></li>
      <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
      <li class="right-shift lastitem">shift</li>
      <li class="space lastitem"> </li>
     </ul>
    </div>

  2. jQuery代码部分需要引入两个文件,具体如下:

完整实例代码点击此处本站下载。

希望本文所述对大家的jQuery程序设计有所帮助。

本文实例讲述了jquery比较简洁的软键盘特效实现方法。分享给大家供大家参考。具体实...

支持查询功能的键盘和简单得软键盘,键盘样式完全在独立的css文件中定义,可以自行美化。

  1. html主要部分如下:复制代码 代码如下:

相关文章

相关搜索:

今天看啥

搜索技术库

返回首页

  • 基于jQuery图片元素网格布局插件,jquery网格布
  • 九款酷炫基于jquery实现的应用及源码,九款
  • JQuery中DOM加载与事件执行实例分析,jquerydo
  • JQuery中DOM事件绑定用法详解,jquerydom
  • JQuery中DOM事件合成用法实例分析,jquerydom
  • JQuery中DOM事件冒泡实例分析,jquerydom

相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

插件的默认参数 复制代码 代码如下: 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 { }, //完成时出发此时间 onkeydown: function { } //按键时出发此事件 }; 插件的使用方法 使用方法 复制代码 代码如下: