SQLの窓

2014年11月26日


jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selection/1.0.1/jquery.selection.js"></script></script>
<script type="text/javascript">

$(function(){

	$("#text")
		.css({
			float: "left",
			width: "400px",
			height: "200px"
		});

	$("#insert1")
		.attr("type", "button")
		.val("前へ挿入")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("insert",{ text: "文字列", mode: "before", caret: "keep" })
		});

	$("#insert2")
		.attr("type", "button")
		.val("後へ挿入")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("insert",{ text: "文字列", mode: "after", caret: "keep" })
		});

	$("#replace")
		.attr("type", "button")
		.val("置き換え")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("replace",{ text: "文字列", caret: "keep" })
		});

	$("#get")
		.attr("type", "button")
		.val("取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $("#text").selection("get") )
		});

	$("#get_text")
		.attr("type", "button")
		.val("選択部分の text 取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $.selection("text") )
		});

	$("#get_html")
		.attr("type", "button")
		.val("選択部分の html 取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $.selection("html") )
		});

});

</script>
<b>ここを選択して <span>html</span> 取り出しすると</b><br><br>

<textarea id="text">aaa
bbb
ccc</textarea>
▼ テキストエリア内限定
<input id="insert1">
<input id="insert2">
<input id="replace">
<input id="get">
▼ ページ全体に対しての処理
<input id="get_text">
<input id="get_html">


テキストエリアで使う事が最も便利で有効ですが、通常の1行の入力フィールドでもかまいません。

使用可能なメソッドは 5つ

1) getPos
2) setPos
3) insert
4) replace
5) get

get は、一応メソッドとしての名前ですが、1〜4 以外の文字列を指定すると全て get となります。getPos と setPos は、選択位置の情報の取得と反映です。

insert では、サブメソッドがあって、before か after を使用し、最後のカーソルモードとして、keep か start か end を選べます。

ページ全体で使用可能 selection メソッド

こちらは、text か html かで選択部分の情報を取得します
ここを選択して html 取り出しすると

▼ テキストエリア内限定 ▼ ページ全体に対しての処理


関連する記事

ノーマル JavaScript と比較。jQuery でクリックしたテキスト( SPAN 要素 と INPUT またはテキストエリア ) を選択状態にする


posted by lightbox at 2014-11-26 15:25 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2013年10月25日


jQuery の Chosen プラグイン( 複数選択コンボボックス ) の使い方

Chosen

選択すると、ボタンが追加されて複数選択を右手のマウスだけで行う事ができます。
必要なファイルは、js と css と chosen-sprite.png の3つのファイルだけです。


<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
if ( window[window.location.hostname+'.loadChosen'] !== true ) {
	window[window.location.hostname+'.loadChosen'] = true;
	document.write("<"+"link rel=\"stylesheet\" href=\"https://winofsql.jp/jquery/plugins/chosen/chosen.css\">");
	document.write("<"+"script src=\"https://winofsql.jp/jquery/plugins/chosen/chosen.jquery.min.js\"></"+"script>");
}
</script>
<script type="text/javascript">
$(function() {
	// セレクタ
	$(".chosen")
		// プラグイン
		.chosen({
			width: "550px",
			max_selected_options: 3
		})
		// 変更時のイベント
		.change(function(evt, params){
			console.log(evt.type);
			if ( params.selected ) {
				console.log(params.selected+" が選択されました");
			}
			if ( params.deselected ) {
				console.log(params.deselected+" が選択解除されました");
			}
		})
		// リストが開いた時のイベント
		.on('chosen:showing_dropdown', function(evt, params) {
			console.log(evt.type);
			console.log(params);
		})
		// リストが閉じた時のイベント
		.on('chosen:hiding_dropdown', function(evt, params) {
			console.log(evt.type);
			console.log(params);
		})
		// 最大値以上を選択した時に発生するイベント( リストは開かない )
		.on('chosen:maxselected', function(evt, params) {
			console.log("---------------");
		})
		;
	}
);


</script>

<form>
<input type="submit" value="送信"><br>
<select name="sel_01[]" data-placeholder="あなたの好きな色を選択して下さい" multiple class="chosen">
	<option value="0"></option>
	<option value="1">赤</option>
	<option value="2">緑</option>
	<option value="3">青</option>
	<option value="4">紫</option>
	<option value="5">ピンク</option>
	<option value="6">オレンジ</option>
	<option value="7">黄色</option>
	<option value="8">茶色</option>
</select>
<br><br>
<select name="sel_02" data-placeholder="あなたの好きな色を選択して下さい"class="chosen">
	<option value="0"></option>
	<option value="1">赤</option>
	<option value="2">緑</option>
	<option value="3">青</option>
	<option value="4">紫</option>
	<option value="5">ピンク</option>
	<option value="6">オレンジ</option>
	<option value="7">黄色</option>
	<option value="8">茶色</option>
</select>
</form>





posted by lightbox at 2013-10-25 02:21 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

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 の送信で使用する入力可能なコンボボックス』にする



タグ:jquery javascript
posted by lightbox at 2013-03-19 22:41 | プラグイン: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 終わり