jQueryでhtml5のdata属性の値を取得

jQueryの短縮記法について。

jQueryで、ある属性にどんな値が設定されているか取得するには
このようにattr属性を使います。

<a href="index.html">index</a>
var a_href = $('a').attr('href');

これが、html5でオリジナルの属性を設定できるdata属性だと
attrのままでも取得できますが
dataをつかって記述を短縮することもできます。

<a href="index.html" data-category="topic">index</a>
var a_attr_category = $('a').attr('data-category');
var a_category = $('a').data('category');

iPad向けにjQueryUIのカレンダーDatepickerを設定

iPadで、jQueryUIのDatepickerを使ったカレンダー選択式の
日付選択フォームを実装したときのポイントをまとめてみました。

ipad-jqueryui-datepicker

Datepickerをそのまま適用すると、パソコン向け仕様のままなのでこうなります。

  • 日付が小さくて押しにくい
  • カレンダーが開くとキーボードも開いて画面が狭くなる
  • 入力欄が端のほうにあるとカレンダーが画面外に見切れる

これらをタッチデバイス向けに改良しつつ
クライアントワークなので、オリジナルデザインで実装しました。

  1. jQueryUIをダウンロード
  2. カレンダー表示を日本語化
  3. CSSの適用
  4. フォーカスした時iPadのキーボードが開かないようinputにreadonlyを設定
  5. 初期値で今日の日付を設定
  6. 入力キャンセルのための「閉じる」ボタンと、月を移動した状態から今月へ戻る「今日」ボタン追加

サンプルソース

案件で実装した際はこの他に
inputを選んだ時はで日付のキーボード直接入力とし
input横のカレンダーボタンを選んだ場合だけカレンダー入力できるようにする改造もあったのですが
この対応ではライブラリの jquery-ui-1.10.4.custom.js を直接編集しており
複雑になってくるので、今回は割愛します。

“iPad向けにjQueryUIのカレンダーDatepickerを設定”の続きを読む

jQueryで一定期間ごとに処理を繰り返す

無名関数を使って一定期間ごとに処理を繰り返す。

たとえば、iframeで表示するsample.htmlの内容量に応じてiframeの高さを変えたい場合
sample.htmlの内容を取得できたかどうか0.1秒ごとに確認し
取得できていたらiframeの高さを取得して設定する処理だったらこんな感じ。

<iframe id="iframe_content" src="sample.html"></iframe>
var iframe_content = $("#iframe_content")[0].contentWindow;
(function() {
	if (iframe_content.$ && iframe_content.$.isReady) {
		$("#iframe_content").height(iframe_content.height());
		return;
	}
	setTimeout(arguments.callee, 100); // 何秒間隔で実行するか設定(単位:ミリ秒)
})();

jQuery+ajaxでRSSフィードのxmlを読み込む

jQueryのajaxでwordpressのRSSフィードを読み込んで表示させるサンプル。

$.ajax({
	url: '【フィードのURI】',
	async: true,
	cache: false,
	dataType:"xml",
	success: function(xml){
		$(xml).find('item').each(function(){
				$('【取得したタイトルを出力したい場所】').prepend($(this).find('title').text());
			}
		});
	}
});

Google Libraries API を使う

Google Libraries API を使うと、jQueryやYUI、PrototypeなどをGoogleから直接ダウンロードして使えます。

例えば、jQueryを読み込みたい場合は、head内にこう追記すると読み込めます。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.7");
</script>

読み込めるプラグイン等のラインナップは、こちらにリストアップされていました。

https://developers.google.com/speed/libraries/

jQueryのように、jsファイル1コ追加すればいけるものは、手順に大差ないので
どうかな〜と思いましたが

Ext Coreなんかは、ファイルを大量に設置するので
数行ソースを追加するだけで直接ダウンロードできると手間がだいぶ省けます。

jQueryでeach

要素数だけループしてくれるeach関数、これをjQueryで使うときのメモ。

jQueryを使いつつ、配列の要素数だけ処理を実行させようと
eachでこんな書き方をしたらエラーになった。

配列の変数名.each(function(e) {
     $('input#'+e).attr('checked','checked');
});

jQueryでは、$().each() 配列などに使用するeachを区別するためちゃんと jQuery.each() というのが用意されていた。

“jQueryでeach”の続きを読む

html5のplaceholderをIEで再現するjQueryプラグイン

練習で、html5のplaceholder(プレースホルダー)をIEでも再現するためのプラグインを作ってみました。

このように、対応ブラウザ向けの記述だけでIEでもプレースホルダーらしい機能がついた状態になります。

<input type="text" name="name" placeholder="名前を入力して下さい">

試作版ということで、主にこんなところが抜けています

  • プレースホルダーの内容がフォームより長い場合は、はみ出す
  • フォームをブロック要素(div)で囲う仕組みなので、どんなレイアウトでも簡単に組み込めるか不明
    とりあえず、よくある<table>タグで組んであるフォームでは差し支えなかった…。
  • スタイルシート部分が決め打ち状態なのでカスタマイズは面倒

jQuery1.7 + IE6,7,8,9で、動いてることを確認しています。
1.7にした深い意味はないし、メジャーバージョンに更新する時は1.6から対応に落とそう。

デモも設置してないし、適当すぎやな。

“html5のplaceholderをIEで再現するjQueryプラグイン”の続きを読む

自作jqueryプラグインの最小構成

jQueryプラグインの最小構成をメモ。

(function($){
	$.fn.プラグイン名称 = function() {
		return this.each(function() {
			ここに処理を書く
		});
	};
})(jQuery);

例:上記のプラグインをpに適用するときは、こう書く。

$('p').プラグイン名称();