SQLの窓

2018年02月01日


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



jQuery UI のデモでは、入力した内容がリストに無ければエラーになりますが、そのチェック部分を省いて、さらに内部で作成される INPUT 要素に id 属性と name 属性をセットするインターフェイスを追加しました。

FORM で送信すると、リストに無い内容(例:VB)だと ?basecombo=&combo_input=VB となり、存在するものだと basecombo と combo_input は同じになります
id と name には、data メソッドで引き渡した内容(key:input_name)をセットします ※ 現時点(2018/02/01)で jQuery UI は、1.12.1 である必要があります
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<style>
.custom-combobox {
	position: relative;
	display: inline-block;
}
.custom-combobox-toggle {
	position: absolute;
	top: 0;
	bottom: 0;
	margin-left: -1px;
	padding: 0;
}
.custom-combobox-input {
	margin: 0;
	padding: 5px 10px;
}
</style>

<script>
$( function() {
	$.widget( "custom.combobox", {
		_create: function() {
			this.wrapper = $( "<span>" )
				.addClass( "custom-combobox" )
				.insertAfter( this.element );

			this.element.hide();
			this._createAutocomplete();
			this._createShowAllButton();
		},

		_createAutocomplete: function() {
			var selected = this.element.children( ":selected" ),
				value = selected.val() ? selected.text() : "";

			var name = $(this.element).data("input_name");
			this.input = $( "<input id=\""+name+"\" name=\""+name+"\">" )
				.appendTo( this.wrapper )
				.val( value )
				.attr( "title", "" )
				.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
				.autocomplete({
					delay: 0,
					minLength: 0,
					source: $.proxy( this, "_source" )
				})
				.tooltip({
					classes: {
						"ui-tooltip": "ui-state-highlight"
					}
				});

			this._on( this.input, {
				autocompleteselect: function( event, ui ) {
					ui.item.option.selected = true;
					this._trigger( "select", event, {
						item: ui.item.option
					});
				},

				autocompletechange: "_removeIfInvalid"
			});
		},

		_createShowAllButton: function() {
			var input = this.input,
				wasOpen = false;

			$( "<a>" )
				.attr( "tabIndex", -1 )
				.attr( "title", "リストを開く" )
				.tooltip()
				.appendTo( this.wrapper )
				.button({
					icons: {
						primary: "ui-icon-triangle-1-s"
					},
					text: false
				})
				.removeClass( "ui-corner-all" )
				.addClass( "custom-combobox-toggle ui-corner-right" )
				.on( "mousedown", function() {
					wasOpen = input.autocomplete( "widget" ).is( ":visible" );
				})
				.on( "click", function() {
					input.trigger( "focus" );

					// Close if already visible
					if ( wasOpen ) {
						return;
					}

					// Pass empty string as value to search for, displaying all results
					input.autocomplete( "search", "" );
				});
		},

		_source: function( request, response ) {
			var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
			response( this.element.children( "option" ).map(function() {
				var text = $( this ).text();
				if ( this.value && ( !request.term || matcher.test(text) ) )
					return {
						label: text,
						value: text,
						option: this
					};
			}) );
		},

		_removeIfInvalid: function( event, ui ) {

			// Selected an item, nothing to do
			if ( ui.item ) {
				return;
			}

			// Search for a match (case-insensitive)
			var value = this.input.val(),
				valueLowerCase = value.toLowerCase(),
				valid = false;
			this.element.children( "option" ).each(function() {
				if ( $( this ).text().toLowerCase() === valueLowerCase ) {
					this.selected = valid = true;
					return false;
				}
			});

			// Found a match, nothing to do
			if ( valid ) {
				return;
			}

			// Remove invalid value

		},

		_destroy: function() {
			this.wrapper.remove();
			this.element.show();
		}
	});

	$( "#combobox" )
		.data("input_name", "combo_input")
		.combobox();

} );
</script>

<form>
<div class="ui-widget">
	<select id="combobox" name="basecombo">
		<option value=""></option>
		<option value="C">C</option>
		<option value="C++">C++</option>
		<option value="Java">Java</option>
		<option value="JavaScript">JavaScript</option>
		<option value="Perl">Perl</option>
		<option value="PHP">PHP</option>
		<option value="Python">Python</option>
		<option value="Ruby">Ruby</option>
	</select>
</div>
<input type="submit">
</form>

関連する記事

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


posted by lightbox at 2018-02-01 14:06 | jQuery UI | このブログの読者になる | 更新情報をチェックする

2015年08月11日


Google Picasa サービスの URL を使用して、jQuery のスライダーでリアルタイムにサイズの違った画像を表示する

これは、Picasa サービスの URL 部分を変更すると、Picasa 側でそのサイズの画像を作成してくれる事の確認プログラムです。最近、Picasa の URL の仕様が少し変わり、"s長辺のサイズ" の後ろに "-Ic42" が付くようになりましたが、意味は謎です。

スライダーを動かすと、画像サイズが変化しますが、これはそのサイズの画像を表示しています。ブラウザは縮小も拡大もしていません。

この仕様は正式な文書は無いかもしれませんが、Picasa のサービス内でユーザが利用する文字列なので、Picasa サービスが余程の変更されない限り利用が継続できるはずです。

"s長辺のサイズ" 以外にも、"w横幅" と "h高さ" も使えますが、これは以前 Google+ の画像に使用されていたもので、現在も使えますが、この二つはいつ使えなくなってもおかしくない仕様です。(そもそも、Picasa も Google+ の画像も元は同じようです)

活用方法

この仕様と、正規表現の置換を用いれば、一つの URL から複数サイズの画像の URL を動的に作成できるので、簡単な使い方の例としては、表示画像(サムネイル)と目的画像というコンテンツを一度での用意です。




<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
var url = "https://lh3.googleusercontent.com/-CuiK3fGTUAw/Vak2SZiXCXI/AAAAAAAAbJM/RpiEqBN0hmw/s100-Ic42/56ce94dfc3fc6f3df8240e7b6cbbadc6.png"

$(function(){

	// 初期画像
	$("#picasa_img").prop("src", url);

	// スライダー
	$("#slider1").slider({
		range: "min",	// 左側を着色する
		step: 50,	// 50 づつ変更
		min: 50,	// 最小50
		max: 600,	// 最大600
		value: 100,	// 初期値
		// スライダーが変化した時のイベント
		slide: function (event, ui) {
			// src に無名関数の戻り値を設定する
			$("#picasa_img").prop("src", function(){
				// s100 部分の 100 を変更する為の正規表現を使った replace
				return url.replace(/\/s\d+\-Ic42\//, "/s"+ui.value+"-Ic42/");
			});
		}
	})
	.css("width", "400px")
	
});

</script>
<div id="slider1"></div>
<br><br>
<img id="picasa_img">



posted by lightbox at 2015-08-11 22:51 | jQuery UI | このブログの読者になる | 更新情報をチェックする

2015年07月16日


Google がホスティングしている jQuery UI の CSS のテーマのチェックをする jQuery UI ボタン

オンライン実行

ボタンクリックすると、テーマを差し替えてそれぞれのテーマでのボタン表示になります。

Google では、スクリプトのほうは全てのバージョンをホスティングしていますが、CSS のほうは 1.10.1 以前でないと base テーマが存在しません( 他のテーマはあるようなのですが・・・ )

▼ こんな感じです


ここでは、1.10.1 のテーマを使って表示しています。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function(){

	var css_type = [
		"base","ui-lightness","ui-darkness","smoothness","start","redmond",
		"sunny","overcast","le-frog","flick","pepper-grinder","eggplant",
		"dark-hive","cupertino","south-street","blitzer","humanity","hot-sneaks",
		"excite-bike","vader","dot-luv","mint-choc","black-tie","trontastic","swanky-purse"
	]
	var cnt = 0;
	// ボタン
	$("#button_control")
		.button()
		.val("base")
		.click(function(){
			if ( cnt >= css_type.length-1 ) {
				cnt = -1;
			}
			cnt++;
			css_target = "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/";
			css_target += css_type[cnt];
			css_target += "/jquery-ui.css";
			$("#link").prop("href", css_target );
			$(this).val(css_type[cnt]);
		});

});

</script>

<input id="button_control">



posted by lightbox at 2015-07-16 17:17 | jQuery UI | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

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

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