jQueryでページ送りのインタフェースが簡単に作れる「jqPagination」:phpspot開発日誌
jqPagination, a jQuery pagination plugin (obviously) jQueryでページ送りのインタフェースが簡単に作れる「jqPagination」。 次のようなインタフェースのページ送りのインタフェースを簡単に実現できます。 クリック時にコールバックを指定して何ページ目がリクエストされたかを知ることが出来るので、指定ページにJSで飛ばすだけという流れです 実装は次のように決められたマークアップをコードして、コールバックを指定しつつ初期化するだけです。 デザイン等はCSSで調整できそうです。 標準のデザイン的にはスマホなどで使えそうなものになってますね 関連エントリ 面倒なページ分けを簡単実装できる10のスクリプト集
[JS]カスタマイズ性に優れた、メッセージのパネルを一時的に表示するスクリプト -Easy Notification
設置が簡単で、オプションも豊富に用意されカスタマイズ性にも優れた、メッセージのパネルをアニメーションで表示・非表示するjQueryのプラグインを紹介します。 パネルを消去するには、「Close」ボタンをクリックします。 デモは他にも二つ公開されています。 デモページ：2 クリックでパネルを表示。 デモページ：3 クッキー対応、初回のみパネルを表示。 Easy Notificationの特徴 マークアップは非常にシンプル、しかもカスタマイズ性は強力 あらゆるエレメントに設置が可能 トリガーとなるイベントは、クリックやページロードなどに選択可能 クッキーを使用して、一度だけ表示することも可能 不必要に繰り返し表示しません。 [ad#ad-2] Easy Notificationの実装 パネルのHTML パネルはシンプルなHTMLで生成されます。 <div id="easyNotificatio
1行でエレメントを縦・横センターに配置できるjQueryプラグイン「Fixed Center」:phpspot開発日誌
Fixed Center jQuery plugin David's Web Development Blog 1行でエレメントを縦・横センターに配置できるjQueryプラグイン「Fixed Center」。 $(element).fixedCenter(); のようにエレメントを指定するだけで要素をセンタリング出来ます。 難しいことを考えなくてよくて1行で指定できるので覚えておくと便利かも。 関連エントリ jQueryを使って画像の上にコンテンツをクールにアニメーションされてオーバーレイ表示するサンプル フォームに簡易電卓を組み込める「jQuery Calculator」 30近いウィジェットがセットになったjQueryプラグイン集「Wijmo」 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」
Alt+○キーで目的のフォーム要素にすぐ移動できるようにするjQueryプラグイン「KeyTips」:phpspot開発日誌
Alt+○キーで目的のフォーム要素にすぐ移動できるようにするjQueryプラグイン「KeyTips」 2010年12月03日- KeyTips jQuery Plugin Example Alt+○キーで目的のフォーム要素にすぐ移動できるようにするjQueryプラグイン「KeyTips」。 たとえば、以下のようなフォームがあって、要素にフォーカスした後、Alt+H を押すと、「Home phone」に移動できるというものです。 タブを連打しなくて一発でいけるのはいいケースもありそう。これは何度も何度も使うようなフォームに導入すると便利そうです。 たとえば、フォーム要素が沢山あって、そのフォームを使って毎日沢山の仕事をするような場合を想像してみると便利さが実感できるはず。 色々とアイデアがあるものですね。 関連エントリ jQueryを使って画像の上にコンテンツをクールにアニメーションされてオ
[JS]さまざまなDOM要素にツールチップを表示するスクリプト -Bubble Popup
テキストリンクをはじめ、p, span要素のテキスト、li要素のテキスト、div要素、img要素などさまざまなDOM要素に、アニメーションを伴ったツールチップを表示するjQueryのプラグインを紹介します。 jQuery Bubble Popup v.2.0 デモページ：さまざまなDOM要素への実装例 [ad#ad-2] Bubble Popupの対応ブラウザ Internet Explorer 6.5, 7, 8, 9 (beta) Firefox 3.5.x Safari 5.0.x Opera 10.x Chrome 6.0.x iCab 4.x Webkit based browser (reKonq, Arora) KHTML-based browser (Konqueror) Bubble Popupの主な特徴 あらゆるDOM要素にツールチップ、ポップアップを作成できます。 ツ
チェックボックスに３つの状態を持たせられるjQueryプラグイン「TRI-STATE CHECKBOX」:phpspot開発日誌
チェックボックスに３つの状態を持たせられるjQueryプラグイン「TRI-STATE CHECKBOX」 2010年08月03日- Plugins | jQuery Plugins チェックボックスに３つの状態を持たせられるjQueryプラグイン「TRI-STATE CHECKBOX」 通常、チェックボックスといえばONかOFFかですが、中間の意味を持つ状態を次のように表せるようになります。 例えば、Header1 の下位のアイテムが全部チェックされていないけど、部分的にチェックされているという状態を表せます。 ウイルスソフトの部分指定なんかにデスクトップアプリケーションでは採用されているUIですね。 下位のアイテムを全部チェックすると、Header1は通常のチェック状態になります。 使いどころによっては便利なUIづくりに役立てられそうですね。 関連エントリ フォームに簡易電卓を組み込める
HTMLで書けるパワポ風プレゼンテーション実装jQueryプラグイン「Slippy」:phpspot開発日誌
Introducing Slippy - HTML Presentations - Jordi Boggiano HTMLで書けるパワポ風プレゼンテーション実装jQueryプラグイン「Slippy」。 次のような、左右キーでページ送りが出来るプレゼンテーションをHTMLベースで書いて簡単に構築できるプラグインです。 ブラウザさえあれば、ビューワなしでどこでも再生できるプレゼンテーションを構築したい際に使えます。 プレゼンテーション内に出てくるコードのシンタックスハイライト機能がついているので、よりプログラマに使いやすいものになっているのも特徴。 更に、ハイライトされたJavaScriptコードをその場で実行したりなんていうことも出来ちゃいます。 ブラウザのサイズに併せてプレゼンテーションが縮小されるあたりもパワポ風になってますね。 jQuery Presentation というプラグインも
tableの内容を簡単にグラフ化するjQueryプラグイン「gvChart」
twitter facebook hatena google pocket tableで表組みにしたものをグラフ化するのは面倒な作業だったりします。 そこでjQueryプラグイン「gvChart」で簡単にグラフ化しましょう。 通常通りtableを記載し、JavaScriptを記述すれば完成です。 sponsors 使用方法 gvChartからファイルをダウンロードします。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.gvChart.js"></script> <scri
[JS]表組みのヘッダを固定し、表示する列も選択できるスクリプト
左上のアローをクリックすると、チェックボックスが表示されます。 スクリプトはクッキーにも対応しており、選択した列をクッキーに保存することも可能です。 スクリプトはjQueryのプラグインのため、実装にはjquery.jsが必要です。 オプションでは、テーブルの幅と高さ、列選択の有無、クッキーの有無を設定できます。基本の書式は下記のようになります。 JavaScript <textarea name="code" class="js" cols="60" rows="5"> $(tableID).scrollableFixedHeaderTable(widthpx, heightpx, showSelect, cookie) </textarea>
ボックス間でアイテム移動できるselectボックス実装jQueryプラグイン「multiselect2side」:phpspot開発日誌
ボックス間でアイテム移動できるselectボックス実装jQueryプラグイン「multiselect2side」 2010年05月24日- Senamion.com - multiselect2side (multiple select double side) plugin: documentation and demo page ボックス間でアイテム移動できるselectボックス実装jQueryプラグイン「multiselect2side」 デスクトップアプリケーションなんかでよくある、使うリスト＆使わないリストを表示する際に便利なUIを実装出来ます。 select ボックス内のアイテムを複数選択して、移動することも出来ます。 ボックスの中身をソートすることも出来ます。 ボタン部分のUIが独特ですが、CSSでリデザインできるようなので安心です。 このUIで、例えば、利用者がWEBサイト
セレクトボックスをアンカーっぽくしてスッキリさせられるjQueryプラグイン「Narrative Select」:phpspot開発日誌
セレクトボックスをアンカーっぽくしてスッキリさせられるjQueryプラグイン「Narrative Select」 2010年05月12日- JQuery Narrative Select Plugin セレクトボックスをアンカーっぽくしてスッキリさせられるjQueryプラグイン「Narrative Select」が公開されています。 例えば、文章の途中にselect ボックスで選択肢を入れるようなUIがあったとすると、次のようになります。 普通にやれば、上のようになりますが、今回紹介するプラグインを使えば、次のようにアンカーっぽくなります。 クリックすると、select のように選択肢が次のようにカッコよく表示され、変更すると、当然、内容も変更されます。 Correct → Incorrect になりました。 select ボックスによるデザインも分かりやすくていいという意見もあると思いま
MOONGIFT: » jQueryによる画像に沿ったテキスト回り込みライブラリ「jQSlickWrap」:オープンソースを毎日紹介
jQSlickWrapはjQueryベース、JavaScript製のオープンソース・ソフトウェア。Webページの中に画像を差し込んで表示することは多々ある。そんなとき、画像が四角であれば回り込みも綺麗に行われるので申し分ない。だが三角の画像や、人物だけの画像の時に四角く回り込んでいるのはあまり格好が良くないだろう。 画像をスムーズに回り込んでいる イラストやシンボルに限定されるかも知れないが、背景が透明のPNG画像を使えば画像の形に合わせた回り込みができるのがjQSlickWrapだ。jQueryベースのソフトウェアで、背景を柔軟に処理して表示が出来るようになっている。 幾つかのサンプルがあるが、画像の枠線に合わせて透明な背景を無視して回り込みをしてくれる。Web上でこのような表現をするのは困難だったので、まるで雑誌のような仕上がりになるはずだ。さらに透明な背景を指定した色に変更することも
自分のサイトにTwitterのフォロワーを表示する·Twitter Friends Widget MOONGIFT
Twitter Friends WidgetはJavaScript製のオープンソース・ソフトウェア。MOONGIFTではサイドバーにGoogle Friend Connectのガジェットを載せている。サイトとユーザをつなぐ、オープンなソーシャルサービスを実現するガジェットだ。しかしそんな時に忘れられないのがTwitterの存在だ。 つぶやき＋友人のリスト Twitterではユーザ同士がつながっており、さらにつぶやきがコミュニケーションを生み出している。そう考えるとTwitterのフォロワーをサイドバーに載せても良いかも知れない。それを実現するのがTwitter Friends Widgetだ。Twitter Friends WidgetはHTMLに指定したタグを埋め込むことでTwitterの情報を表示するガジェットだ。 Twitter Friends Widgetが対応するのはフォロワーと
Xlune::Blog
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
今すぐに使えるリアルタイム入力チェックライブラリ·Vanadium MOONGIFT
Webフォームから飛んできた値について、入力チェックを行わないということはまずないだろう。数字のところに文字列が入ったり、必須のものが入っていなかったりすることはよくある。だからこそサーバサイドのプログラムでチェックはするのだが、ユーザビリティを考えるとクライアントサイドでも入力チェックを行いたい。 リアルタイムで行われる入力チェック 入力チェックのJavaScriptを作る、なんていうと面倒な感じがするがVanadiumを使えば開発者の方でなくともチェック機能が実装できてしまう。 今回紹介するオープンソース・ソフトウェアはVanadium、jQueryを使ったクライアントサイド入力チェックライブラリだ。 Vanadiumは入力項目のクラスでチェック内容を指定するようになっている。そのためVanadiumさえ読み込めば、HTMLを変更するだけで入力チェックが実装できるようになる。入力必須や
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Features | Elycharts
Watch!~ The Bachelor Season 21 Episode 7 online Full SERIES FREE - Wijmo
marcup.nl
IDEA * IDEA