2011年05月26日

jQuery:live関数について

jQueryのlive関数はjQuery1.3からの機能で、登録されたイベントは、現在および将来的にも、セレクタにマッチする全ての要素に適用されます。
ですので、動的に後から追加されたlist等の要素に対してイベントを適用することが可能です。

○指定可能イベント
click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

○サンプル

$("#item").live("click", function(){
 $(this).after("sample");
});

参考サイト:http://semooh.jp/jquery/api/events/live/type,+fn/
2011年05月19日

jQuery:様々なサイズの要素をfloatさせて整列させるプラグインjQuery Masonry

様々なサイズの要素をfloatさせて整列させることの出来るプラグイン「jQuery Masonry」を使ってみました。
今回、色々なサイズの画像を詰めて並べたいと思ったらこんなプラグインがありました!
導入も簡単なので使いやすかったです。

参考にさせていただいたページはこちら。
http://desandro.com/demo/masonry/docs/

まず、jquery.jsとjquery.masonry.jsをダウンローし、下記のように読み込みます。
そして、main.jsに導入用のソースを書きます。

・index,htmlの内容

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

・・・

<div id="item" class="wrap">
 <div class="box col1">
  <img src="'img_thumb.jpg'" alt="" width="150" />
 </div>
 <div class="box col1">
  <img src="'img_thumb.jpg'" alt="" width="150" />
 </div>
</div>

・style.cssの内容

.wrap {
    margin-bottom: 20px;
    clear: both;
}

.box {
    position: absolute;
    float: left;
}

.col1 {
    width: 150px;
    margin: 0 0 0 7px;
    padding: 0 0 10px 0;
}

.col1 img {
    max-width: 150px;
}

.wrap:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

・main.jsの内容

$(function(){
 columnMasonry();
});

function columnMasonry(){
 $('#item').masonry({
  columnWidth: 163,
  singleMode: true,
  animate: true
 });
}
2011年04月24日

jQuery:jquerymobile開発 galaxy s(Android 2.2)でselectboxが動作しなくなる

CTOA日記さんの記事を参考にさせてもらいました。
jquerymobile開発 galaxy s(Android 2.2)でselectboxが動作しなくなる

>特定の状況ですがdata-native-menu="true"にした場合、galaxy s(Android 2.2)動作しなくなります。
>xperia(Android2.1)は動作しました。
>以下のフォーラムでも問題として出ていました。
>https://github.com/jquery/jquery-mobile/issues/1051
対応方法としてはフォーラムにも貼られている以下のサンプルページだと動作するので、カスタマイズされたjquery >mobileのソースとdefault.cssを使えば解決します。
>http://jquerymobile.com/test/docs/forms/forms-selects.html
>上記を反映した場合、デフォルトでdata-native-menu="false"が設定されるので注意が必要です。


上記のように、特定の条件でselectboxが動作しなくなる場合があります。
フォーラムにて解決はしているようなのですがjquery-mobile.cssをdefault.cssに変えなければなりません。
ですが、丸々変えることでレイアウトの崩れが生じてしまいました。(必ず崩れるかは未確定です。)
そこで、default.css問題の個所を見つけ、jquery-mobile.cssに入れ込むことで問題を解決しました。

http://jquerymobile.com/test/themes/default/
このdefault.css1558行目をjquery-mobile.cssの該当箇所と差し替えることで動作するようになりました。



2011年01月13日

jQery:画像を先読みする

このような形で画像のパスをカンマで区切ったデータが先読みされます。


$(function(){
 $.preLoadImages('images/btn_category_img_5_on.gif','images/btn_category_img_5_off.gif');
}

(function($) {
 var cache = [];
 // 引数に画像URLを配列で渡す
  $.preLoadImages = function() {
   var args_len = arguments.length;
   for (var i = args_len; i--;) {
    var cacheImage = document.createElement('img');
    cacheImage.src = arguments[i];
    cache.push(cacheImage);
   }
   return cache;
  }
})(jQuery)
2011年01月12日

jQery:Flexible Accordionというアコーディオンメニューのプラグイン

Flexible Accordionというアコーディオンメニューのプラグインを使ってみました。
元サイトはなくなったみたいです。
これを少し、改造して開いているメニューをクリックしたら閉じるようにしたのとGETの値をとってメニューがページ遷移ごとに閉じないようにしました。

DEMO