値をそのまま編集できてソート可なテーブルを簡単実装できるJSライブラリ「EditableGrid」:phpspot開発日誌
EditableGrid - Make your HTML tables editable 値をそのまま編集できてソート可なテーブルを簡単実装できるJSライブラリ「EditableGrid」。 ベタ書きのテーブルタグや、XMLを読み込んでテーブルにすることも可能です。 カラムに型を定義することが出来て、編集時は単純なテキストエリアはもちろんですが、ドロップダウンメニューから選べるようにすることも出来ます。 テーブルヘッダーをクリックすればソートされます。 １から実装しようとするとかなり大変そうですが、ライブラリで比較的簡単に複雑でリッチなテーブルが実現出来ますね。 関連エントリ jQueryベースの多機能グリッドテーブル「DataTables」 jQueryでリッチなグリッドを実装「jqGrid」
YUI最新版、CSSをオンザフライで変更するユーティリティ | エンタープライズ | マイコミジャーナル
YUI - Yahoo! User Interface Library The YUI development communityは18日(米国時間)、YUI (Yahoo! User Interface Library)の最新版となるYUI 2.7.0を公開した。YUIはYahoo!で開発されたAjax JavaScriptフレームワーク。さまざまなUIコンポーネントが用意されている。対応ブラウザチェックも充実しており、クロスブラウザ開発に活用できる。 YUI 2.7.0の主な特徴は次のとおり。 StyleSheet Utilityコンポーネントの導入 IE8サポートの改善 ベータ扱いから正式コンポーネントへ格上げ (Element、ProfilerViewer、Selector) コンポーネントの機能拡張 (Charts Enhancements、Dom Collection、Cont
Google、JavaScript APIを手軽に試せる「AJAX API Playground」を公開
Googleがオープンソース開発者向けにAPI情報の公開やさまざまなサポートを行っている「Google Code」で、Google AJAX APIのサンプルコードをウェブ上で手軽に試すことができる「AJAX API Playground」が公開されて話題を呼んでいる。 Googleがオープンソース開発者向けにAPI情報の公開やさまざまなサポートを行っている「Google Code」で、Google AJAX APIのサンプルコードをウェブ上で手軽に試すことができる「AJAX API Playground」が公開されて話題を呼んでいる。GoogleのエンジニアであるBen Lisbakken氏が20％タイム（*1）で開発し、1月21日に「Google Code Blog」の「Playing around with Google's AJAX APIs」というエントリで発表した。 AJAX
便利なjQueryプラグインいろいろ:phpspot開発日誌
10 Useful jQuery Plugins | AjaxLine 便利なjQueryプラグインが色々とあるみたいですね。 最近では、jQueryの人気が非常に高いように感じます。prototype.jsとかのシェアの状況は今はどうなってるんでしょうね。 Virtual jQuery Keyboar jQuery 3 State Switch Plugin jQuery Quick Search Date Range Picker Tooltips based on jQuery FaceBox ColorPicker 全部見る これだけjQueryプラグインがあるということは、JSフレームワークのシェアはここ数年でちょっと変わってきてるんでしょうね。 関連エントリ jQueryを速攻マスターしたい方におすすめの「jQuery Selectors」 HTMLで雑誌のような美しい段組みレ
Prototype.jsを用いたUIライブラリ·Prototype UI MOONGIFT
Webアプリケーションを構築する上で、優れた操作性をもったUIは欠かすことができない。まるでデスクトップアプリケーションのようなインタフェースを持ったソフトウェアが数多く存在している。 Prototype.jsを使ったUIライブラリ そんなUIを構築するライブラリは数多いが、そのためだけのツールが多く、柔軟性にかけるものが多い。そこで優れたJavaScriptライブラリであるPrototype.jsをベースにしたPrototype UIを使ってみよう。 Prototype UIはPrototype.jsとScript.aculo.usを使ってWebアプリケーションにふさわしいインタフェースを提供してくれるJavaScriptライブラリだ。 Prototype.jsがベースという点において好き嫌いが分かれる所かもしれない。とは言え、Railsで標準で組み込まれていることもあり、利用されている
ナビゲーション実装に使える、Ajaxライブラリ/サンプル集:phpspot開発日誌
35 Easy to use Free Ajax/Javascript Navigation Solutions : Speckyboy - Web Design, Web Development and Graphic Design Resources 35 Easy to use Free Ajax/Javascript Navigation Solutions ナビゲーション実装に使える、Ajaxライブラリ/サンプル集。 便利そうなナビゲーションパーツが多数紹介されていて参考になります。 Outlook Navigation Bar jQuery suckerFish Tree with Checkbox Nodes Tabbed Search Bar Sliding Tabs Floating window with tabs 続きを見る クールで分かりやすいサイト作りに役立てまし
[JS]jQueryのプラグイン33 1選 -2008年10月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 ListNav リストの高機能なナビゲーションを作成。 Scroll your HTML ホイールにも対応した高機能なスクロールする
FlashではなくjQueryで！インパクトのあるUIを作ろう (1/5)
もう間もなく投開票を迎える米国の大統領選挙。候補者である共和党のジョン・マケイン氏、民主党のバラック・オバマ氏の両者のWebサイトを見ると、インターネットを重要な選挙ツールとして位置づけていることが伺えます。ネットを使った選挙活動が制限されている日本とは事情が異なるせいもあるでしょうが、両者ともに公式サイトの充実ぶりがすごいのです。ブログや動画の活用は当たり前。グッズのネットショップや、サポーター向けのコミュニティ機能など、ちょっとしたポータルサイトのような凝った作りです。 そんな気合の入ったWebサイトだけに、デザインの面でも参考になる面が多々あります。今回は特に、Ajaxを活用したユーザーインターフェイスを持つ、オバマ候補の公式サイトをお手本とさせていただきましょう。 今回のお手本サイト： 『Barack Obama and Joe Biden』 11月4日に開催される米国大統領選挙に
フォームのバリデートとAjax送信をスマートに実装できるJSライブラリ「Proto Form」:phpspot開発日誌
Proto Form フォームのバリデートとAjax送信をスマートに実装できるJSライブラリ「Proto Form」 なかなかいいのは、idの値に、_Req とか _Email とかしておくと勝手にバリデートしてくれる点。 title にエラーメッセージを入れるみたい。 <input type="text" id="name_Req" name="name" title="Required! Please enter your name" /> <input type="text" id="email_Req_Email" name="email" title="Required! Please enter a valid your email address" /> <input type="text" id="telephone_Tel" name="telephone" title=
Ajaxorized » Phototype: image manipulation with Javascript
Todos sabemos que una de las capitales más independientes y liberales es Amsterdam, pues sus leyes permiten vivir situaciones y consumir productos que en otros países nunca podrán ser legalizados, de la misma manera el sexo puede ser realmente una prohibición que Amsterdam ha dejado atrás hace mucho tiempo. Uno de los parques de mayor influencia en la capital de los países bajos es el parque Vodel
第5回 jQuery UIによるユーザインターフェースの改良 | gihyo.jp
今回使用する「Dialog」「Draggables」「Droppables」「Sortables」に必要なファイルは以下の通りです。 themes/ jquery-1.2.3.min.js jquery.dimensions.js ui.mouse.js ui.resizable.js ui.dialog.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext.js ui.sortable.ext.js ui.sortable.js jQuery UI 1.5bを使うために、今回は同梱されているjQuery 1.2.3を使うことにします。バージョンが上がりますが、これまでのサンプルの動作に影響はありません。 ライブラリの設定 ライブラリの各ファイルを、head要素の子要素に以下のように指定します（
JavaScriptライブラリの先駆け「prototype」を勉強しなおすサイト20
twitter facebook hatena google pocket 現在JavaScriptライブラリは数多くリリースされていますが、それらのさきがけとなったのは「prototype」でした。 またNASAのサイトでも使用されているように、その実力は広く認められています。 今回はprototypeの価値を見直し、勉強できるサイトを紹介します。 sponsors Reference ・prototype.js リファレンス（v1.4.0,1.5.x,1.6.0） ・prototype.js の開発者向けメモ：（v1.5.0） ・prototype.jsリファレンス HowTo / Review ・第１回：Prototypeライブラリの内部 ・いまからはじめるPrototype.js ・第１回：Prototype.jsを使う準備 ・Prototype.jsとは何か ・Prototype
Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト
Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト：パターンとライブラリで作るAjaxおいしいレシピ（4）（1/4 ページ） script.aculo.usの一歩進んだテクニック 今回紹介するscript.aculo.usは、以下のような機能を提供するAjax（JavaScript）フレームワークです。 ビジュアルエフェクト ドラッグ＆ドロップ DOM操作 オートコンプリート スライダー 単体テスト prototype.jsをベースのライブラリに使用しているので、prototype.jsとともに利用したことがある方も多いのではないでしょうか。 今回はscripot.aculo.usのエフェクト機能に焦点を絞り、より突っ込んだ使い方を紹介していきます。 ■ Ajaxの弱点を補う「エフェクト」の必要性 Ajaxを活用することで、画面全体を再描画せずに画面上の一部分のみを変更し
Yahoo! UI Library: TabView 使ってみた
JavaScript によるタブの切り替え UI の実装というネタで言えば、以前にも 「JavaScript でタブ切り替え UI を実装する」 で紹介しました... JavaScript によるタブの切り替え UI の実装というネタで言えば、以前にも 「JavaScript でタブ切り替え UI を実装する」 で紹介しましたが、今回は、Yahoo! UI Library の中から、「TabView」 を使用してちょっとしたインターフェースを作ってみました。 実はサイトのリニューアルと合わせてオススメ書籍とか紹介するページを作って、そこで浅ましくアフィリエイトしようとか考えていたんですが、ただ商品を並べてもつまらないし、ちょっと変わった見せ方ができないものかということで考えた結果が、今回の TabView を使った見せ方。メモもかねて作り方を解説してみようと思います。長くなりそうなので何回
MOONGIFT: » リッチなWebアプリケーションを実現「Rico」:オープンソースを毎日紹介
※ 画像の一部は公式サイトデモより。 アプリケーションをWeb化する上で、リッチなユーザインタフェースは欠かせない。そうでなくとも動作はするが、ユーザビリティを高めるのには必須と言えるだろう。 自作しても良いだろうが、やはり既存のライブラリを利用するのが手っ取り早い。チェックしてほしいのはこれだ。 今回紹介するオープンソース・ソフトウェアはRico、リッチなWebアプリケーションのためのライブラリだ。 Ricoは各種言語（ASP、.NET、Perl、PHP、Rails）用にサンプルも用意され、開発者の利便性をよく考えられている。実際可能な機能は数多い。 角丸のボックス作成、タブウィンドウ、ドラッグアンドドロップ、アニメーション、ドロップダウンリストの作成、アコーディオン機能、ソートやフィルタリングの可能なテーブル等がサンプルとして提供されている。 それらの機能を利用し、天気のガジェットがサ
ありそうでなかったPrototype.jsベースの日付入力補助ライブラリ「DatePicker」:phpspot開発日誌
ありそうでなかったPrototype.jsベースの日付入力補助ライブラリ「DatePicker」 2007年09月03日- Eulerian Technologies - DatePicker using Prototype and Scriptaculous You'll find here the code and instructions for a datepicker widget using Prototype and Scriptaculous librairies. ありそうでなかったPrototype.jsベース(script.aculo.us使用)の日付入力補助ライブラリ「DatePicker」。 次のような日付入力補助機能を実装できるようです。 YUIなんかには普通にありましたが、Prototype.js ベースははじめてではないでしょうか？ 実装コードも次のように非
画像に簡単にポラロイド風エフェクトをかけられるJavaScriptライブラリ「Instant.js」:phpspot開発日誌
FlashとAjaxを使った使いやすいファイルアップロードライブラリ「FancyUpl... 次の記事 ≫：16x16ピクセルの芸術的favicon集 Instant.js Instant.js 1.0 allows you to add an instant picture effect (including tilt) to images on your webpages. 画像に簡単にポラロイド風エフェクトをかけられるJavaScriptライブラリ「Instant.js」 次のように、画像をポラロイド風にすることが出来ます。使い方も簡単で、画像の class 属性に定められたclass名を付けるだけ。 使い方は、まず、<script type="text/javascript" src="instant.js"></script> でinstant.js を読み込んで、 画像にcl
超簡単にソートやリサイズ、その場編集が可能なテーブルを作成できるJavaScriptライブラリ「TableKit」:phpspot開発日誌
超簡単にソートやリサイズ、その場編集が可能なテーブルを作成できるJavaScriptライブラリ「TableKit」 2007年05月31日- TableKit TableKit is a collection of HTML table enhancements using the Prototype framework. 超簡単にソートやリサイズ、その場編集が可能なテーブルを作成できるJavaScriptライブラリ「TableKit」。 次のようなExcel風テーブルが簡単に作れます。 どれぐらい簡単か、というと、必要なJavaScriptを読み込んだあと、table の class に次のように値を指定するだけ。 <table class="sortable resizable editable"> 最低幅の指定など、動作に関するカスタマイズも豊富なオプションによって指定可能です。 こ
HighSlide JS と prototype.js の競合を解消する
サムネイル画像を拡大させる HighSlide JS（関連記事「Highslide JS でサムネイル画像を拡大表示する」）には、 ブラウザのウィンドウサイズに収まるように拡大（右下のアイコンをクリックすると 100% 表示） という機能があり、この場合、拡大した画像の右下に最大化するアイコンが表示されます。 このアイコンをクリックすると、ブラウザのウィンドウサイズに関わらず画像が最大化されます。最大化された画像は最大化前と同じようにドラッグや縮小することができます。 １．問題点 この最大化をすると別のページにジャンプをして元画像が表示されてしまうケースがあります。 ２．原因 Highslide JS と prototype.js を同時に利用している場合、prototype.js が Array に対して拡張を行っているため、Highslide JS で使用している配列が汚染され、 fo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SexyLightBox - www.coders.me
