SQLの窓

2015年11月30日


tabIndent.js : テキストエリアでタブが使用できます。オリジナルを少し改造して、jQuery の名前空間に登録しました。

デモページ
 選択して
 TAB でインデント
 SHIFT+TAB で逆インデント

その他

● ESC でキャンセルされ、TAB で次のコントロールへ移動できるようになります。
● ENTER キーで改行を挿入すると、直前のインデントを引き継いだ位置になります。
● オプションで TAB のかわりに複数のスペースを使う事ができます

jQuery の内部に実装

オリジナルでは jQuery に依存しませんが、エレメントの指定が DOM になっていたので jQuery の名前空間に登録するように改造しました。

改造済みコード1(.min.js)
( オリジナルは圧縮されていないので、packer を使用しました ) 

改造済みコード2(.js)

メソッド

renderAll を使うとし、要素の class 属性に tabIndent を指定しているテキストエリアを対象とします。

remove と removeAll がありますが、remove の引数は エレメントのままです。jQuery で引き渡す場合は、$("#id")[0] か、$("#id").get(0) です。
<script>
// jQuery 初期処理
$(function() {

// ソースコードがスペースでインデントされている場合に使用する
//	$.tabIndent.config.tab = "    ";
	$.tabIndent.render("#text")

});
</script>





posted by lightbox at 2015-11-30 09:00 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年11月26日


何もかも回転する、jQuery の簡単なプラグイン実装

デモページ




どういう場面で使うかは、なかなか難しいですが $(document.body).find("*") なんかは手軽で使い勝手が良いと思います。あと、$([parent.document.body,document.body,$("#target")[0],$("#tabs-1")[0]]) なんかは狙い撃ち用です

ソースコード
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// jQuery 初期処理
$(function() {

	// プラグイン
	$.fn.extend({ 
		rotateAction: function(deg, duration, easing){
			var target = this;
			$({kakudo: 0}).animate(
				{kakudo: deg},
				{
					duration: duration,
					easing: easing,
					step: function(now) {
						target.css({
							transform: 'rotate(' + now + 'deg)'
						});
					}
				}
			);
		}  
	});

});
</script>

<input
	type="button"
	value="画像回転"
	onclick='$("#target").rotateAction(360,1000,"swing");'>

<input
	type="button"
	value="この IFRAME を回転"
	onclick='$(document.body).rotateAction(360,1500,"swing");'>

<input
	type="button"
	value="このタブのみ回転"
	onclick='$("#tabs-1").rotateAction(360,1500,"swing");'>

<input
	type="button"
	value="ウインドウ全体を回転"
	onclick='$(parent.document.body).rotateAction(360,1500,"swing");'>

<input
	type="button"
	value="全てを回転"
	onclick='$([parent.document.body,document.body,$("#target")[0],$("#tabs-1")[0]]).rotateAction(360,10000,"swing");'
	style="background-color:deeppink;color:white">

<input
	type="button"
	value="何もかも回転"
	onclick='$(document.body).find("*").rotateAction(360,10000,"swing");'
	style="background-color:deeppink;color:white">

<br><br><br>

<img
	id="target"
	src="https://lh5.googleusercontent.com/-kCYTSmTrJXs/URvMQy9ClqI/AAAAAAAARuw/5BTKTk2c_sw/s128/_img.png"
	style="border: solid 0px #000000">





posted by lightbox at 2015-11-26 13:46 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年11月25日


jQuery UI の タブ と アコーディオンで、スキンのチェック

デモページ


snowstorm.js や SyntaxHighlighter も タブに埋め込んで、各タブを横にスライドするアニメーションで見栄えを比較できます。スキンを好きに変更して、それぞれの特徴を比較して下さい。







タグ:jQuery UI jquery
posted by lightbox at 2015-11-25 23:24 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする
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 終わり