ウェブの技術とか開発環境構築の覚書。
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を使ったカレンダー選択式の
日付選択フォームを実装したときのポイントをまとめてみました。
Datepickerをそのまま適用すると、パソコン向け仕様のままなのでこうなります。
これらをタッチデバイス向けに改良しつつ
クライアントワークなので、オリジナルデザインで実装しました。
案件で実装した際はこの他に
inputを選んだ時はで日付のキーボード直接入力とし
input横のカレンダーボタンを選んだ場合だけカレンダー入力できるようにする改造もあったのですが
この対応ではライブラリの jquery-ui-1.10.4.custom.js を直接編集しており
複雑になってくるので、今回は割愛します。
無名関数を使って一定期間ごとに処理を繰り返す。
たとえば、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); // 何秒間隔で実行するか設定（単位：ミリ秒）
})();
この要素にcssでどんな指定があるか逆引きしたいときのｊQuery
たとえば、#testのpadding-topの値がいくつか調べる場合
var test_paddingTop = $("#test").css("paddingTop");
alert(test_paddingTop);
これで、変数test_paddingTopへ#testのpadding-topが何pxなのか取得できる。
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 を使うと、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なんかは、ファイルを大量に設置するので
数行ソースを追加するだけで直接ダウンロードできると手間がだいぶ省けます。
要素数だけループしてくれるeach関数、これをjQueryで使うときのメモ。
jQueryを使いつつ、配列の要素数だけ処理を実行させようと
eachでこんな書き方をしたらエラーになった。
配列の変数名.each(function(e) {
$('input#'+e).attr('checked','checked');
});
jQueryでは、$().each() 配列などに使用するeachを区別するためちゃんと jQuery.each() というのが用意されていた。
練習で、html5のplaceholder（プレースホルダー）をIEでも再現するためのプラグインを作ってみました。
このように、対応ブラウザ向けの記述だけでIEでもプレースホルダーらしい機能がついた状態になります。
<input type="text" name="name" placeholder="名前を入力して下さい">
試作版ということで、主にこんなところが抜けています
jQuery1.7 ＋ IE６，７，８，９で、動いてることを確認しています。
1.7にした深い意味はないし、メジャーバージョンに更新する時は1.6から対応に落とそう。
デモも設置してないし、適当すぎやな。
プラグイン作成の練習で、リンク範囲を拡張するプラグインを作ってみた。
jQueryプラグインの最小構成をメモ。
(function($){
$.fn.プラグイン名称 = function() {
return this.each(function() {
ここに処理を書く
});
};
})(jQuery);
例：上記のプラグインをpに適用するときは、こう書く。
$('p').プラグイン名称();