jQuery toggleでアコーディオンメニュー

要素を押すとスライドして表示されるメニューを作る。

参考サイト

・超簡単jQuery！”toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法

slideToggleというのを使うとあっさりできるらしい。

これにちょっと手を加えて箇条書きリストの表示で作ってみる。

javascript

まずはjavascriptから。

/*---------------------------------------------------------------------------*/

<script type="text/javascript">

   $(function(){

       $("#accordion ul").on("click", function() {

           $(this).next().slideToggle();

       });

   });

</script>

/*---------------------------------------------------------------------------*/

accordionIDの下にある要素を弄くる。

css

/*---------------------------------------------------------------------------*/

#accordion ul#parent {

}

#accordion ul#child {

display:none;

}

/*---------------------------------------------------------------------------*/

とりあえず子要素を消すだけ。あとから色々デザインを変更できるように。

HTML

/*---------------------------------------------------------------------------*/

<div id="accordion">

<ul id="parent"><li>Parent</ul>

<ul id="child">

<li>Child

</ul>

</div>

/*---------------------------------------------------------------------------*/

これだけでできる。

便利だね。toggle。指定された要素の表示非表示を切り替えるメソッド。

CakePHP2.x Datepickerを使ってみる

HTMLのフォームに簡単に日付を入力する素敵なjQueryのライブラリがあるそうな。

その名もDatepicker! 早速使ってみよう。

参考サイト

・JQUERY UI DATEPICKER を試してみる（導入編）

jQueryUIをダウンロードする

サイトから普通にダウンロードしてくる。最新のものをダウンロードしてくれば問題なかろう。

使うのは以下の通り。

• js/jquery-1.10.2.js
• js/jquery-ui-1.10.4.custom.min.js
• development-bundle/ui/jquery.ui.datepicker.js
• css/ui-lightness/jquery-ui-1.10.4.custom.min.css

ファイルに付いている数値はバージョンなので時期によっては違う。

解凍したzipのフォルダ構成に基づいてファイル名を記述しているので、

これもバージョンによっては違うかも。

テスト用のHTMLを作成する

/*---------------------------------------------------------------------------*/

echo $this->Html->css('jquery-ui-1.10.4.custom.min.css', null, array('inline' => false));

echo $this->Html->script('jquery-1.10.2.js', array('inline' => false));

echo $this->Html->script('jquery-ui-1.10.4.custom.min.js', array('inline' => false));

echo $this->Html->script('jquery.ui.datepicker.js', array('inline' => false));

echo $this->Html->scriptStart(array('inline' => false));

   $(function() {

       $("#datepicker").datepicker();

   });

echo $this->Html->scriptEnd();

echo $this->Form->input("Test", array("type" => "text", "id" => "datepicker"));

/*---------------------------------------------------------------------------*/

テストしていないからエラーが出るかも。

IEだとinlineにfalseを指定してheadタグに構文を記述しないと動かないっぽい。

しかし、ブラウザキャッシュに気づかずテストを繰り返したため、原因は全然別かも。

とりあえずIE8だと動いた。

jQuery 「jQuery Slider²」を使い、さらに弄ってみた

以前bxsliderを使う記事を上げた。
じゃあもうスライダーはこれでいいな、と思っていたら、
なぜかまったく関係ない要素表示が乱れるというバグが発生。
原因が全然分からんかったので、jQuery Slider²に乗り換えてみた。

参考サイト
・とても簡単で軽量なjQueryスライダー「jQuery Slider2」を使ってみる | bl6.jp

まずは実行だ

というわけでサイトからダウンロードしてきてテスト。

特に特別なこともなく、jsファイルとcssファイルを読み込んだら、

htmlに動かしたい要素を追加してjavascriptで要素を指定してやるだけ。

さて、ここでひとつ問題にぶち当たった。

どうにもjQuery Slider²はページナビを右端から順繰り表示がデフォらしい。

オプションやcssを弄ってどうにかならんかと思ったけど、

オプションにはないし、cssはabsoluteが指定されているしでどうしようもない感じ。

仕方ないから、jsファイルを弄る。

ページナビをセンタリングする

参考サイト

・[CSS]absolute絶対的で真ん中寄せにする

・jQueryでCSSを追加/削除する時のまとめ

使用ツール

・Online JavaScript beautifier

まずはcssから余計な要素を削除しする。具体的にはtopとかrightとか。

leftは50%指定に変更。

/*---------------------------------------------------------------------------*/

.jquery-slider-pages {

   overflow: visible;

   position: absolute;

   bottom: 5px;

   left: 50%;

}

/*---------------------------------------------------------------------------*/

そしてjsファイルをツールで整形。

jquery-slider-pagesクラスを追加している部分で

要素数×ページナビの横幅÷２

ピクセル分margin-leftをマイナスしてあげよう。

/*---------------------------------------------------------------------------*/
if (settings.showProgress) {
positionEls.CSS("margin-left", -(count*pixel/2)+"px");
$this.append(positionEls);
}
/*---------------------------------------------------------------------------*/

これでセンタリングが完了。

それっぽい見た目にはなったかな。

jQuery leanModalを使ってみる

ボタンを押すと新しいウィンドウが出てきて、他の操作ができなくなるやつ。
モーダルダイアログというらしい。だからModalか。
今回はその中でも基本的な機能のみのleanModalを使う。

/*---------------------------------------------------------------------------*/

leanModalをダウンロードする

サイトからjsファイルをダウンロード。cssはセットになっていないので自分で作る。

ダウンロードしたのと同じサイトにサンプルがあるからそのままコピペでも十分。

leanModalを使う

以下のサイトがわかりやすく説明してくれてる。

・シンプルにモーダルウィンドウを実装できる「leanModal」

表示するために追加する要素はきちんとdisplay:noneしてあげよう。

でないと一度実行されるまで堂々と画面に存在してくれちゃう。

/*---------------------------------------------------------------------------*/

基本的な機能のみというものの、これだけで十分な気もする。

closeButtonを指定してあげれば、閉じる用のボタンも作れる。

なにより基本機能しかないということは、カスタマイズ性が高いということ。

自分がほしい機能によっては既存のものを探すより、leanModalをもとにして自分で

作ったほうが早いかもしれない。

jQuery 画像をスライドさせる

バナー画像をスクロールさせよう。
そんな感じのをいろんなサイトで見かけるぞ。

ということで
そのいろんなサイトでバナーをスクロールさせているjQueryプラグイン bxSlider を使う。

使い方は簡単。
サイト(http://bxslider.com/)からファイルをダウンロードして、
使用しているサーバーの適切なディレクトリに配置。
使用したいページで呼び出す。

/*---------------------------------------------------------------------------*/

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(function() {
  $('.bxslider').bxSlider(
    auto:true,
    responsive:true,
    slideWidth:240 });
});
</script> <div id="title">bx_slider</div> <ul class="bxslider">
    <li><img src="/images/pic1.jpg" /></li>
    <li><img src="/images/pic1.jpg" /></li>
    <li><img src="/images/pic1.jpg" /></li>
</ul>

/*---------------------------------------------------------------------------*/

たったこれだけのコードでできちゃう！
便利便利。
オプションで色々設定もできるみたい。

今回は以下の二つのサイトを参考にしました。
http://wp-and.me/bxslider/
http://cotdeve.com/blog/jquery/jquery-%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%B7%E3%83%A7%E3%83%BC-bxslider/

ところでbxSliderのbxってなんなんだろう？　まさかboxじゃないよね。

jQueryを使ってみた -要素の取得とbindメソッド-

jQueryどころかjavascriptすら良く知らないけど、
webページでスライダーを使うというからやってみた。
jQueryって支援ライブラリだったのね。

とりあえず参考ソースが手元にあったのでそれを参考にする。

...うまくいかねえ！

というわけでネットで調べつつ初歩の初歩からやってみる。

まずはhtml上の要素を取得する

    var element = $("div");     // 要素の名前で直接
    var element = $("#hoge");   // id
    var element = $(".hoge");   // class

あら簡単。
さあやってみよう。

...またしてもうまくいきませんよ？

苦悩にうなり声を上げつつ格闘し続けた結果、原因がわかった。
javascriptの定義のところにべた書きしてたのが問題っぽい。
window.onloadメソッドの中でやったらちゃんと要素を取得できた。
要素がそもそも生成されていなかったってことか？
なんにせよ要素が取得できたので次に進む。

要素を取得したらば次は取得した要素がタッチしてるときに反応するようにする。
bindメソッドを使えばそれができるらしいぞ。

    obj.bind( "click", function(){
        alert( "click event" );
    } );

メソッドのテストをしたいだけなので要素がクリックされたらアラート画面を呼び出す。
今度はつまずくことなくうまくいった。

とりあえず簡単にjQuery。
...まさかたったこれだけのことをやるのに半日以上かかるとは...。