HTMLでComboBoxのようなサンプル
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
[[FrontPage]]
入力可能なselectで、
Accsee等で見かけるComboBoxもどきのコントロールを作成しま...
prototype.jsを使用しています。
注意：あくまでもComboBoxもどきなので細かい部部の動作は本...
【使用方法】
・prototype.jsファイルと本ファイルをHTMLファイルに以下を...
<script src="js/prototype.js" type="text/javascript"></...
<script src="js/combobox.js" type="text/javascript"></s...
・初期化
呼び出し位置はheadタグ内で以下の様に記述します。
<script type="text/javascript">
<!--
window.onload = function (){
comboInit('pulldownList', 'pulldownText');
}
-->
</script>
・HTMLのサンプルコード
<div name="ComboBox">
<select id="pulldownList" name="pulldownList" >
<option> </option>
<option>0aaaaaaaaaaaaaaaaaaaaa</option>
<option>1aaaaaaaaaaaaaaaaaaaaa</option>
<option>2aaaaaaaaaaaaaaaaaaaaa</option>
<option>3aaaaaaaaaaaaaaaaaaaaa</option>
</select>
<input type="text" id="pulldownText" name="pulldo...
</div>
・動作ブラウザ
IE8、FF、クロム等
・補足事項
name属性はpirkaまたCGIなどで必要とするものです、無くても...
・JavaScriptコード
var pulldownText=null;
//////////////////////////////////////////////////////
// プルダウン押下ボタンを押したときの処理
function pulldownChangeEvent(e) {
var obj = Event.element(e);
$(pulldownText).value = obj.options[obj.selectedIndex]....
}
//////////////////////////////////////////////////////
// ComboBox初期化
function comboInit(selectID, textID) {
var pulldownHeight = 20;
var pulldownTextWidth = 100;
var pulldownBtnWidth = 17;
pulldownText = textID;
var list = $(selectID).absolutize();
var text = $(textID).absolutize();
// set list attr
list.style.height = pulldownHeight+'px';
list.style.width = (pulldownTextWidth+pulldownBtnWidth)+...
var tx = parseInt(list.style.width+0);
var ty = parseInt(list.style.height+0);
// set text attr
text.style.position = 'absolute';
text.style.left = list.style.left;
text.style.top = list.style.top;
text.style.width = (tx-pulldownBtnWidth)+'px';
text.style.height = list.style.height;
text.value = list.options[0].text;
Event.observe($(selectID), "change", pulldownChangeEven...
}
実際のHTMLです
<html>
<head>
<script type="text/javascript" src="/js/prototype.js"></...
<script type="text/javascript" src="/js/pirka.js"></scri...
<script type="text/javascript" src="/js/combobox.js"></s...
<script type="text/javascript" >
<!--
// 起動時の初期化
window.onload = function (){
comboInit('pulldownList', 'pulldownText');
}
-->
</script>
<style type="text/css">
</style>
<title>サンプル コンボボックスコントロール</title>
</head>
<body>
<center>
<form>
<table>
<tr>
<td>
<br>
<br>
</td>
<td>
<div name="ComboBox">
<select id="pulldownList" name="pulldownList" >
<option></option>
<option>0aaaaaaaaaaaaaaaaaaaaa</option>
<option>1aaaaaaaaaaaaaaaaaaaaa</option>
<option>2aaaaaaaaaaaaaaaaaaaaa</option>
<option>3aaaaaaaaaaaaaaaaaaaaa</option>
</select>
<input type="text" id="pulldownText" name="pulldo...
</div>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
終了行:
[[FrontPage]]
入力可能なselectで、
Accsee等で見かけるComboBoxもどきのコントロールを作成しま...
prototype.jsを使用しています。
注意：あくまでもComboBoxもどきなので細かい部部の動作は本...
【使用方法】
・prototype.jsファイルと本ファイルをHTMLファイルに以下を...
<script src="js/prototype.js" type="text/javascript"></...
<script src="js/combobox.js" type="text/javascript"></s...
・初期化
呼び出し位置はheadタグ内で以下の様に記述します。
<script type="text/javascript">
<!--
window.onload = function (){
comboInit('pulldownList', 'pulldownText');
}
-->
</script>
・HTMLのサンプルコード
<div name="ComboBox">
<select id="pulldownList" name="pulldownList" >
<option> </option>
<option>0aaaaaaaaaaaaaaaaaaaaa</option>
<option>1aaaaaaaaaaaaaaaaaaaaa</option>
<option>2aaaaaaaaaaaaaaaaaaaaa</option>
<option>3aaaaaaaaaaaaaaaaaaaaa</option>
</select>
<input type="text" id="pulldownText" name="pulldo...
</div>
・動作ブラウザ
IE8、FF、クロム等
・補足事項
name属性はpirkaまたCGIなどで必要とするものです、無くても...
・JavaScriptコード
var pulldownText=null;
//////////////////////////////////////////////////////
// プルダウン押下ボタンを押したときの処理
function pulldownChangeEvent(e) {
var obj = Event.element(e);
$(pulldownText).value = obj.options[obj.selectedIndex]....
}
//////////////////////////////////////////////////////
// ComboBox初期化
function comboInit(selectID, textID) {
var pulldownHeight = 20;
var pulldownTextWidth = 100;
var pulldownBtnWidth = 17;
pulldownText = textID;
var list = $(selectID).absolutize();
var text = $(textID).absolutize();
// set list attr
list.style.height = pulldownHeight+'px';
list.style.width = (pulldownTextWidth+pulldownBtnWidth)+...
var tx = parseInt(list.style.width+0);
var ty = parseInt(list.style.height+0);
// set text attr
text.style.position = 'absolute';
text.style.left = list.style.left;
text.style.top = list.style.top;
text.style.width = (tx-pulldownBtnWidth)+'px';
text.style.height = list.style.height;
text.value = list.options[0].text;
Event.observe($(selectID), "change", pulldownChangeEven...
}
実際のHTMLです
<html>
<head>
<script type="text/javascript" src="/js/prototype.js"></...
<script type="text/javascript" src="/js/pirka.js"></scri...
<script type="text/javascript" src="/js/combobox.js"></s...
<script type="text/javascript" >
<!--
// 起動時の初期化
window.onload = function (){
comboInit('pulldownList', 'pulldownText');
}
-->
</script>
<style type="text/css">
</style>
<title>サンプル コンボボックスコントロール</title>
</head>
<body>
<center>
<form>
<table>
<tr>
<td>
<br>
<br>
</td>
<td>
<div name="ComboBox">
<select id="pulldownList" name="pulldownList" >
<option></option>
<option>0aaaaaaaaaaaaaaaaaaaaa</option>
<option>1aaaaaaaaaaaaaaaaaaaaa</option>
<option>2aaaaaaaaaaaaaaaaaaaaa</option>
<option>3aaaaaaaaaaaaaaaaaaaaa</option>
</select>
<input type="text" id="pulldownText" name="pulldo...
</div>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
