Facebook風の無限スクロールが作れるinfinite scroll｜こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。（編集部） 「infinite scroll」は、スクロールしてページ下部まで移動すると、次のページを自動的に読み込んで表示するjQueryプラグインです。 インフィニティスクロールという機能でTwitterのタイムラインや、Facebookのフィードでも採用されており、ユーザーが手動でページ送りする手間を軽減します。 WordPressのブログ記事や、ECサイトの商品ページ、またギャラリーサイトなどで効果的な表現になりそうですね。 step1 jQueryプラグインの読み込み jQuery本体をjQuery
jScroll - jQuery plugin for infinite scrolling / auto-paging
jQuery plugin for infinite scrolling / auto-paging.
6 jQuery Infinite Scrolling Demos — SitePoint
Infinite scrolling is now a common feature and there are several cases where it is really useful. For instance there are some websites where we simply can’t imagine a good pagination system, like Twitter or even Facebook. Another example of where infinite scrolling can be useful is for a search engine: you’ll want to continue viewing new links while you don’t find the one you want, and a paginatio
Wookmark
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
シンプルな日付ピッカーを実装するjQueryプラグイン・jQuery.minical
デートピッカーを実装するjQuery プラグイン・jQuery.minicalです。 シンプルさと軽量さが特徴です。 jQuery UIを使うほどでもないよう な場合はこういった軽量でシンプル な物が使いやすいですね。 デートピッカー実装ライブラリです。 軽量というのが売りのようで、gzipで4KBほどに圧縮できるそうです。動作もシンプルにカレンダーをポップアップ表示させるだけのもの。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script src='jquery.minical.js' type='text/javascript'></script>ライブラリを読み込んで以下のようにセッティング。 $(
【流れるテロップのような表現ができるjQueryプラグイン「liScroll 」と「JQUERY NEWS TICKER」】｜今村だけがよくわかるブログ
【流れるテロップのような表現ができるjQueryプラグイン「liScroll 」と「JQUERY NEWS TICKER」】 テレビの下とかに流れる、テロップのような表現をwebサイトにも設置することができます。 「liScroll 」サンプルはこちらタブの「Result」で動作を確認ください 配布元はこちらhttp://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html もう１つ知ってるプラグインがありますんで、ご紹介します。 「JQUERY NEWS TICKER」サンプルはこちらタブの「Result」で動作を確認ください 配布元はこちらhttp://www.jquerynewsticker.com/ どちらもかっこいいですよね～。 シーンによって使い分け
ボックス要素に色んなタイプの影を簡単に付けられるjQueryプラグイン「jQuery Shadow」:phpspot開発日誌
jQuery Shadow Plugin ボックス要素に色んなタイプの影を簡単に付けられるjQueryプラグイン「jQuery Shadow」。 次のようにボックス要素に対して影を自由に付けられるプラグインです。$(elem).shadow(option); という風にするだけなので使い方は簡単ですね 単なるボックス要素があっというまにクールになりますね 関連エントリ selectボックスを超カッコよくするjQueryプラグイン「Chosen」 ブラウザ上でサインを書けるjQueryプラグイン「jSignature」 JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」 スマホ用サイトに使えそうなドロップダウン実装jQueryプラグイン「DropKick」 ページめくりを実現するためのjQueryプラグイン集
設置サンプル
アボカド シーザーサラダ@アボガドダイニング Platinum Lounge よくわからないけどちゃんとアボガド入りです！クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language"
PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」
PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」 PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」を作成したので公開しておきます。 このライブラリを利用すると スマートフォンでPCサイトにアクセスした場合、指定したスマートフォン用のURLに転送されます。 PCでスマートフォンサイトにアクセスした場合、指定したPC用のURLに転送されます。 スマートフォン用ページでは「PCサイトを見る」なリンクが設定可能で、それがクリックされると、スマートフォンでPC用のサイトが閲覧できます。クリック後は1の転送機能が無効になります PC用のサイトでは、スマートフォンで見た場合のみ表示される「スマートフォンサイトを見る」なリンクが設定可能で、これがクリックされるとスマートフォン用のURLに転送され1の機能が復活します。 個々のページでどのPCページとスマートフォンページが対応
イモムシでjQuery入門 | 第1回デザイナーがイモムシで覚えるjQuery
こんにちは。kamecoです。 androidアプリをhtmlベースで作ったりしています。 それができるのも、jQueryの力でjavascriptをちょっと書けるようになったから。 ということで、jQueryを覚えよう！ 電卓で入門とか色々考えたのですが、 私が覚えた方法で。。 myベストイモムシを作ろう！！！！ とりあえずあなたのイモムシも用意しよう。 ダウンロード とりあえず名前を付けると愛着がわきます。 うちの子は「クロスケ」です。 ↑クロスケ。かわゆす。 練習で書いてた時から書き換えてないので、挙動がおかしいのは見逃してください。。 つまめます。動きます。顔変わります。などなど。 クロスケのjsもブログを書きながら新調してあげようと思います。 イモムシのhtml解説 これから使うhtmlですので構成や呼び出しているものを一応確認しておきます。 cssやh
[JS]これ以上ないと言うくらい簡単に実装できるスライダーのスクリプト -Flow Slider
IEでも滑らかで快適に動作するスライダーを簡単に実装できるjQueryのプラグインを紹介します。 実装にかかる時間は2分くらいでしょうか。 Flow Slider [ad#ad-2] Flow Sliderの特徴 Flow Sliderのデモ Flow Sliderの実装 Flow Sliderの特徴 滑らかなアニメーションで動作します。 実装は簡単で少しのコピペでok。 ベースとなるスタイルシートは用意済み。 クロスブラウザ対応。 対応ブラウザ Firefox Safari Chrome IE Opera9 Flow Sliderのデモ デモではサイトのトップにあるベーシックなスライダーと、本棚に並べたようなスライダーがあります。 スライダーの操作はマウスホバーで、左右の端ほど素早くスライドします。 Flow Slider: Example グリーンのボタン「Buy Book」をクリック
jQuery初心者向けの基礎をしっかり学べるサイト
【ｊQueryって何からjQueryの基本まで】... / 【jQueryの使い方から動作デモまで】jQue... / 【jQueryでのアニメーションからイージングま...他...全6件
長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」:phpspot開発日誌
NeoAlchemy Table Pagination 長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」 縦に長かったりするとテーブルは読みにくかったりしますが、このプラグインで初期化してしまえば一瞬でページ分けが完了します ページングするコードは次のように書けばOKです テーブル自体はそのままHTMLを書いておけばいいので楽チンですね。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 中身が画像のselectボックスを作るjQueryプラグイン
jQueryとAjaxで作るスムーズページング (1/3)
Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」（Paging）と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON（JavaScript Object Notation）、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
チュートリアル - jQuery JavaScript ライブラリ
", items.join("") + "") //*/ var iframe = document.createElement("iframe"); iframe.src = "index-blank.html"; iframe.width = "100%"; iframe.height = $(this).prev().attr("rel") || "125"; iframe.style.border = "none"; $(this).prev().append(iframe); $(window).load(function(){ var doc = iframe.contentDocument || iframe.contentWindow.document; source = source .replace(/
jQueryでテーブル（table）を操作する小回り系コード5種
jQueryでテーブル（table）を操作する小回り系コード5種 テーブルを操作するのに大掛かりなことはプラグインがいろいろありますのでそちらを使うとして。 ここでは、わりと細かいことをjQueryでやってみます。 投稿日2011年08月31日 更新日2011年08月31日 html 始めに操作するべきテーブルを用意します。 ごくごく普通のテーブルですね。 html <table class="table01"> <tr> <th>商品名</th> <th>入荷日</th> <th>価格</th> </tr> <tr> <td>椅子</td> <td>2011-08-01</td> <td>¥ 2,800</td> </tr> <tr> <td>机</td> <td>2011-08-08</td> <td>¥ 6,800</td> </tr> <tr> <td>本棚</td
CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js - かちびと.net
久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのようなライブラリに依存しないのも素敵ですね。 地味にいいかも。CSSPrefixerみたいにプレフィックスを付けてくれるWebサービスはいくつか存在しますが、こういうのがあるのは多くの人が面倒だと思っているからですしね。これを、jsで付けようぜ、というのがcssFx.jsです。 何より、将来的にプレフィックスは不要になるので、そのときのメンテナンスもこれにしておけば、外すだけで済むので楽ですよね。 C
画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションを適用する
CSS3を使って、画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションなどを適用するさまざまなテクニックを紹介します。 また、Chrome, Safari, Firefoxなど、最近のブラウザで期待通りに表示されないのを回避する方法もあわせて紹介します。 CSS3 Image Styles [ad#ad-2] 最近のブラウザで生じる問題点 画像に角丸やドロップシャドウを適用すると期待通りにならないことがあります。これはChrome, Safari, Firefoxなど、最近のブラウザでも生じます。 Chromeでの表示 デモでは「border-radius」と内側に「box-shadow」を適用していますが、Chrome, Safariではキャプチャのように欠けて表示されてしまいます。 また、Firefoxでは「border-radius」は期待通りですが、「box-shad
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル - かちびと.net
