<![CDATA[Latest posts for the topic "jQuery圖形動態鍵盤使用範例"]]> https://forum.andowson.com/posts/list/5.page JForum - http://www.jforum.net jQuery圖形動態鍵盤使用範例
【範例】
Step 1：至http://keith-wood.name/keypad.html下載整包套件，主要使用到的檔案有以下幾個：
[code]jquery.plugin.js
jquery.keypad.js
jquery.keypad.alt.css
keypad.png[/code]

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

Step 3：將jquery.keypad.alt.css、jquery.plugin.js、jquery.keypad.js加入至html中，另外需加入google api提供的jquery.min.js。(PS.如果網站為https，則需將google api網址也改為https)
[code]<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>[/code]

Step 4：在html中編輯javascript
[code]<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>[/code]
註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為例
[code]<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">[/code]

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

再加入以下參數至.keypad()中，結果如附件圖2
[code]useThemeRoller: true[/code]

完整html如下：
[code]<!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>[/code]

]]> https://forum.andowson.com/posts/preList/642/1341.page https://forum.andowson.com/posts/preList/642/1341.page GMT