cite属性を表示する

かきかた帖

ブラウザが、cite属性を表示しないので、hatenaのように、引用元表示ができるようにする。

引用元リンクは、ブランクで開きます。

(function($){
　　jQuery(function(){
　　　jQuery("blockquote").each(function(){
			
        var cite  = jQuery(this).attr("cite");
		
	if( cite ){
	
        jQuery(this).append("<p style=\"text-align:right;\">引用元：<a href=\"" + cite +"\" onclick=\"this.target='_blank';\" onkeypress=\"this.target='_blank';\">" + cite + "</a></p>");
		
	}
      });
　　});

})(jQuery);

以下の記述で、引用末尾、右揃えで、URLを表示。

  <blockquote cite="http://www.sankouninatta.com/">
    <p> blockquoteあいうえおabc　ａｂｃ　abc ａｂｃ </p>
  </blockquote>

以下の記述で、何もしない。

　<blockquote>
    <p> blockquoteあいうえおabc　ａｂｃ　abc ａｂｃ </p>
  </blockquote>

enchant エフェクトサンプル集

エフェクトサンプル

jQuery1.5 UI サンプル一覧表

ついでなので、uiのサンプル一覧も、おまけにつけました。


6･13このenchantのドキュメントは、今日　1.5UIに差し替えました。

何だよ!という人はいないと思いますが、jQuery 1.2.3 Enchant UI サンプル一覧表に行けば会えます。

jQueryでインクルードと書いてあったので、

かきかた帖

http://journal.mycom.co.jp/news/2008/02/01/042/index.htmlという記事があったので、
http://icant.co.uk/sandbox/ajax-code-display/を試してみました。

http://icant.co.uk/sandbox/ajax-code-display/は、どんなもの。

htmlソースを説明用に書くことがありますが、htmlなら2回書かなくちゃいけない。

それは面倒なので、指定したページの指定した部分を（行単位で）ソースとして表示する。

とても便利さぁー。（沖縄弁ぽく）おもいました。

で、やってみました。

jQueryでインクルードと書いてあったので、

API/1.2/Utilities

ユーティリティ

User Agent:





NameType
jQuery.browser
Returns: Map
navigator.userAgentを読んで、DOMより早く、MAPします。

jQuery.browser.version
Returns: String
レンダリングエンジンのバージョンを返します。

Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

jQuery.boxModel
Returns: Boolean
WEB標準のボックスモデルを配置できるかどうかを返す。W3C CSS Box Model.

Array and Object operations:



NameType
jQuery.each( object, callback )
Returns: Object
配列やオブジェクトのループに使う
jQuery.extend( target, object1, objectN )
Returns: Object
オブジェクトのマージ
jQuery.grep( array, callback, invert )
Returns: Array
配列から、条件に合うものをグレップする
jQuery.makeArray( obj )
Returns: Array
オブジェクトから、配列を作る

var arr = jQuery.makeArray(document.getElementsByTagName("div"));
    arr.reverse(); // use an Array method on list of dom elements
    $(arr).appendTo(document.body);

jQuery.map( array, callback )
Returns: Array
配列のすべての要素に、手をつける。
jQuery.inArray( value, array )

Returns: Number
配列の中に指定した値があるかどうか調べる。
jQuery.unique( array )
Returns: Array
要素配列の中から、複製要素を取り除きます????

Test operations:

NameType
jQuery.isFunction( obj )
Returns: boolean
関数かどうか調べる

String operations:


NameType
jQuery.trim( str )
Returns: String
先頭末尾のホワイトスペースを除去する。

API/1.2/Effects

エフェクト

Sample 実際にやってみました。

　
NameType
show( )
Returns: jQuery
該当したエレメントが、非表示なら表示する。
show( speed, callback )
Returns: jQuery
該当したエレメントが、いかしたアニメーションで現れて、コールバック関数が「決める！」
hide( )
Returns: jQuery
該当したエレメントが表示されていれば、ふっと消える。
hide( speed, callback )
Returns: jQuery
魔法使いによって、呪文をかけたように、重みのある雰囲気で消えていく。もちろん、呪文はコールバック関数で、ビシッと効くよ。
toggle( )
Returns: jQuery
壊れた天秤ばかりのように、常にどちらか一方に傾く。開いていたものは、閉じるし、閉じているものは、全開。

Sliding:スライド

　　　　　　　
NameType
slideDown( speed, callback )
Returns: jQuery
該当するエレメントを、スライドダウンして表示する。もちろん必要ならコールバック関数も使えるよ
slideUp( speed, callback )
Returns: jQuery
該当するエレメントを、スライドアップして非表示にしてしまう。もちろん必要ならコールバック関数も使えるよ
slideToggle( speed, callback )
Returns: jQuery
開いていれば、閉じるし閉じていれば、開く。必要ならコールバック関数も使えるよ。

Fading:もあっと消えいる

NameType
fadeIn( speed, callback )
Returns: jQuery
フェードインしながら、表示する。もちろん必要ならコールバック関数も使えるよ。
fadeOut( speed, callback )
Returns: jQuery
もうこのまま消えてしまいたいと思ったときのように、フェードアウトします。もちろん必要ならコールバック関すも使えるよ。
fadeTo( speed, opacity, callback )
Returns: jQuery
透明になっちまうよ、コールバックも、よかったら使えば、、、

Custom:カスタム








NameType
animate( params, duration, easing, callback )

Returns: jQuery
君の実力と才能を試すための、特別なアニメーションのために
animate( params, options )
Returns: jQuery
君の実力と才能を試すための、特別なアニメーションのために
stop( )
Returns: jQuery
該当するエレメントのアニメーションを中止する。
queue( )待ち行列
Returns: Array<Function>
該当するひとつの要素の待ち行列の参照を返す。???

ここよくわかってません。鵜呑みにしないでね

アニメーションさせるための再帰関数

   function runIt() {
	
      jQuery("#qu").show("slow");
      jQuery("#qu").animate({left:'+=200'},2000);
      jQuery("#qu").slideToggle(1000);
      jQuery("#qu").slideToggle("fast");
      jQuery("#qu").animate({left:'-=200'},1500);
      jQuery("#qu").hide("slow");
      jQuery("#qu").show(1200);
      jQuery("#qu").slideUp("normal", runIt);
	  
    }
    runIt();

以下のコードで今処理されているのが、何番目かを知ることができる

	$("#count").click(function () {
	 	var n = $("#qu").queue("fx");
      	$("#res").text("Queue length is: " + n.length);    
	});

以下のコードで、runItをスタートする。

	$("#start").click(function () {
      $(this).queue("fx", runIt);
      //$("#qu").stop();
	  $(this).dequeue();
    });

dequeue()；でも、stop();でも動作はするようだけども、、、
先頭の処理が終わったら、溜め込まないで、dequeue();しなさいということか、、、

以下のコードで処理を停止する。

    $("#stop").click(function () {
      $("#qu").queue("fx", []);
      $("#qu").stop();
    });

配列には、もう何もないよということか

jQueryは、アニメーションさせるための再帰関数を書いたときには、最初の行から、順番に処理していく。最終的に、自分自身を呼び出しているので、このアニメーションは、ずーと動き続けることになる。

queueは、この連続した動作をコントロールできるようにする。
queue( )
Returns: Array<Function>
Returns a reference to the first element's queue (which is an array of functions).
queue( callback )
Returns: jQuery
Adds a new function, to be executed, onto the end of the queue of all matched elements.
queue( queue )
Returns: jQuery
Replaces the queue of all matched element with this new queue (the array of functions).
dequeue( )
Returns: jQuery
Removes a queued function from the front of the queue and executes it.

スタイルが反映しないので、変更してみた。

トラブル帖

IE7で、スタイルの設定が動作しない。
それ以外では、動いていた。

 $("#big-font").click(function(){
	      $("#wrap").css("font-size","120%");
	 });

以下のコードに変更して、動作確認できた。

     $("#big-font").click(function(){
	      $("#wrap").addClass("bigger");
		  $("#wrap").removeClass("middle");
	 });
スタイルは、別途追記