會員註冊 / 登入  |  電腦版  |  Jump to bottom of page

網頁程式設計 Web Development » jQuery圖形動態鍵盤使用範例

發表人: bious3927, 十級學員
2016-09-14 16:12:22
下面介紹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
描述 沒有檔案註解存在
檔案大小 57 Kbytes
下載次數 1 次
[Disk] 下載

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





會員註冊 / 登入  |  電腦版  |  Jump to top of page