JavaScript++かも日記

【jQuery】ドラッグドロップDemo

【jQuery 】 , ライブラリ 】 , リファレンス 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor

ｊQuery UIのドラッグドロップです。

ｊQuery UIのページにもデモはあるのですが、ちょっと凝りすぎていてUIとしてどうなの^^?という気もしないでもないので、ｊQuery のドラッグドロップを一瞬で理解できるページをメモしておきます。

【デモ】

Draggables Test Page
http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html

3d Dragging Test Page
http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable_3d.html

Droppables Test Page
http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html

【リファレンス】

UI/Draggables
http://docs.jquery.com/UI/Draggables

UI/Droppables
http://docs.jquery.com/UI/Droppables

---

---

【コメント】(←clickで入力欄open)

【jQuery】分岐の書き方をいくつかテスト

【jQuery 】 , ライブラリ 】 , リファレンス 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor

昨日のエントリslideshareが凄くなってきている で書いた、show/hide ボタンですが、いろいろな書き方ができそうなので、少し習作。

• とりあえず、昨日書いたコード。if分岐です。
• 試しに、3項演算子で分岐。
• .hide("スピード",コールバック)のsyntaxを使ってみる。エフェクトが掛かります。
• もひとつ試しに、3項演算子に複文を書く実験。
• 3項演算子に複文のテスト
• トグルイベント、jQuery.toggle(関数1,関数1)を使ってみる。

とりあえず、昨日書いたコード。if分岐です。

<script>
$(function(){
  $("#btn_1789T00").click(function(){
     if($("+ div",this).css("display")!="none"){
             $("+ div",this).hide(); $(this).text("show");
     }else{
            $("+ div",this).show(); $(this).text("hide");
     }
  })
})
</script>

<style>
#slideshow1789T00 div{display:none}
</style>
<div id="slideshow1789T00">
  <button id="btn_1789T00">show</button>
  <div>test</div>
</div>

試しに、3項演算子で分岐。

<script>
$(function(){
  $("#btn_1789T01").click(function(){

     ($("+ div",this).css("display")!="none")?
            $("+ div",this).hide():
            $("+ div",this).show();

     $(this).text($(this).text()=="show"?"hide":"show");

  })
})
</script>

<style>
#slideshow1789T01 div{display:none}
</style>
<div id="slideshow1789T01">
  <button id="btn_1789T01">show</button>
  <div>test</div>
</div>

.hide("スピード",コールバック)のsyntaxを使ってみる。エフェクトが掛かります。

<script>
$(function(){
  $("#btn_1789T02").click(function(){

     ($("+ div",this).css("display")!="none")?
       $("+ div",this).hide("fast",function(){
         $("#btn_1789T02").text("show")
       }):
       $("+ div",this).show("fast",function(){
         $("#btn_1789T02").text("hide")
       });
  })
})
</script>

<style>
#slideshow1789T02 div{display:none}
</style>
<div id="slideshow1789T02">
  <button id="btn_1789T02">show</button>
  <div>test</div>
</div>

もひとつ試しに、3項演算子に複文を書く実験。

<script>
$(function(){
  $("#btn_1789T03").click(function(){
     ($("+ div",this).css("display")!="none")?
       ($("+ div",this).hide(),$(this).text("show")):
       ($("+ div",this).show(),$(this).text("hide"));
  })
})
</script>

<style>
#slideshow1789T03 div{display:none}
</style>
<div id="slideshow1789T03">
  <button id="btn_1789T03">show</button>
  <div>test</div>
</div>

3項演算子に複文のテスト

<script>
$(function(){

  var a,b,c;
  a=0,b=0,c=0;

  $("#btn_1789T04").click(function(){
     (a==0)?
       (b=1,c=1):
       (b=2,c=2);

     //a=0,b=1,c=1になってる?
     alert("a="+a+"\n"+"b="+b+"\n"+"c="+c+"\n")//なりました。
  });

})
</script>

<button id="btn_1789T04">chk</button>

トグルイベント、jQuery.toggle(関数1,関数2)を使ってみる。

<script>
$(function(){

  $("#btn_1789T05").toggle(
    function () {
      $("+ div",this).show();
      $(this).text("hide");
    },
    function () {
      $("+ div",this).hide();
      $(this).text("show");
    }
  );

})
</script>

<style>
#slideshow1789T05 div{display:none}
</style>
<div id="slideshow1789T05">
  <button id="btn_1789T05">show</button>
  <div>test</div>
</div>

#個人的にはトグルが使いやすそう？

---

---

【コメント】(←clickで入力欄open)

【jQuery】イベントfixについて

【jQuery 】 , リファレンス 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor

  handle: function(event) {
　　// returned undefined or false
　　var val;

　　// Empty object is for triggered events with no data
　　event = jQuery.event.fix( event || window.event || {} ); 

  fix: function(event) {
    // store a copy of the original event object 
    // and clone to set read-only properties
    var originalEvent = event;
    event = jQuery.extend({}, originalEvent);
    
    // add preventDefault and stopPropagation since 
    // they will not work on the clone

    //高橋注:イベントキャンセルをevent.preventDefault()に統一
    event.preventDefault = function() {
      // if preventDefault exists run it on the original event
      if (originalEvent.preventDefault)
        originalEvent.preventDefault();
      // otherwise set the returnValue property of the original event to false (IE)
      originalEvent.returnValue= false;
    };

    //高橋注:イベントバブルキャンセルをevent.stopPropagation()に統一
    event.stopPropagation = function() {
      // if stopPropagation exists run it on the original event
      if (originalEvent.stopPropagation)
        originalEvent.stopPropagation();
      // otherwise set the cancelBubble property of the original event to true (IE)
      originalEvent.cancelBubble = true;
    };

    //高橋注:イベント対象要素取得をevent.target に統一
    // Fix target property, if necessary
    if ( !event.target && event.srcElement )
      event.target = event.srcElement;       

    //高橋注:イベント対象要素取得でTEXTノード時のsafariフィックス 
    // check if target is a textnode (safari)
    if (jQuery.browser.safari && event.target.nodeType == 3)
      event.target = originalEvent.target.parentNode;

    //高橋注:イベント移動要素取得をrelatedTargetに統一
    // Add relatedTarget, if necessary
    if ( !event.relatedTarget && event.fromElement )
      event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;

    //高橋注:IEのDocType宣言により異なるDocument別にclientXへscrollLeft、
    // clientYへscrollTop を加えてevent.pageXとevent.pageYを他のブラウザと統一
    // Calculate pageX/Y if missing and clientX/Y available
    if ( event.pageX == null && event.clientX != null ) {
      var e = document.documentElement, b = document.body;
      event.pageX = event.clientX + (e && e.scrollLeft || b.scrollLeft || 0);
      event.pageY = event.clientY + (e && e.scrollTop || b.scrollTop || 0);    }

    //高橋注:キーコード取得をevent.whichで統一
    // Add which for key events
    if ( !event.which && (event.charCode || event.keyCode) )
      event.which = event.charCode || event.keyCode;
    
    //高橋注:Mac以外のブラウザでもMacのevent.metaKey をevent.ctrlKey で動作させる
    // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
    if ( !event.metaKey && event.ctrlKey )
      event.metaKey = event.ctrlKey;

    //高橋注:マウスボタン押下番号IEのevent.button をevent.which と統一
    // Add which for click: 1 == left; 2 == middle; 3 == right
    // Note: button is not normalized, so don't use it
    if ( !event.which && event.button )
      event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
      
    return event;
  }

内部でクロスブラウザ化されたevent.whichがどのような場合に露出されるか？

テストソース

<script src="./jquery.js" type="text/javascript"></script>

<div id="div17831">1 インラインなレガシーeventをargument.whichで取得</div>
<div id="div17832">2 インラインなレガシーeventをargument.which経由jQueryで利用
</div>
<div id="div17833">3 jQueryイベント内のargumentsで渡されるevent.which</div>
<div id="div17834">4 jQueryイベント内でグローバルなevent.whichを取得</div>

入力してください<input type="input" id="input1783" onkeyup="k(event)">
<script>
function k(event){ 
    //test1
    document.getElementById('div17831').innerHTML='1:キーコードは、'+event.which +'です。'
    //test2
    $("#div17832").html( "2:キーコードは、"+event.which +"です。");
 }

$("#input1783").keyup(function(e){
    //test3
    $("#div17833").html("3:キーコードは、"+e.which +"です。");
    //test4
    $("#div17834").html("4:キーコードは、"+event.which +"です。");
})
</script>

テスト

入力してください

結果

1 インラインなレガシーeventをarguments.whichで取得
2 インラインなレガシーeventをarguments.which経由jQueryで利用
3 jQueryイベント内のargumentsで渡されるevent.which　←これだけが全ブラウザででOK!
4 jQueryイベント内でグローバルなevent.whichを取得

たぶん結論

jQueryイベント内部でクロスブラウザ化された、jQueryの独自イベントは、
3のjQueryイベント内のargumentsで渡されるeventのwhichなど、
jQueryのイベントコールバック関数の引数としてのみ取得できますが、
グローバルなeventには影響しませんので、
他のライブラリなどと組み合わせても衝突などはありません。たぶん。

---

Milly ( 2007年11月01日 18:26 )

which に keyCode が格納されている場合があるだけで keyCode が変更されてるわけではないので、例が keyCode なのはよくないのでは。

高橋 ( 2007年11月01日 19:20 )

あ、本当だ、内部の話をしながら、途中からなぜか完全に勘違いしてました。Milly さんご指摘ありがとうございました。落ち込むなぁ、、、whichの条件式も頭の中で変になってたし。今日は朝からダメダメです。もう寝ようかな、、、。

Milly ( 2007年11月01日 19:32 )

なんだか落ち込ませてしまったみたいですが、いつも参考にさせていただいてます。これからも有用な記事を期待してます。:)

高橋 ( 2007年11月01日 19:44 )

ありがとうございます。中身は、少し不安になったので、再調査します。でも、今日はもう寝ます。ばた。

高橋 ( 2007年11月01日 23:24 )

寝ずにアバウトなテスト完了。ほぼスコープを推測(笑)できたような緩いような。。。最近、良いことが全然無くて、いまひとつ勢いが出ない状態です。今度こそ寝ます。

---

【コメント】(←clickで入力欄open)

【jQuery】UI/Tabs/tabsClick(position)

【jQuery 】 , リファレンス 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor

<script src="./jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="./ui.tabs/ui.tabs.js" type="text/javascript"></script>
<link rel="stylesheet" href="./jquery.ui-1.0/ui.tabs/ui.tabs.css" type="text/css">
<script type="text/javascript">
$(function() {

	$('#jqtabexample1782 ul').tabs({ fxFade: true, fxSpeed: 'fast' });

	$('#tabclick1782').click(function(){
		var sel=$('#jqtabexample1782 ul').tabsSelected() ;
		$('#jqtabexample1782 ul').tabsClick(sel>=3?1:++sel);
	});

});
</script>

<p><button id="tabclick1782">Next</button>--タブ送りボタン</p>

<div id="jqtabexample1782">
	<ul>
		<li><a href="#tab1"><span>基本</span></a></li>
		<li><a href="#tab2"><span>階層</span></a></li>
		<li><a href="#tab3"><span>基本フィルタ</span></a></li>
	</ul>

	<div id="tab1" class="ui-tab-block">

		<a href='#' class="ui-tab-link">
			Basics(基本):
		</a>
		<div class="ui-tab-body">
		（略）
		</div>
	</div>
	<div id="tab2" class="ui-tab-block">

		<a href='#' class="ui-tab-link">
			Basics(基本):
		</a>
		<div class="ui-tab-body">
		（略）
		</div>
	</div>
	<div id="tab3" class="ui-tab-block">

		<a href='#' class="ui-tab-link">
			Basics(基本):
		</a>
		<div class="ui-tab-body">
		（略）
		</div>
	</div>
</div>

---

---

【コメント】(←clickで入力欄open)

【jQuery】:odd

【jQuery 】 , jquery-ref 】 , リファレンス 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor

  <script type="text/javascript">
  $(function(){
    $("#test17811 thead").css("background", "#ccc");
    $("#test17811 tbody tr:even").css("background", "#d0e6ff");
    $("#test17811 tbody tr:odd").css("background", "#dddddd");
  });
  </script>

  <style>
  #test17811 {
    border-collapse:collapse ;
    border-spacing:0px;
  }
  #test17811 thead td{ 
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
  }
  #test17811 td{ 
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
  }
  </style>

  <div id="test17811">
  <table>
    <thead>
    <tr><td>名前</td><td>点数</td></tr>
    </thead>
    <tbody>
    <tr><td>山田</td><td>80</td></tr>
    <tr><td>田中</td><td>50</td></tr>
    <tr><td>中川</td><td>60</td></tr>
    <tr><td>川西</td><td>55</td></tr>
    <tr><td>西山</td><td>18</td></tr>
    </tbody>
  </table>
  </div>
</p>
</div>

  <style>
  #test17811 {
    border-collapse:collapse ;
    border-spacing:0px;
  }
  #test17811 thead td{ 
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
  }
  #test17811 td{ 
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
  }
  </style>

  <div id="test17811">
  <table>
    <thead>
    <tr><td>名前</td><td>点数</td></tr>
    </thead>
    <tbody>
    <tr><td>山田</td><td>80</td></tr>
    <tr><td>田中</td><td>50</td></tr>
    <tr><td>中川</td><td>60</td></tr>
    <tr><td>川西</td><td>55</td></tr>
    <tr><td>西山</td><td>18</td></tr>
    </tbody>
  </table>
  </div>
</p>
</div>

  <script type="text/javascript">
  //$(function(){
    $("#test17811 thead").css("background", "#ccc");
    $("#test17811 tbody tr:even").css("background", "#d0e6ff");
    $("#test17811 tbody tr:odd").css("background", "#dddddd");
  //});
  </script>

---

---

【コメント】(←clickで入力欄open)

【jQuery】:even

【jQuery 】 , リファレンス 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor

<script src='./jquery-min.js'></script>
  <script type="text/javascript">
  $(function(){
    $("tbody tr:even","#test17801").css("background", "#ddd");
  });
  </script>

  <style>
  #test17801 {
    border-collapse:collapse ;
    border-spacing:0px;
  }
  #test17801 td{ 
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    background-color: #EFF2F3;
  }
  </style>

  <div id="test17801">
  <table border="0">
    <thead>
    <tr><td>名前</td><td>点数</td></tr>
    </thead>
    <tbody>
    <tr><td>山田</td><td>80</td></tr>
    <tr><td>田中</td><td>50</td></tr>
    <tr><td>中川</td><td>60</td></tr>
    <tr><td>川西</td><td>55</td></tr>
    <tr><td>西山</td><td>18</td></tr>
    </tbody>
  </table>
  </div>

<script src='./jquery-min.js'></script>
  <script type="text/javascript">
  $(function(){
    $("#my1780btn").click(function(){
      $("#test17802 tbody tr:even td:even").css("background", "gold");
    });
  });
  </script>

  <style>
  #test17802 {
    border-collapse:collapse ;
    border-spacing:0px;
  }
  #test17802 td{ 
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    background-color: #EFF2F3;
  }
  </style>

  <div id="test17802">
  <table border="0">
    <thead>
    <tr><td>名前</td><td>点数</td></tr>
    </thead>
    <tbody>
    <tr><td>山田</td><td>80</td></tr>
    <tr><td>田中</td><td>50</td></tr>
    <tr><td>中川</td><td>60</td></tr>
    <tr><td>川西</td><td>55</td></tr>
    <tr><td>西山</td><td>18</td></tr>
    </tbody>
  </table>
  </div>

  <button id="my1780btn">click</button>

---

---

【コメント】(←clickで入力欄open)

【jQuery】jQueryでも普通にDOMを扱いたい

【DOM 】 , JavaScript 】 , jQuery 】 , ライブラリ 】 , リファレンス 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor

 $("#testId").innerHTML="hogehoge" //使えません

 $("#testId").html("hoge<b>hoge</b>") 

[div#testID]

[div#aaa.ccc, div#bbb.ccc,....(略)....]

$(".ccc")[0]

ary=$(".ccc");
for(var i=0;i<ary.length;i++)alert(ary[i].innerHTML)

$(".ccc").each(function(index,nodeOj){
   this.innerHTML="dddd"
})

$(".firstHeading").each(function(index,nodeOj){
   $(".ccc").get()//配列が返ります
   $(".ccc").get(0)//0番目の要素が返ります
})

$(".ccc").get(0).innerHTML="ok 書き換わりました"

---

---

【コメント】(←clickで入力欄open)

【jQuery】jQuery UI/Accordion

【jQuery 】 , ライブラリ 】 , リファレンス 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor

    $("#jqexample").accordion({alwaysOpen: false});

    $.fn.extend( $("#jqexample").accordion , {
        showAll:function(){$("#jqexample .ui-accordion-body").fadeIn();},
        hideAll:function(){$("#jqexample .ui-accordion-body").fadeOut();}
    });

    $("#jqexample").accordion.hideAll() ;

    $("#jqshowall:checkbox").click(function(e){ 
       if($("#jqshowall:checkbox").get(0).checked){
         $("#jqexample").accordion.showAll() ;
       } else {
         $("#jqexample").accordion.hideAll() ;
       }
    });

//で、さらに修正f^^;;;

    //インスタンス作ります
    $("#jqexample").accordion({alwaysOpen: false});

    //インスタンスにメソッドを2つ追加コピーします
    $.fn.extend( $("#jqexample").accordion , {
        showAll:function(targets){$(targets).fadeIn();},
        hideAll:function(targets){$(targets).fadeOut();}
    });

    //全部フェイドアウト ここは、フェイドは無駄なのでhide()で良いかも
    $("#jqexample").accordion.hideAll("#jqexample .ui-accordion-body") ;

    //チェックボックスクリック来たら判定して2つのメソッドをトグル動作させる
    $("#jqshowall:checkbox").click(function(e){ 
       if($("#jqshowall:checkbox").get(0).checked){
         $("#jqexample").accordion.showAll("#jqexample .ui-accordion-body") ;
       } else {
         $("#jqexample").accordion.hideAll("#jqexample .ui-accordion-body") ;
       }
    });


    //インスタンス作ります
    $("#jqexample").accordion({alwaysOpen: false});

    //インスタンスのaccordionにshowAllメソッドを追加コピーします
    $.fn.extend( $("#jqexample").accordion , {
        showAll:function(target){$(target).fadeIn();}
    });

    //ボタンクリック来たらshowAllメソッドを動作させる
    $("#jqshowall:button").click(function(e){ 
         $("#jqexample").accordion.showAll("#jqexample .ui-accordion-body") ;
    });

でも、拡張使ってみたかったというだけのことなので普通は下記で良いかも(笑)。

    //インスタンス作ります
    $("#jqexample").accordion({alwaysOpen: false});

    //ボタンクリック来たら#jqexample 内の.ui-accordion-bodyをすべてfadeInする
    $("#jqshowall:button").click(function(e){ 
         $("#jqexample .ui-accordion-body").fadeIn();
    });

それにしても、jQueryだと、なんて簡単に書けるんだろう！

---

---

【コメント】(←clickで入力欄open)

【jQuery】Selectors

【jQuery 】 , リファレンス 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor

Selector

---

com2 ( 2007年10月26日 16:32 )

縦に長いコンテンツでアコーディオンを使うと、上下に行ったり来たりが増えてとても見づらいです……

高橋 ( 2007年10月27日 01:11 )

私も設置してみてそれ感じました(^^;;ということで、showAll/hideAllチェックをつけてみました。

見る人以外は、全部開くとかなり場所をとるので、デフォルトでhideAll。

読みたいときだけ読みたい部分をクリックで引き出しのように開くか、showAllで全部開いてゆっくり見る、という形になりますが、どうでしょう。

高橋 ( 2007年10月27日 02:26 )

hideAllに不具合があったのでshowAllのみのボタンに変更しましたｆ^^;;;

高橋 ( 2007年10月28日 22:00 )

アコーディオンをやめて、Tabに変更しました。コピーミスで、</div>を2個多く書いたせいで一瞬ページがぐちゃぐちゃに(^^;

---

【コメント】(←clickで入力欄open)

【jQuery】$(callback)

【jQuery 】 , リファレンス 】 ブックマーク-- Buzzurl  / Hatena  / Livedoor