マウスポインターが要素に出入りした時の処理を実装するには？（mouseover、mouseout、mouseenter、mouseleave、hover）
違いが分かりにくい「mouseover／mouseout」と「mouseenter／mouseleave」イベントの使い分け方法を解説。また、これらに関連する「hover」イベントメソッドについても説明する。 ← 前回 連載 INDEX 次回 → 別稿「イベントに応じて処理を実行するには？」の表でも触れたように、jQueryではさまざまな＜イベント名＞メソッドが標準で用意されています。そのうち、ほとんどが直感的に理解できるものばかりですが、mouseover／mouseoutとmouseenter／mouseleaveの違いは一見して分かりにくいものです。 本稿では、具体的なサンプルの中で、両者の違いを示すと共に、マウスの出入りを簡単に検出するhoverメソッドについても触れます。 mouseover／mouseoutとmouseenter／mouseleaveイベントの基本 まずは、具体
【メモ】タグに独自属性を設定してjQueryで取得する
独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP 独自データ属性は、名前空間に属さない属性で、その名前は文字列 “data-” で始まり、ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。 （中略） すべての HTML 要素に対して、独自データ属性をいくつでも、どんな値でも指定することができます。 使用例 注意 data()は、もともとは要素にデータを付与しそれを取得するための関数で、HTMLのパースとは関係がありません。付与されたデータはjQueryのキャッシュデータとして保存されます。一方で属性を取得する関数attr()の方は、キャッシュは利用をせずHTMLを読みに行くので、この2つを同時に使うと混乱します。具体的には、atr()で更新したデータがdata()で取得出来ないなど。 $('#use
コンテンツの終わりまで読み込むと次のコンテンツを自動的に読み込む（autoload） 【feedpost tips】
先日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。 5回目はコンテンツの終わりまで読み込むと次のコンテンツを自動的に読み込む仕組み、通称「autoload」とか「autopager」とか言われている仕組みの実装です。 基本的な考え方 必要になる技術・概念は次の通りです。 コンテンツの終わりの座標（縦位置）を取得する 今現在どの座標（縦位置）まで表示したかを取得する 次に表示すべきコンテンツを取得して（Ajax）表示する 簡単なサンプルコードは次のページにわかりやすくまとめられているので参考にしてみてください。 jQueryゼロから / オートロード(スクロールすると次のページを自動読み込み) | ゆるぶ | ページ 513 「feedpost」での実装 こんな感じ。 上で挙げたサンプルと違うのは取得を開始する位置が「コンテンツ下辺から2,000p
[feedpost] タグ入力に補完機能を追加しました。
RSSフィードを読み込み、ワンクリックでTumblrへpost/reblogすることが出来るツール「feedpost」に、 タグ入力の補完機能を追加しました。 feedpost – post/reblog to Tumblr with RSS Feed. これまでにfeedpostを使ってpostまたはreblogした時に使用したタグ入力履歴から、タグ入力欄に入力した文字に従って入力補完を行います。 上のサンプル画像では「d」を入力した際に、部分一致でヒットするタグ一覧がリスト表示されています。一覧に表示されたタグは、マウスまたはキーボードの上下とEnterキーで選択・入力することが出来ます。 また、複数タグの入力も可能です。 reference この機能を実装するにあたり次のライブラリを使用しました。 suggest.js – 入力補完ライブラリ またいずれ別記事で取り上げる予定ですが、
![[feedpost] タグ入力に補完機能を追加しました。](https://cdn-ak-scissors.b.st-hatena.com/image/square/546a62a2ea3f21079699ad8d7f4b8c158b29dc95/height=288;version=1;width=512/https%3A%2F%2Fnplll-static.s3-ap-northeast-1.amazonaws.com%2Fassets%2F2014%2F03%2F15_01.jpg)
スマートフォンでのタッチアクションを実装するjQueryプラグイン「hammer」 【feedpost tips】
先日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。4回目はスマートフォンでのタッチアクションを実装するjQueryプラグイン「hammer」。独立版とjQuery版とあるのだけど、その辺はお好みで。ここではjQuery版。導入はとっても簡単で、jQueryと一緒に読み込むだけ。使い方の例は例えばこんな感じ。 で、ダブルタップで何かしたいときはこんな感じ。 これだけでモーションが設定出来ます。 設定次第でスマートフォンでダブルタップ、同じ動作をPCでダブルクリックといった感じで実装出来ます。設定出来るアクションについてはこのあたりを参考にしてください。 Hammer.js ……簡単だなあ……
キーボードショートカットを実装するjQueryプラグイン「hotkeys」 【feedpost tips】
昨日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。 2回目はキーボードショートカットを実装するjQueryプラグイン「hotkeys」。 導入はとっても簡単で、jQueryと一緒に読み込み、 イベントをキーに合わせて設定してやればOK。 フォーカスがdocumentにあるときの設定は例えばこう。 このサンプルでは「J」キーを押すと「pressed J key」というポップアップが表示されます。input欄やtextarea欄にカーソルがあるときには反応しないので、神経質になりすぎることなく設定出来ます。 特定の要素に対して設定することも可能です。 例えばidが「sample」と言う要素に対して設定する場合にはこんな感じ。 普通キーボードショートカットというと、それぞれのキー配列に応じた数値（例えば「J」なら74）を指定しなければいけないところ、直
ダブルタップイベントを利用可能にするjQueryプラグイン「jquery.event.dblTap.js」
ダブルタップイベントを利用可能にするjQueryプラグイン「jquery.event.dblTap.js」 Check Tweet 配布元:iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」[to-R] ライセンス:MITライセンス 「jquery.event.dblTap.js」はiPhone/iPad、Androidなどのスマートフォンでダブルタップイベントが利用可能になるjQueryプラグインです。 利用方法 配布サイトよりダウンロードした「jquery.event.dblTap.js」をjQuery本体の後に読み込みます。 <script src="jquery-.min.js"></script> <script src="jquery.event.dblTap.js"></script> ダブルタップイベントを
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
さくっと簡単！jQueryでコンテンツをオーバーレイ表示させる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、デザイナーのはやちです✌(´ʘ‿ʘ｀)✌ 梅雨明けの暑さでバテ気味です…この暑さ嫌ですな c⌒っ´ʘ‿ʘ｀)っ はやちは静かに暮らしたい c⌒っ ◞‸◟ )っ そんなこと言ってもこの暑さは和らぎません(◞‸◟) 今回はjQueryで簡単にコンテンツをオーバーレイ表示させる方法をご紹介していきます(◞‸◟) オーバーレイとは ライトボックスのように要素の上に要素を重ねて表示させる方法です 上に重ねる方の要素を半透明にさせて下の要素がうっすら見えるような表現に多く使われます( ˘ω˘)☝ HTML </pre> <div id="overlay"> <p id="text">ｲｪｰｰｲみてるぅ✌(´ʘ‿ʘ｀)✌</p> <p id="close">close</p> </div> <div id="btn">click</div> <pre> ID名overlayはオーバーレイされ
%25E3%2580%2581nextAll()%25E3%2580%2581prev()%25E3%2580%2581prevAll()%25EF%25BC%2589)
reCatnap: お知らせ：Jqueryで対象の次や前要素を取得（next()、nextAll()、prev()、prevAll()）
お知らせ：Jqueryで対象の次や前要素を取得（next()、nextAll()、prev()、prevAll()） 今まで使っていたMediaWikiが壊れました。 お探しの「 jqueryで対象の次や前要素を取得（next()、nextall()、prev()、prevall()） 」ですが、確約はできませんが似たような内容をラボにてまとめていきます。 ラボのTOPページへ戻る
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
$.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" ); } この部分がコールバックになるわけですが、 function(data, status) { //searchに成功したら結果を表
jQueryで作るAjaxな検索フォーム（テスト）
技術的にはだいぶ今さら感ある話題ですが作業のまとめとして。 サンプル 表題のフォームというのはこんな感じのです。 Flickrで検索する クリア #sampleSearchResult a { border: none !important } 仕様 検索語句を入力して「Flickrで検索する」を押すと僕のFlickrでの検索結果を表示する 「クリア」を押すと検索語句と検索結果を削除する 検索語句入力欄でリターンキーを押しても検索を開始する JavaScript: 検索部分 function sampleSearchFilckr () { var word = $('#sampleSearchWord').val(); if(!word) { alert('検索語を入力してください'); return false; } //検索 $.post( '/sample/flickr', {"q"
【メモ】 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'
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
画面遷移せずにポップアップを実現できる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プラグイン「pret
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Content Slider | Responsive jQuery Slider | bxSlider
finefinefine.jp
[jQuery] 指定した要素まで画面をスクロールさせる方法
GitHub - jeresig/jquery.hotkeys: jQuery Hotkeys lets you watch for keyboard events anywhere in your code supporting almost any key combination.
