こんにちは山田です。
今回モーダルウィンドウを実装するにあたって
プラグインを使用したのでその覚書です。
■そもそも、モーダルウィンドウとは
何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計
（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.c...
2015年12月21日月曜日
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");
...
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 : '今日',
...
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で指定された画像を発見した際、即時画像のダウンロードを開始します。
画像の遅延読み込みとは、この読み込みタイミングを遅延させ、ページを一度表示し終わった後に非同期でダウンロードしようというものです。
ブラウザの表示領域は限られていますから、表示領域の外にある画像は、あとから読み込んでも影響は少ないよね、という考え方です。
これにより、最初にページ読み込みが完了までのページ容量を削減し、表示速度の高速化が期待できます。
使い方
簡単な使い方は以下の通りです。
jquery本体とlazyloadを読み込みます。
遅延読み込みさせたいimgタグにlazyクラスを付与します。このクラス名は任意に変更可能です。srcには仮で表示させる画像を指定しておき、data-originalに本来表示させる画像のURLを指定します。
step2で付与したlazyクラスを持つ要素に対して、lazyloadを実行します。その際、様々なオプションを渡すことができます。
$(function...
登録:
投稿 (Atom)