[JS]マウスホイールにも対応したパネルをスライドするカルーセルのスクリプト -horinajahorinaja demo パネルのスライドの操作はマウスのホイールだけでなく数字のクリックでも可能で、オートプレイにも対応しています。 各パネルはリスト要素で実装されているので、リンクの配置やちょっとしたレイアウトも可能です。 horinajaはjQuery、もしくはPrototypeのプラグインとして動作しているため、実装にはjquery.js、またはprototype.jsとscriptaculous.jsが必要です。
[JS]パネルをペロッとひっくり返すスクリプト -QuickFlip 2
divで実装した2枚のパネルを使用して、裏表にペロッとひっくり返すスクリプトをJon Raaschから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="quickFlip"> <div>表のパネル<br /> <a href="#" class="quickFlipCta">click to flip</a></div> <div>裏のパネル<br /> <a href="#" class="quickFlipCta">click to flip</a></div> </div> </textarea>
[JS]ビフォーとアフターをスライドして切り替えるスクリプト -beforeafter.js
ビフォーとアフターをバーでスライドして切り替えるスクリプトをCatch My Fameから紹介します。 jQuery Before/After Plugin demo ※「before」と「after」の表示は付け加えたものです。 デモでは、画像にカーソルを重ねると分割するバーが表示され、左右にドラッグすることで画像のビフォーとアフターが表示されます。
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」:phpspot開発日誌
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」 2009年05月28日- jQuery Ribbon - Home これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」。 利用すれば、コントロールのグルーピングや、ドロップダウンメニュー、階層リストなどのリッチなコンポーネントが実装できるみたい。 jQuery Ribbonを使ったリッチなＵＩ。Windows7っぽいデザインのＵＩがJavaScriptで。 アイコン付きのかっこいいメニュー 表示しているＵＩのテーマを選べる アイコンつきリスト アイテムのグルーピング ドロップダウンメニュー ちょっとこれは素晴らしいですね・・・。jQueryの優位性がますます高くなってしまいましたね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイ
こいつは凄い！フルスクリーン縦型画像ギャラリー「jQuery Gallery Slider Plugin」
twitter facebook hatena google pocket 画像ギャラリーと言うとなんとなくLightBoxに代表されるような見せ方が思い浮かびます。 でもそんなものに飽ききった皆さんに朗報です。 jQuery Gallery Slider Pluginを使用すると、フルスクリーンで縦型の画像ギャラリーを作成できます。 sponsors 使用方法 jQuery Gallery Slider Pluginからファイル一式をダウンロードします。 またjQueryからjquery.jsをダウンロードします。 <link href="galleryslider.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script
[JS]カスタマイズが豊富なグラフやチャートを描画するスクリプト -jqPlot
ツールチップやラインにシャドウをつけるなどカスタマイズが豊富な、グラフやチャートを描画する高性能なスクリプト「jqPlot」を紹介します。 <textarea name="code" class="js" cols="60" rows="5"> line1 = [['23-May-08',578.55],['20-Jun-08',566.5],['25-Jul-08',480.88],['22-Aug-08',509.84]]; line1.push(['26-Sep-08',454.13],['24-Oct-08',379.75],['21-Nov-08',303],['26-Dec-08',308.56]); line1.push(['23-Jan-09',299.14],['20-Feb-09',346.51],['20-Mar-09',325.99],['24-Apr-09',38
2.5kbのJavaScriptでテーブルをソート・ページャーなどが可能に！
twitter facebook hatena google pocket 表組みで縦に長くなると、もう最初と最後の関連性なんてわからなくなります。 今回紹介するJavaScriptはソートに加え表示件数を制御、ページャー付きと高機能なものが、わずか2.5kbで可能です。 via：TinyTable JavaScript Table Sorter sponsors 使用方法 TinyTable JavaScript Table Sorterからファイル一式をダウンロードします。 <script src="script.js" type="text/javascript"></script> <link rel="stylesheet" href="style.css" type="text/css" /> 上記をhead内に書き込んだ後、テーブルを記述します。 <table cellpad
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
PHPとAjaxを使ったリアルタイム値チェック機能付きコンタクトフォーム「LightForm」:phpspot開発日誌
Web-kreation - LightForm ::: Free Ajax/PHP Contact Form PHPとAjaxを使ったリアルタイム値チェック機能付きコンタクトフォーム「LightForm」。 クールなフォームのＵＩに加えて、入力値がおかしい場合のリアルタイムエラー表示を行ってくれるPHPとAjaxのプログラムが入手できます。 UIがクールなフォームになってます 入力チェックの機能。 たとえば、名前を１文字入力して次にいくと、最低で３文字必要だというエラーが次のように表示されます。 メールアドレスが間違っている場合もちゃんとチェックしてくれます メンテナンスされていない点には注意ですが、なかなか使えるプログラムなので改変してサイト構築に活用すれば手間を大幅に削減できそうです。 関連エントリ JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform
[JS]指定した要素のみをマスクして目立たせるスクリプト -jquery.expose
demo: video こういったユーザーに少しでも集中してほしいコンテンツには、効果が高そうです。 使用方法も簡単で、JSファイルを外部ファイルで指定し、スクリプトで適用箇所とカラーと不透明度を指定します。 最小の記述だと、下記のようになります。
alphafilter.jsが透過pngのロールオーバーに対応
alphafilter.jsが透過pngのロールオーバーに対応 IE6用の透過pngライブラリ「alphafilter.js」が透過pngのロールオーバーに対応しました。 透過機能はIE6で画像の拡張子がpngの場合のみですが、ロールオーバーはすべてのブラウザ、jpg、gif、png形式の画像で利用いただけます。 img要素の場合class属性に「btn」と付ければロールオーバーの処理を行います。 <img src="./sample.png" class="btn" alt="" /> sample.pngの場合はsample_on.pngのように拡張子の前に「_on」が付いた画像をロールオーバー時に表示します。 透過機能と合わせて利用する場合は、以下のように指定します。 <img src="./sample.png" class="alphafilter btn" alt="" />
テーブルの表組みにページネーションをつけるJavaScript「Table Pagination」
twitter facebook hatena google pocket たまに数十列を表示する表組みに出くわすことがあり、辟易することがあります。 そんな時は、所定の件数で次を見るというようなページネーションをつけられるjQueryプラグインTable Paginationを使いましょう。 sponsors 使用方法 Table Paginationからjquery.tablePagination.0.1.jsをjQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.tablePagination.0.1.js"></script> <script type="text/jav
selectボックスの中身は「jSelect」を活用してサーバで管理する開発方法:phpspot開発日誌
Plugin JQuery jSelect - Demonstration selectボックスの中身は「jSelect」を活用してサーバで管理する開発方法。 これまで select の組み立てはサーバ側でPHPなんかでループさせて行うのが当たり前と思っていました。 jSelect を使えば、XMLやJSON、配列等のフォーマットからなるデータをajaxで読み取ってselect ボックスを簡単に動的に作成できます。 JavaScriptで動的に作った方がよいケースも多そうなので、導入できそうな部分は取り入れたほうがよいかも。 ということで、jSelect とそのメリットをご紹介。 jselect は、たとえば、次のようなHTMLがあったとします <select name="test"> <optoin>loading.... </select> で、$('#test').jselect({
利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」:phpspot開発日誌
Notimo Demos site 利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」。 次のリンクをクリックしてみてください。 → 通知を表示してみる ページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。 スクロールしても、いやみではない感じにちゃんとついてきてくれます。 使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、インスタンスをnewして show メソッドを呼び出すだけです。 showは２回連続で呼び出しても、ちゃんと１個目と区別して表示してくれます。 <script type="text/javascript"> var notimooManager = new Notimoo(); // 通知を表示 notimooManager.show({ title: 'タイトル', message: 'メッセージ
HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript:phpspot開発日誌
jQuery Dropdown Check List HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript。 複数選択式の選択リストは普通に作成することが出来ますが、チェックボックスを使ったわかりやすいＵＩの実現は難しいですね。 「jQuery Dropdown Check List」ならjQueryプラグインなので、非常に簡単に実現できます。 $("#s6").dropdownchecklist(); のように、１行で初期化できるところも素晴らしいですね。 一昔前にやっていれば、どうやってやってるんだろうと検討もつかなかったと思いますが、進化したものです。 関連エントリ JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」
Google Analytics APIのJavaScriptライブラリを使ってみた(準備/認証編) - F.Ko-Jiの「一秒後は未来」
(追記) この記事の内容は古くなっているため動作しません。 Google Analytics APIがリリースされたということで、Googleから提供されているJavaScriptクライアントライブラリを使ってみた。 とりあえず使い始めと認証のところをざっとまとめておく。 ライブラリのインクルード まずは GData のライブラリをロードすれば良いようなので、 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("gdata", "1.x"); </script> を head タグの中に書く。そしてAnalyticsのサービスオブジェクトを生成する。 service = new google.gdata.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]ホバー時に浮かぶエフェクトがとってもリアルなスクリプト
[JS]二列にしたり折りたたんだり、リストの表示を変更するスクリプト -Adaptable view
JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌
画像を横にスライドしながら表示するslideViewerのデモページ｜CSS Lecture