ラベル jquery の投稿を表示しています。 すべての投稿を表示
ラベル jquery の投稿を表示しています。 すべての投稿を表示

2015年12月21日月曜日

モーダルウインドウのプラグインを使ってみた

  
こんにちは山田です。
 今回モーダルウィンドウを実装するにあたって プラグインを使用したのでその覚書です。

 ■そもそも、モーダルウィンドウとは
何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計
 （https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%BC%E3%83%80%E3%83%AB%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6）

モーダルウィンドウでググると、かなりたくさんプラグインが出ていることがわかりました。
びっくりです。
その中でも一番簡単にできそうなものをチョイスしてみました。

■使用したプラグイン 今回使ったプラグインはこちら
http://zurb.com/playground/reveal-modal-plugin

■3分でわかるモーダルウィンドウ組み込みの流れ

①上記のURLからファイル一式をダウンロードし、目的のディレクトリに配置
②ヘッダー部分にjsの読込を追加
④HTMLに、下記のようなフォーマットで記述する
クリックしてみてください

以上

2015年12月18日金曜日

DOM読み込み時に動作させる　$(document).ready

  
こんにちは山田です。

DOMという言葉を最近知りました。

■DOMとは　：XMLやHTMLで記述された文書をプログラムやスクリプトから参照あるいは操作するための方法を提供する仕組み（出典｜ASCII.jpデジタル用語辞典）

というわけで
DOMの読み込み完了時のみに処理をいれたい時に使う関数の紹介です。
フロントエンドだと、jQueryがやっぱり便利ですね。

■関数はこちら
JavaScript 
jQuery(document).ready(function(){
　//実行したい関数
});

■実際に作ったソース

非表示にしたい要素を隠したり、
タブ付きメニューのタブ部分とパネル部分の初期化を行ってみました。

jQuery(document).ready(function(){
　 //閉じたい要素を閉じたり
 $("#placeCount").css("display","none");
 
 //タブ付きメニューの、タブとパネル部分の初期化
 $("#tab li:first").addClass("tabCurrent");
 $(".panel:not(:first)").hide();
});

2015年12月16日水曜日

CSSのDisplayプロパティ

  
こんにちは山田です。

JSの制御で、
データがない時は、丸ごと消しときたい時ってありますよね
その時の実装例です。 




件数件



$(function() {
    $('button').click(function(){
        $('div').css('display', 'none');
    });
});

ちなみにjQueryの .hide()はこれと同様にdisplayプロパティのblock→noneの動作をさせることが出来ます。

2015年10月20日火曜日

「datepicker」を日本語化する

  
こんにちわ、開発者のⅠです。

前回紹介したdatepickerについて、各表記をデフォルトの”英語”から”日本語”に変更してみたいと思います。

それでは、datepickerの各プロパティに対して表示させたいもの(日本語)を設定してあげましょう。



/* 日本語化してみよう */

jQuery(function($){
    $.datepicker.regional ['ja'] = {
        closeText : '閉じる',
        prevText : '<前',
        nextText : '次>',
        currentText : '今日',
        monthNames : ['1月',　'2月',　'3月',　'4月',　'5月',　'6月',　
        '7月',　'8月',　'9月',　'10月',　'11月',　'12月'],
        monthNamesShort : ['1月',　'2月',　'3月',　'4月',　'5月',　'6月',　
        '7月',　'8月',　'9月',　'10月',　'11月',　'12月'],
        dayNames : ['日曜日',　'月曜日',　'火曜日',　'水曜日',　'木曜日',　'金曜日',　'土曜日'],
        dayNamesShort : ['日',　'月',　'火',　'水',　'木',　'金',　'土'],
        dayNamesMin : ['日',　'月',　'火',　'水',　'木',　'金',　'土'],
        dateFormat : 'yy/mm/dd',
        firstDay : 0,
        isRTL : false,
        showMonthAfterYear : true,
        yearSuffix: '年'};

    $.datepicker.setDefaults($.datepicker.regional['ja']);
});


 これで、カレンダーの表記が日本語に変化しているはずです。
この他にも、日本語化対応だけではなく、特定の部分の表示・非表示を切り替えることもプロパティを指定することで可能です。

 それでは、今回はここまでです。
次回、またお会いしましょう。






2015年10月19日月曜日

jQuery UI の「datepicker」とは？

  
こんにちわ、開発者のⅠです。
今回は、datepickerについてお話したいと思います。

このdatepickerは、カレンダーを表示させて日付を選択させるUIを実現するために用いるjQuery(Javascriptのライブラリ)の一つです。

まず利用するためには、j Query 本体を読み込む必要がありますが、自分のローカルに保存する必要はなく、以下の様にソースに直接書き込むことでインターネット経由で読み込むことが可能です。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


ただし、デフォルトの状態では年や月などの表記はすべて英語になってしまいます……。
デザインを変更するには、その設定を記述する必要が有りますが、その話はまた次回にしたいと思います。

それでは、また！

※参考ページ



2015年10月16日金曜日

jquery.lazyload.jsを使ってみた(画像の遅延読み込み)

  
こんにちは開発者のKです。

スマートフォンでWebページを閲覧する機会が増えた昨今、比較的貧弱な3G回線でもスムーズに閲覧できるように
サーバへのリクエスト数やダウンロードするリソースの容量はなるべく抑えたいですよね。

通常ページ容量の大半を占めるのは画像だと思いますので、その一つの解決策として画像の遅延読み込みを実装したjqueryのプラグイン「jquery.lazyload.js」を使ってみましたので所感を述べたいと思います。

遅延読み込みについて

通常ブラウザはHTMLを1行目から順に解析していき、imgタグやcssのbackgroudで指定された画像を発見した際、即時画像のダウンロードを開始します。
画像の遅延読み込みとは、この読み込みタイミングを遅延させ、ページを一度表示し終わった後に非同期でダウンロードしようというものです。
ブラウザの表示領域は限られていますから、表示領域の外にある画像は、あとから読み込んでも影響は少ないよね、という考え方です。
これにより、最初にページ読み込みが完了までのページ容量を削減し、表示速度の高速化が期待できます。


使い方

簡単な使い方は以下の通りです。
  1. jquery本体とlazyloadを読み込みます。
  2. 遅延読み込みさせたいimgタグにlazyクラスを付与します。このクラス名は任意に変更可能です。srcには仮で表示させる画像を指定しておき、data-originalに本来表示させる画像のURLを指定します。
  3. step2で付与したlazyクラスを持つ要素に対して、lazyloadを実行します。その際、様々なオプションを渡すことができます。

lazyloadのオプション

ソースを見ると、lazyloadには様々なオプションがありますが、公式ドキュメントなどでもあまり触れられていないので、紹介したいと思います。

threshold

thresholdで指定したピクセル数より下にある画像を読み込み対象とすることができます。
デフォルト値は0なので、描画領域に入った際に読み込み開始しますが、例えばスマートフォンで縦にスクロールしていくリストページを考えた時、640としておけば次の1スクロール分も事前に読み込んでおくことができます。

failure_limit

一度読み込み対象となったが、何らかの理由により読み込み完了していない画像を、何回まで再読み込みを試みるかを指定します。
コードを読んだだけで実際に試していないので、間違っていたらすみません。

event

読み込み対象を検知するイベントを指定します。デフォルトはscrollなので、ページスクロールの度に読み込み対象を再走査します。
ここにはカスタムイベントを指定することも可能で、例えばスワイプによるカルーセルUIを実装したプラグインと組み合わせて、スワイプの度に再走査をかけることも可能です。
※jqueryカスタムイベントの発火はtrigger('event_name')で行えます。

effect

遅延読み込み後に画像を表示する際の効果を指定します。デフォルトのshowはただ表示するだけですが、
fadeInとすると、アニメーションでリッチに表示することができます。

container

遅延読み込みを行う範囲を指定します。デフォルトはwindowオブジェクトなので、ページ全体となります。
特定のdivタグ内に限定したい場合などに使えると思います。

data-attribute

imgタグのdata属性の名前を変更できます。デフォルトはサンプルの通りdata-originalですが、他ライブラリとの名前の衝突などで変更したい場合に役立ちます。

skip_invisible

trueを指定すると、対象の画像が可視状態でない場合(display: noneなど)は読み込みがスキップされます。

appear

対象の画像が描画領域に入った際に(threshold含む)実行されるコールバックメソッドを登録できます。
第一引数には遅延読み込み前の要素数、第二引数にはオプション(lazyloadで渡したものとデフォルト値がマージされたもの)が渡されます。
一覧ページにおいて、画像以外にもtwitter, Facebookボタンの様な通信を要するウィジェットが実装されているケースがあるかと思います。
そんな時にページ表示時にまとめて初期化するのではなく、個別に初期化処理を走らせれば、より初回表示時のコストを削減できますね。
イメージ：
$('img.lazy').lazyload({
    appear: function (left, settings) {
        // ツイートボタンも遅延読み込み
        (typeof twttr !== 'undefined') && twttr.widgets.load();
    }
});

load

appearと似ており、対象の画像が読み込み完了した際に実行されるコールバックメソッドを登録できます。

placeholder

画像が遅延読み込みされるまでに表示する仮画像を指定します。
デフォルトではグレーの画像となっていますが、任意の画像に差し替えることができます。
元のimgタグのsrcに指定しても同じ挙動となります。


遅延読み込みはSEO的に良くない？

こんな記事がありました。
最近ではGoogleのクローラもJavascriptを実行できるようですが、遅延読み込みのトリガーの実装方法によっては、クローラに画像が認識してもらえないケースがあるとのことです。
ユーザの入力を起点(スクロール等)とする場合、クローラは再現できないようですね。

実際にFetch as Googleしてみて何かわかったらまた記事にしたいと思います。


登録: 投稿 (Atom)