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
posted by lightbox at 2013-03-19 22:41 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2013年03月04日


常に表示する事もできる jQuery プラグインカラッービッカーをカスタムタグ <colorpicker> で実装

<colorpicker></colorpicker>

実装にカスタムタグを使う必要は無いのですが、目立って解りやすいと思います。

ダウンロードはこちらになりますが、古いプラグインでもあり、説明も簡素すぎるのでちょっと解りにくいです。通常はやはり、入力フィールドにフォーカスが移った時に使えるのですが、その目的だと『ExColor (V 1.2)』が優れていると思います。こちらは、常に表示する場合に使えるのでテストしてみました。
問題点

一番の問題は、クリックで色が変わらないところ(少しでも動かすと変わる)ですが、目的によればそれはメリットになるかもしれません。あと、ダウンロードしたライブラリ内のファイルの配置が解らないというところ。必要無いファイルがたくさんあります(デモ用だと思うのですが)

結局以下のように配置し、必要なのは colorpicker.js と colorpicker.css と画像ファイルです。


<link rel="stylesheet" href="http://homepage2.nifty.com/lightbox/colorpicker/css/colorpicker.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/colorpicker/colorpicker.js"></script>

<colorpicker></colorpicker>

<script type="text/javascript">
$('colorpicker').ColorPicker({
	flat: true,
	onSubmit: function(hsb, hex, rgb, el) {
		// 要素名は "COLORPICKER" になります
		console.log(el.tagName);
		// hex は文字列の16進文字列
		console.log(parseInt("0x"+hex));
		// オブジェクト
		console.dir(rgb);
		// オブジェクト
		console.dir(hsb);
		// エレメントより jQuery オブジェクトで id セット
		$(el).attr("id","target");
		// 正当 DOM 参照と el は一致
		if ( document.getElementById("target") == el ) {
			console.log("element");
		}
	}
});
</script>
関連する記事

jQuery plugin カラーピッカー : ExColor (V 1.2) とその『バグ』




タグ:jquery javascript
posted by lightbox at 2013-03-04 08:00 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2013年02月23日


jQuery plugin カラーピッカー : ExColor (V 1.2) とその『バグ』

バグは、URL に大文字が含まれると、強制的に小文字にするようなので、部品の画像の参照が失敗します。

特徴

JavaScript 内から CSS を書き出しているので、外部 CSS が必要ありません。しかし、表示されるカラーピッカーは常に一つだけで、表示されている場合は BODY の最後にその時だけ追加されるため、常時表示する事はできないようです。

jsdo.it で実行
jsdo.it のサンプル実行コード公開ページ



ダウンロードページで、少しづつ見栄えを変える為のオプションを選択して、そのコードを見る事ができます。単純なアプリケーションなので、jQuery には 他にも多くのカラーピッカーがありますが、これで十分です。(サイトが消失していました) 違うものとなると、形状の違いで Farbtastic Color Picker を選ぶといいと思います。




その他のプラグイン

https://github.com/vanderlee/colorpicker 
http://www.digitalmagicpro.com/jPicker/
http://recurser.com/articles/2007/12/18/jquery-simplecolor-color-picker/
http://www.eyecon.ro/colorpicker/
http://www.syronex.com/software/jquery-color-picker
http://www.laktek.com/2008/10/27/really-simple-color-picker-in-jquery/

複数のフィールド

想像通り、INPUT 要素に class を指定して jQuery からセレクタで一回実行するだけで、全てのフィールドが Color Picker になります。


<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
if ( window[window.location.hostname+'.loadModcoder'] !== true ) {
	window[window.location.hostname+'.loadModcoder'] = true;
	document.write("<"+"script src=\"http://homepage2.nifty.com/lightbox/modcoder_excolor/jquery.modcoder.excolor.js\"></"+"script>");
}
</script>
<style type="text/css">
.color_field {
	width: 80px;
}
</style>
<div style='height:200px;'>
<input class="color_field" type="text" name="color_code1" />
<input class="color_field" type="text" name="color_code2" />
<input class="color_field" type="text" name="color_code3" />
<input class="color_field" type="text" name="color_code4" />
</div>


<script type="text/javascript">
$(".color_field").modcoder_excolor();
</script>

イベントは、OK ボタンを押した時のみ用意されていますが、イベント内で this を参照すると、実行時に指定したオプションの一覧になりますが、使用しているフィールドの情報は無いようなので、直接取りに行く必要があります。ですから、class 指定した場合は少し面倒かもしれません
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
if ( window[window.location.hostname+'.loadModcoder'] !== true ) {
	window[window.location.hostname+'.loadModcoder'] = true;
	document.write("<"+"script src=\"http://homepage2.nifty.com/lightbox/modcoder_excolor/jquery.modcoder.excolor.js\"></"+"script>");
}
</script>
<style type="text/css">
.color_field {
	width: 80px;
}
</style>
<input id="color_field" type="text" name="color_code" />
<script type="text/javascript">
$("#color_field").modcoder_excolor({
	color_box : false,
	callback_on_ok : function() {
		$("body").css("background-color",$("#color_field").val());
	}
});
</script>




タグ:jquery javascript
posted by lightbox at 2013-02-23 10:00 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする
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 ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり