jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」（実装解説つき）
jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」を紹介します。 jQuery hashchangeプラグイン １．機能 Ajaxを使って切り替えたページについては、通常、ブラウザの「戻る」「進む」が使えません。 が、hashchangeプラグインを利用すれば、Ajaxを使って切り替えたページについてもブラウザの「戻る」「進む」が有効になります。 例えば下の図の①～⑤のページ遷移で、通常は「戻る」「進め」ボタンで②～④の遷移は行われませんが、hashchangeプラグインを使えば②～④のページ遷移も実現できます。 具体的な仕組みですが、まず基本的なJavaScriptの動作として、フラグメント（「index.html#abc」の「#abc」）を使ってページを切り替えた場合、フラグメント「#abc」が「location.hash」に
今風になった！Web制作で使える最近のjQueryプラグインまとめ
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を再生するタイプ３つ スクロール ５．スクロールでクロスフェード ６．スクロールで奥行きを表現 ７．スクロールで分割 画像 ８．APNG ９．Google 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
alert()のダイアログのスタイルを変更するスクリプト・SweetAlert
alert()で出せるダイアログのスタイルを変更する為のスクリプトのご紹介。シンプルな発想で素敵ですね。尚、本スクリプトはjQueryに依存しています。 alert()で出せるダイアログのスタイルを変更しよう、というスクリプトです。 確かに普通にアラート出すよりいいかもしれません。 <script src="jquery.js"></script> <script src="sweet-alert.min.js"></script>コアとSweetAlertを読み込みます。 $('.foo').click(function(){ swal({ title: "アラートです！", text: "メッセージがココに入ります", imageUrl: 'http://placehold.it/500x500', confirmButtonText: '了解！', confirmButtonColo
私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど）
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
これは超使いやすいページネーションの次世代UI:phpspot開発日誌
Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基本ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満たせばいいわけでもっとシンプルに出来るはず。 今回紹介するページネーションのデモ ページ番号の部分はボタン風になっているので押してみましょう。 するとスライダーになってドラッグ＆ドロップでページ指定が簡単に出来ます。 30までドラッグ＆ドロップして話すと30ページ目が開く、というようなイメージ 次へ、前へ、といった直感的に分かりやすいボタンも実装されていて必要十分。 従来のページネーションは作る場合
コンテナに画像がぴったり収まるように画像のサイズを変更するjQueryプラグイン・imgLiquid
画像を包括したコンテナに その画像がぴったり収まる ようにサイズを調整する、 というjQueryプラグイン。 必要になるか分かりません が、需要はありそう。 コンテナ一杯に画像を表示させる、というもの。 上が使用した状態、下が未使用です。下はコンテナに隙間があるのに対し、上はコンテナに隙間無く画像が収まっています。画像をメインとしたコンテンツでグリッドレイアウトなWebサイトなどにも良さそうです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src ="imgLiquid-min.js" type="text/javascript"></script>コアとプラグインを読み込みます。 $("
ページ移動の必要が無くなるページング系jQueryプラグイン・Pagination Plugin - かちびと.net
ページングのユーザビリティを あげたいけど、オートタイプは 嫌だ、と言う方にオススメの jQueryプラグインがありました。 選択肢の一つに如何でしょう。 タブのような感覚でページ移動が出来ます。ページ数の多いサイトはユーザビリティとしても取り入れたいですね。
selectボックスを超カッコよくするjQueryプラグイン「Chosen」:phpspot開発日誌
Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better selectボックスを超カッコよくするjQueryプラグイン「Chosen」 味気ないselectのデザインをゴージャスかつ多機能に変えてくれるプラグインです。 左が普通のselect。これをカスタマイズして右のイメージに。インクリメンタル検索ができるので項目数が多くてもOK タグ選択っぽいインタフェースにすることも出来ます 選択時のイメージ。カッコいい。 BootStrapライクなデザインなので組み込んでしまっても違和感ないかもですね 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン カッコいいselectボックスを作成でき
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
Tumblr
When should you use hovercard: A hovercard comes handy when displaying Person bio, Book author and price, Loading related information with Ajax, Editing in place, and what not! Check out the following demos to see some of this stuff in action :) Demos: 1Basic hovercard Hover over the red text to see the hovercard in action: jQuery by John Resig is a cross-browser JS library designed to simplify th
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
simplelib with jQuery
jQueryサンプル集 | DesignWalker