【メモ】タグに独自属性を設定してjQueryで取得する

独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP

独自データ属性は、名前空間に属さない属性で、その名前は文字列 “data-” で始まり、ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。 (中略) すべての HTML 要素に対して、独自データ属性をいくつでも、どんな値でも指定することができます。

使用例

Ippei Suzuki
これを取得するには、 関数data()を使うと便利です。
$('#userName').data('userId');

注意

data()は、もともとは要素にデータを付与しそれを取得するための関数で、HTMLのパースとは関係がありません。付与されたデータはjQueryのキャッシュデータとして保存されます。一方で属性を取得する関数attr()の方は、キャッシュは利用をせずHTMLを読みに行くので、この2つを同時に使うと混乱します。具体的には、atr()で更新したデータがdata()で取得出来ないなど。
$('#userName').data('userId'); //1234
$('#userName').attr('data-userId', '5678');
$('#userName').data('userId'); //1234 ← キャッシュを読み込む
$('#userName').attr('data-userId'); //5678 ← 属性を見る
その辺りは気をつけて上手いこと処理してやる必要があるようです。

参考

独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP jQueryのdata-*属性キャッシュ仕様と対策

続きを読む

コンテンツの終わりまで読み込むと次のコンテンツを自動的に読み込む(autoload) 【feedpost tips】

jQuery.jpg 先日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。 5回目はコンテンツの終わりまで読み込むと次のコンテンツを自動的に読み込む仕組み、通称「autoload」とか「autopager」とか言われている仕組みの実装です。

続きを読む

スマートフォンでのタッチアクションを実装するjQueryプラグイン「hammer」 【feedpost tips】

jQuery.jpg 先日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。4回目はスマートフォンでのタッチアクションを実装するjQueryプラグイン「hammer」。独立版とjQuery版とあるのだけど、その辺はお好みで。ここではjQuery版。導入はとっても簡単で、jQueryと一緒に読み込むだけ。使い方の例は例えばこんな感じ。

続きを読む

キーボードショートカットを実装するjQueryプラグイン「hotkeys」 【feedpost tips】

jQuery.jpg 昨日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。 2回目はキーボードショートカットを実装するjQueryプラグイン「hotkeys」。 導入はとっても簡単で、jQueryと一緒に読み込み、 イベントをキーに合わせて設定してやればOK。 フォーカスがdocumentにあるときの設定は例えばこう。 このサンプルでは「J」キーを押すと「pressed J key」というポップアップが表示されます。input欄やtextarea欄にカーソルがあるときには反応しないので、神経質になりすぎることなく設定出来ます。

続きを読む

$.post()のコールバックが動くのはHTTPステータスコードが2xxのとき(jQuery)

前回の続き、というか補足メモ。 jQueryで作るAjaxな検索フォーム(テスト) | mutter

JavaScript: 検索部分

function sampleSearchFilckr () {
var word = $('#sampleSearchWord').val();
if(!word) {
alert('検索語を入力してください');
return false;
}
//検索
$.post(
'/sample/flickr',
{"q": word},
function(data, status) {
//searchに成功したら結果を表示する
$('#sampleSearchResult').html(data);
},
"html"
);
}

続きを読む

jQueryで作るAjaxな検索フォーム(テスト)

技術的にはだいぶ今さら感ある話題ですが作業のまとめとして。

サンプル

表題のフォームというのはこんな感じのです。
#sampleSearchResult a { border: none !important }

仕様

  • 検索語句を入力して「Flickrで検索する」を押すと僕のFlickrでの検索結果を表示する
  • 「クリア」を押すと検索語句と検索結果を削除する
  • 検索語句入力欄でリターンキーを押しても検索を開始する

続きを読む

【メモ】 imgを子要素に持つアンカーにクラス名を付与する 【jQuery】

(function() {
$('#main').find('a').each(function(){
if($(this).children('img'))
$(this).css('border', 'none');
});
})();
リンクを貼っているのがテキストの場合には下線を引きたいけど、画像の場合には下線を引かないようにしたいと言う場合にCSSで何とかならないかと試行錯誤したけど無理そうだったのでjQueryで。勉強がてら。 参考書を手に組み立てると上みたいになるんだけどなんか無駄が多い気がする… 継続審議。

修正(2011/11/29)

上手く動いてませんでした。次のように修正。
(function() {
$('#main').find('a').each(function(){
$(this).children('img')).parent().css('border', 'none');
});
})();

続きを読む

画面遷移せずにポップアップを実現できるjQueryプラグイン「prettyPopin」

prettyPopin is a jQuery plugin that serves as a modal box. It is easily customizable and proved a lightweight solution to quickly and easily display content in context. It provides a nice way to display simple content or simple forms.
 
jQueryさえ利用していれば非常に少ない量のコードで簡単に実装でき、 CSSによるデザインのカスタマイズも柔軟に出来るという点で非常に便利です。 (異なるドメインのページを読み込むことは出来ませんが) 導入に当たっては以下のサイトを参考にさせていただきました。

参考

簡単にポップアップを実現するjQueryプラグイン「prettyPopin」 | HAPPY*TRAP なお、prettyPopin()を呼び出すときの設定については、 公式サイトのドキュメントに仕様がありますが、 prettyPopin documentation | Stéphane Caron – No Margin For Errors 合わせて姉妹プラグイン「prettyPhoto」のドキュメントを読むといろいろ捗ります。 prettyPhoto documentation | Stéphane Caron – No Margin For Errors 「prettyPopin」は「prettyPhoto」の簡易版という感じなのでしょうかね。

続きを読む