タグ

uiとlibraryに関するbasiのブックマーク (11)

  • テーブル操作に使えそうなjQueryプラグイン色々:phpspot開発日誌

    テーブル操作に使えそうなjQueryプラグイン色々なエントリのご紹介。 面倒なテーブル表示・ソート・検索なんかの機能をjQueryプラグインで簡単に付けられるのは便利ですが種類もいろいろあります。 ストックとして覚えておけば、いつか使えそうです。 DataTables Tablesorter Flexigrid jQuery treeTable こういうウィジェットが最低1行で実装できてしまうのですから、すごい時代ですね。 リンク先は以下より参照してください。 15 Great jQuery Plugins For Better Table Manipulation

  • Excel風の入力・表示が可能なデータグリッド実装が可能な「MyTableGrid」:phpspot開発日誌

    MyTableGrid (beta) Excel風の入力・表示が可能なデータグリッド実装が可能な「MyTableGrid」。 次のようなインタフェースで、便利に使えます。 特徴 ・カラムのリサイズが可能 ・カラムのソートが可能 ・構成はJSONで定義 ・Ajaxベースのデータロード。JSON定義もOK ・ページング機能あり ・キーボードの方向キーで移動&ENTERキーで編集可能 その場でインライン編集も可能。 prototype.js ベースで動作します。 関連エントリ jQueryベースの多機能グリッドテーブル「DataTables」 jQueryでリッチなグリッドを実装「jqGrid」

  • 凄い!jQueryでリボンメニューを実現する·jQuery Ribbon MOONGIFT

    MS Office 2007から採用されたリボンメニュー。今は(といっても2年前からあるが)まだ違和感があるかも知れないが、徐々にリボンメニューを採用したソフトウェアも増えており、慣れると使いやすさは向上していることに気づくはずだ。 jQueryで実現するリボンメニュー! そんなリボンメニューをブラウザで使える、そんなライブラリがjQuery Ribbonだ。 今回紹介するオープンソース・ソフトウェアはjQuery Ribbon、jQueryでリボンメニューインタフェースを提供するソフトウェアだ。 jQuery RibbonはjQueryを使ってあのリボンメニュー風インタフェースを実現する。凄いのは全てのインタフェースがリスト(ulタグ)だけで実現されていることだろう。そのためJavaScriptがオフであっても機能はするはずだ。 メニュー リボンインタフェースはもちろん、左上にはツリーメ

    凄い!jQueryでリボンメニューを実現する·jQuery Ribbon MOONGIFT
  • 利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」:phpspot開発日誌

    Notimo Demos site 利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」。 次のリンクをクリックしてみてください。 → 通知を表示してみる ページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。 スクロールしても、いやみではない感じにちゃんとついてきてくれます。 使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、インスタンスをnewして show メソッドを呼び出すだけです。 showは2回連続で呼び出しても、ちゃんと1個目と区別して表示してくれます。 <script type="text/javascript"> var notimooManager = new Notimoo(); // 通知を表示 notimooManager.show({ title: 'タイトル', message: 'メッセージ

    basi
    basi 2009/05/27
    これは使える!
  • 複数のクエリ入力に適した補完機能付ボックス実装「jquery.tokeninput.js」:phpspot開発日誌

    James Smith ? loopj.com Blog Archive jQuery Plugin: Tokenizing Autocomplete Text Entry 複数のクエリ入力に適した補完機能付ボックス実装「jquery.tokeninput.js」。 利用者に入力してもらいたい項目が多数ある場合、たとえば検索用のUIで、複数の検索文字列を投げたいような場合に使えそう 入力ボックスに文字列を入れると、サジェストが現れます。 Enterキーで、候補を1つのクエリにできます。で、続けて入力するとまた、サジェスト。 という感じでアイテムをどんどん追加していけるUIになっています。 デモページ 使いどころが難しいものかもしれませんが、使い方を考えれば、色々と使えそうですね。 jQueryプラグインなので実装も簡単です。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQuery

  • [JS]パネルをiGoogleのように移動できるスクリプト -Easy Widgets

    iGoogleのように、パネルをドラッグ&ドロップで移動できるスクリプト「Easy Widgets」を紹介します。 Easy Widgets ※ホスト先が変なことになっていたので、リンク先を変更。 デモファイルを含むスクリプトはダウンロードできました。 各パネルはdivで実装されており、デザイン変更やクローズボタンなどの設置ができます。 オプションでは、クッキーの設定(パネルの配置)、パネル移動のタイミング・不透明度などが調整できます。 Easy WidgetsはjQueryのプラグインのため、実装にはjquery.jsが必要です。

  • メンテナンスフリー!郵便番号から住所を返すライブラリ·ajaxzip3 MOONGIFT

    Webシステムを開発している中で郵便番号を入力したら自動的に住所を補完して欲しいという要望は多々ある。実装はそれほど難しいものではない。厄介なのはメンテナンスだろう。市区町村の統廃合によってデータが変わった場合の対応だ。 郵便番号から住所に変換する便利なライブラリ 郵便局から配布されているCSVを都度取り込むという方法もあるが、非常に面倒だ。そこで使ってみたいのがajaxzip3だ。 今回紹介するオープンソース・ソフトウェアはajaxzip3、Ajaxを使って住所を取得するライブラリだ。 ajaxzip3の面白い所はライブラリをGoogle Code上にアップロードしてそのまま利用できてしまう点だ。規約上どうなのかという問題はあるが、そのまま使うと自分でメンテナンスする必要が全くなくなってしまう。自分のサーバであってもajaxzip3を外部のSubversionリポジトリからアップロードす

    メンテナンスフリー!郵便番号から住所を返すライブラリ·ajaxzip3 MOONGIFT
  • jsmap - JavaScriptによる都道府県入力補助

    Q - なぜ、全国地図にしないのですか? 4つほど理由があります。 ポップアップが場所をとりすぎるから 現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。 キーボード操作時の押下回数を減らすため jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。 多言語対応のため 日は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。 認知的限界のため これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。 ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。 Q - 地図はもっと詳細化/単純化しないのですか? 詳細

  • JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート:phpspot開発日誌

    JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート 2008年02月07日- Bram.us jsProgressBarHandler (Dynamic Unobtrusive Javascript Progress/Percentage Bar) jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App.JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート。 『進捗状況を分かりやすくプログレスバーで表示できるJSライブラリ「jsProgressBarHandler」』で紹介した

  • MOONGIFT: » Yahoo! Pipesのような動きを実現「WireIt」:オープンソースを毎日紹介

    Yahoo! Pipesには触ってみたことがあるだろうか。各種フィードやHTMLを取得、加工して別な形(フィードやJSON等)で出力できるWebアプリケーションだ。 そのYahoo! Pipesでは各データをつなげる時にパイプを伸ばしてビジュアル的に「接続」する。それを実現するライブラリがこれだ。 今回紹介するオープンソース・ソフトウェアはWireIt、オブジェクトをつなげるイフェクトを実現するライブラリだ。 WireItYahoo! Inc.の提供するYUIを使い、Yahoo! Pipesライクなインタフェースを実現している。ボックスに付けられた丸をドラッグすると、パイプが伸び、それを別なボックスの丸に持っていくことで、接続できる。 これがただの直線であれば何だが、パイプのような曲線を描いてつながるのが面白い。サンプルは数多く登録されており、ボックスを追加して接続するもの、アニメーショ

    MOONGIFT: » Yahoo! Pipesのような動きを実現「WireIt」:オープンソースを毎日紹介
  • 軽快かつクールなページ内小窓作成用ライブラリ「Mocha UI」:phpspot開発日誌

    MooTools Mocha UI Mocha is a MooTools user interface class made with canvas tag graphics. This is an on going exercise to help me become more familiar with both MooTools and the canvas tag. 軽快かつクールなページ内小窓作成用ライブラリ「Mocha UI」。 次のような移動&リサイズ&クローズ&最大化可能なウィンドウを簡単に作成できます。 サイト内のデモでは、タイトルと内容を入力することで、動的にウィンドウを作成できることが紹介されています。 フレームワークには、mootools 使用。 かなり軽快に動いてくれ、ページ内で別窓を作るUIを作る際にはかなり使えそう。 関連エントリ Prototype.jsベ

  • 1