多种css3简洁实用表单特效代码 - JQuery/js插件 - 科蚁网
请选择 进入手机版 | 继续访问电脑版

多种css3简洁实用表单特效代码

[复制链接]
科蚁网小编 发表于 2015-7-7 15:50:44 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
JQuery/js插件信息(点击图片可以放大)
科蚁网发布的资源,版权归原作者所有,仅供学习交流,请勿用于商业用途。

应用终端: 传统PC 

资源级别: 免费资源

素材来源: 网络收集

推荐等级: ★★★★★

兼容浏览器: IE9 IE10 IE11 谷歌 火狐 欧朋 Safari 360 搜狗 

 

科蚁网温馨提示 1、本版块发布的JQuery/js插件均来自互联网,版权归原作者所有,科蚁网仅为存储空间。
2、科蚁网资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
3、如有侵犯您的版权,请及时联系2054226023#qq.com(#换@),我们将尽快做删除处理。
4、如果您发现科蚁网资源无法下载或链接失效或其他关于科蚁网站的问题,请到 站务中心区 发帖,我们将及时处理。

马上注册成为科蚁网会员,即可免费下载和分享手机建站资源!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
jquery/sort/18/" target="_blank" class="relatedlink">特效代码&formhash=34167ca5" target="_blank" rel="nofollow" style="text-decoration:none;"> 请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

文件名:多种css3简洁实用表单jquery/sort/18/" target="_blank" class="relatedlink">特效代码 
下载次数:2    下载所需积分:5 枚资源币
下载权限: 新手上路  [如何获取资源币]   [科蚁币]  可 [兑换资源币]  


代码:
  1. <div id="nav">
  2.                 <a class="current" href="index.html">Main Demo</a>
  3.                 <a href="basic.html">Basic</a>
  4.                 <a href="mobile.html">Mobile</a>
  5.                 <a href="layouts.html">Layouts</a>
  6.                 <a href="scramble.html">Scramble</a>
  7.                 <a href="navigate.html">Navigate</a>
  8.                 <a href="calculator.html">Calculator</a>

  9.         </div>
  10.         <!-- End Links -->

  11.         <h1>Virtual Keyboard</h1>
  12.        

  13.         <ul id="console">
  14.                 <li>...</li>
  15.                 <li>...</li>
  16.                 <li>...</li>
  17.                 <li>...</li>
  18.                 <li>...</li>
  19.         </ul>
  20. <h3>Click on the keyboard title, then scroll down to see its code</h3>

  21.         <div class="block">
  22.                 <h2><span class="tooltip" title="Click to see code">QWERTY Text</span></h2>
  23.                 <input id="text" class="qwerty" type="text" placeholder="Enter something...">
  24.                 <br>
  25.                 <small>
  26.                         * Placeholder (watermark).<br>
  27.                         * Autocomplete.
  28.                 </small>
  29.                 <div class="code ui-corner-all">
  30.                         <pre class="html"><!-- HTML -->
  31. <input class="qwerty" type="text" placeholder="Enter something..."></pre>
  32. <pre class="js">
  33. // Script
  34. // Autocomplete demo
  35. var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
  36. "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript",
  37. "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];

  38. $('.qwerty:eq(0)')
  39. .keyboard({ layout: 'qwerty' })
  40. .autocomplete({
  41.   source: availableTags
  42. })
  43. .addAutocomplete()
  44. .addTyping();</pre>
  45.                 </div>
  46.         </div>

  47.         <div class="block">
  48.                 <h2><span class="tooltip" title="Click to see code">QWERTY Password</span> <img id="passwd" class="tooltip" title="Click to open the virtual keyboard" src="demo/keyboard.png"></h2>
  49.                 <input id="password" class="qwerty" type="password">
  50.                 <div class="code ui-corner-all">
  51.                         <pre class="html"><!-- HTML -->
  52. <input class="qwerty" type="password"></pre>
  53. <pre class="js">
  54. // Script
  55. $('.qwerty:eq(1)')
  56. .keyboard({
  57.   openOn : null,
  58.   stayOpen : true,
  59.   layout : 'qwerty'
  60. })
  61. .addTyping();
  62. $('#passwd').click(function(){
  63. $('.qwerty:eq(1)').getkeyboard().reveal();
  64. });</pre>
  65.                 </div>
  66.                 <br>
  67.                 <small>
  68.                         * Click icon to open keyboard.<br>
  69.                         * Stay open until accept/cancel.<br>
  70.                         * Key hover disabled in this type.
  71.                 </small>
  72.         </div>

  73.         <div class="block">
  74.                 <h2><span class="tooltip" title="Click to see code">QWERTY Text Area</span></h2>
  75.                 <textarea id="textarea" class="qwerty"></textarea>
  76.                 <br>
  77.                 <small>
  78.                         * Locked input (no manual input).<br>
  79.                         * Position the hidden caret!<br>
  80.                         * Known readonly bug in Safari.
  81.                 </small>
  82.                 <div class="code ui-corner-all">
  83.                         <pre class="html"><!-- HTML -->
  84. <textarea class="qwerty"></textarea></pre>
  85. <pre class="js">
  86. // Script
  87. $('.qwerty:eq(2)')
  88. .keyboard({
  89.   layout   : 'qwerty',
  90.   lockInput: true // prevent manual keyboard entry
  91. })
  92. .addTyping();</pre>
  93.                 </div>
  94.         </div>

  95.         <div class="block">
  96.                 <h2><span class="tooltip" title="Click to see code">International</span> <img id="inter-type" class="tooltip" title="Try out the typing extension!" src="demo/keyboard.png"></h2>
  97.                 <textarea id="inter"></textarea>
  98.                 <div class="code ui-corner-all">
  99.                         <pre class="html"><!-- HTML -->
  100. <textarea id="inter"></textarea></pre>
  101. <pre class="js">
  102. // Script
  103. $('#inter')
  104. .keyboard({ layout: 'international' })
  105. .addTyping();

  106. // Script - typing extension
  107. $('#inter').getkeyboard().reveal().typeIn('\tHello \b\n\tWorld', 500);</pre>
  108.                 </div>
  109.         </div>

  110.         <div class="block">
  111.                 <h2><span class="tooltip" title="Click to see code">Alphabetical</span></h2>
  112.                 <textarea id="alpha"></textarea>
  113.                 <div class="code ui-corner-all">
  114.                         <pre class="html"><!-- HTML -->
  115. <textarea id="alpha"></textarea></pre>
  116. <pre class="js">
  117. // Script
  118. $('#alpha')
  119. .keyboard({ layout: 'alpha' })
  120. .addTyping();</pre>
  121.                 </div>
  122.         </div>

  123.         <div class="block">
  124.                 <h2><span class="tooltip" title="Click to see code">Dvorak</span></h2>
  125.                 <textarea id="dvorak"></textarea>
  126.                 <div class="code ui-corner-all">
  127.                         <pre class="html"><!-- HTML -->
  128. <textarea id="dvorak"></textarea></pre>
  129. <pre class="js">
  130. // Script
  131. $('#dvorak')
  132. .keyboard({ layout: 'dvorak' })
  133. .addTyping();</pre>
  134.                 </div>
  135.         </div>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则