練功房推薦書單

  • 猛虎出柙雙劍合璧版:最新 OCA / OCP Java SE 7 Programmer 專業認證
  • 流浪教師存零股存到3000萬
  • SCJP 6.0認證教戰手冊(第二版)Oracle Certified Professional Java Programmer(附光碟)
  • 小資女艾蜜莉:我的資產翻倍存股筆記
jQuery圖形動態鍵盤使用範例  RSS feed
討論區首頁 » 網頁程式設計 Web Development
發表人 內容
bious3927

十級學員

註冊時間: 2011-06-02 11:14:41
文章: 5
離線
下面介紹jQuery Keypad的使用 (網站:http://keith-wood.name/keypad.html),範例畫面如附件圖1

【範例】
Step 1:至http://keith-wood.name/keypad.html下載整包套件,主要使用到的檔案有以下幾個:
jquery.plugin.js
jquery.keypad.js
jquery.keypad.alt.css
keypad.png


Step2:編輯html,新增二個文字輸入方塊,帳號及密碼
<!DOCTYPE html>
<html>
<body>
<p><input type="text" id="accKeypad"></p>
<p><input type="password" id="pwdKeypad"></p>
</body>
</html>


Step 3:將jquery.keypad.alt.css、jquery.plugin.js、jquery.keypad.js加入至html中,另外需加入google api提供的jquery.min.js。(PS.如果網站為https,則需將google api網址也改為https)
<link rel="stylesheet" href="jquery.keypad.alt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.plugin.js"></script>
<script src="jquery.keypad.js"></script>


Step 4:在html中編輯javascript
<script>
$(function () {
  $('#accKeypad,#pwdKeypad').keypad({keypadOnly: false, 
    randomiseOther: true, randomiseNumeric: true, randomiseAlphabetic: true, randomiseOther: true,
    showOn: 'button', buttonImageOnly: true, buttonImage: 'keypad.png', showAnim: '',
    layout: $.keypad.qwertyLayout});           
});
</script>

註1:如果想要使每次鍵盤上的文字位置不同,除上述方式外(randomiseOther: true, randomiseNumeric: true, randomiseAlphabetic: true, randomiseOther: true),也可改用 randomiseAll: true,但數字鍵就不會固定在右方區塊。
註2:「showOn: 'button', buttonImageOnly: true, buttonImage: 'keypad.png'」:點選鍵盤圖示才顯示動態鍵盤,若想改為當游標出現在輸入框時也顯示,則改成「showOn: 'both', buttonImage: 'keypad.png'」。
註3:「showAnim: ''」:指鍵盤顯示時不使用特效。


Step 5:如想更換鍵盤外觀,可使用google api提供的主題,先加入以下css,以smoothness為例
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">


其他主題可參考jQuery keypad網站之Styling頁籤中,「ThemeRoller styling:」的地方,將上面css網址改為其他名稱即可,例如欲改為blitzer,則修改成下面的路徑:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/blitzer/jquery-ui.css


再加入以下參數至.keypad()中,結果如附件圖2
useThemeRoller: true


完整html如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Keypad</title>
<link rel="stylesheet" href="jquery.keypad.alt.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.plugin.js"></script>
<script src="jquery.keypad.js"></script>
<script>
$(function () {
  $('#accKeypad,#pwdKeypad').keypad({useThemeRoller: true, keypadOnly: false, 
    randomiseOther: true, randomiseNumeric: true, randomiseAlphabetic: true, randomiseOther: true,
    showOn: 'button', buttonImageOnly: true, buttonImage: 'keypad.png', showAnim: '',
    layout: $.keypad.qwertyLayout});           
});
</script>
</head>
<body>
<p><input type="text" id="accKeypad"></p>
<p><input type="password" id="pwdKeypad"></p>
</body>
</html>


[Thumb - 圖2.png]
 檔案名稱 圖2.png [Disk] 下載
 描述 沒有檔案註解存在
 檔案大小 57 Kbytes
 下載次數:  1 次

[Thumb - 圖1.png]
 檔案名稱 圖1.png [Disk] 下載
 描述 沒有檔案註解存在
 檔案大小 82 Kbytes
 下載次數:  1 次

 
討論區首頁 » 網頁程式設計 Web Development
前往: