SQLの窓

2013年03月19日


使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。

https://github.com/dellsala/Combo-Box-jQuery-Plugin

オリジナルの実装では、作成する毎に、jQuery の 名前空間に作った配列に追加していたので、インスタンスに対する処理が対象となるエレメントからの参照では無く不自然だったので、本来の jQuery の使い方に近い実装に変更しました。後、CSS の指定で一つバグがあったので修正しています。
オリジナルでのオプション変更
$('#option_changer').click(function (e) {
    jQuery.combobox.instances[0].setSelectOptions([
        'Apples',
        'Oranges',
        'Bananas'
    ]);
});
修正後
$('#option_changer').click(function (e) {
    $("#input1").comboget().setSelectOptions([
        'Apples',
        'Oranges',
        'Bananas'
    ]);
});
http://lightbox.in.coocan.jp/jquery/combobox/css/jquery.combobox/style.css
http://lightbox.in.coocan.jp/jquery/combobox/js/jquery.combobox.js



ソースコードを見ると、他にもメソッドがあるのですが、使いどころがあまりありません。あと、キー操作があって、フォーカスがある時に下矢印でリストが開きます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://lightbox.in.coocan.jp/jquery/combobox/css/jquery.combobox/style.css">
<script type="text/javascript" src="http://lightbox.in.coocan.jp/jquery/combobox/js/jquery.combobox.js"></script>

<script type="text/javascript">
$(function () {

	$('#input1').combobox([
		'青森',
		'岩手',
		'秋田',
		'山形',
		'宮城',
		'福島',
		'栃木',
		'群馬',
		'茨城',
		'東京'
	]);

	jQuery('#input2').combobox([
		'切絵字1.0',
		'モフ字1.3',
		'水面字1.1',
		'三次元切絵字1.0',
		'白舟篆書(教育漢字1006字)',
	]);
	
	jQuery('#option_changer1').click(function () {
		$("#input1").comboget().setSelectOptions([
			'三重','和歌山','奈良','滋賀','京都','大阪'
		]);
	});

	jQuery('#option_changer2').click(function () {
		$("#input2").comboget().setSelectOptions([
			'怨霊フォント',
			'下町の恐怖フォント',
			'しねきゃぷしょん',
			'たぬき油性マジック',
			'やさしさゴシックボールド'
		]);
	});

	jQuery('#test_show').click(function () {
		setTimeout( function() {$("#input1").comboget().selector.show();}, 1000 );
	});

	jQuery('#test_select').click(function () {
		setTimeout( function() {
			$("#input1").comboget().selector.show();
			$("#input1").comboget().selector.select(2);
		}, 1000 );
	});

	jQuery('#test_get').click(function () {
		$("#input1").comboget().selector.select(2);
		alert( $("#input1").comboget().selector.getSelectedValue() );
	});

 });
</script>

<div style='width:400px;height:150px'>
<table><tr>
<td><textarea id="input1"></textarea></td>
<td><input id="input2" type="text" value="アームド・バナナ" style='width:100px;'></td>
</tr></table>
<input id="option_changer1" type="button" value="内容変更1" />
<input id="option_changer2" type="button" value="内容変更2" />
<input id="test_show" type="button" value="1秒後表示" />
<input id="test_select" type="button" value="1秒後表示して選択" />
<input id="test_get" type="button" value="3番目の文字列を取得" />
</div>

関連する記事

jQuery UI の Autocomplete Combobox をさらにカスタマイズして、『Form の送信で使用する入力可能なコンボボックス』にする



タグ:javascript jquery
【プラグイン:jQueryの最新記事】
posted by lightbox at 2013-03-19 22:41 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり