IDEA * IDEAドットインストール代表のライフハックブログ
jQuery用のGUIコンポーネントプロジェクト「mbideasproject」がすごい:phpspot開発日誌
mbideasproject - Project Hosting on Google Code jQuery用のGUIコンポーネントプロジェクト「mbideasproject」がすごいです。 以下、プロジェクトのホームページもOSっぽいインタフェース上でアニメーションしてかっこいいのですが、構成されるコンポーネントが色々とあるみたい。 mbContainers | デモ OSのようなウィンドウ管理システムが作れるようです このページの上でそれぞれ動作を確認することが出来ます。 mbMenu | デモ かなりリッチなメニュー実装用ライブラリ 右クリックのコンテキストメニューもいじれます mbImgNavigator | デモ 画面に収まりきらない画像をドラッグ＆ドロップでGoogleMapぽく見れるコンポーネント。サムネイル付き mbTabset | デモ mbTooltip | デモ よく
何を入力したかが分かるiPhoneスタイルのパスワード入力フィールド実装jQueryプラグイン:phpspot開発日誌
Better Password Inputs, iPhone Style | CSS-Tricks 何を入力したかが分かるiPhoneスタイルのパスワード入力フィールド実装jQueryプラグイン。 サイトのpasswordフィールドに入力すると、●●●といった感じで何を入力したか分からないまま文字入力が進んでいいます。 iPhone では、入力した最後の文字については分かるようなインタフェースになっていますね。 これと似たような仕組みを通常のWEBサイトでも実現出来るようにしたjQueryプラグインです。 passwordフィールドに入力をすると、右側に大きく、アルファベットがアニメーション表示されます。 デモページを開く 使い方は以下のように簡単。 $('#user-password-2').dPassword(); このプラグインで、非常に簡単にユーザビリティをあげることが出来そうです
iPhoneスタイルのチェックボックスをjQueryで簡単実装:phpspot開発日誌
Introducing iPhone-style Checkboxes iPhoneスタイルのチェックボックスをjQueryで簡単実装。 次のようなiPhoneに使われているようなUIのチェックボックスを実装するライブラリが公開されています。 使い方は次のように、$(エレメント).iphoneStyle() という風に初期化するだけという簡単さです。 <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $(':checkbox').iphoneStyle(); }); </script> 微妙にアニメーションする部分も芸が細かくていいです。 関連エントリ iPhone/iPodTouch風のON・OFFスイッチをJavaScriptで作成しよう iPhoneのロック解除の際のあのUIを
複数のテキスト入力に適したインタフェース実現用JavaScript「TextboxList」:phpspot開発日誌
TextboxList ・Devthought 複数のテキスト入力に適したインタフェース実現用Javascript「TextboxList」。 テキスト入力→改行を繰り返せば、アイテムがどんどん追加されていきます。 以下にデモを設置してみました。 ・テキストに入力して改行でアイテム追加 ・×ボタンでアイテム削除 ・バックスペースでアイテムどんどん削除 複数アイテム、例えば、アイテムにタグを追加したいというな場合に使えますね。 で、このform内容を実際にPOSTした場合、Array ( [test] => a,b,c,d ) のように、カンマ区切りのデータが得られます。 PHPなら、サーバ側で、このデータをexplodeしてリストに出来ますね。 この仕組みを利用したオートコンプリートの仕組みも同時に配布されています。 以下のようにサジェストされます。 これはなかなかクールですね。 Moot
stanlemon.net : jgrowl
jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X's Growl Framework works. Example Usage and Samples: // Sample 1 $.jGrowl("Hello world!"); // Sample 2 $.jGrowl("Stick this!", { sticky: true }); // Sample 3 $.jGrowl("A message with a header", { header: 'Important' }); // Sample 4 $.jGrowl("A message that will live a little longer.", { life:
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
[JS]既存のテーブルにソート、ハイライト、分割機能などを追加できるスクリプト
既存のテーブルにソート、ハイライト表示、データ分割、ページネーション機能を追加できる、高性能な超軽量（2.5KB）スクリプトをLeigeberから紹介します。 TinyTable JavaScript Table Sorter demo このスクリプトは、以前紹介した「設置も簡単なテーブルのデータをソートする超軽量のスクリプト」のバージョンアップ版で、主な機能は下記の通りです。 既存のテーブルに簡単に設置が可能。 2.5KBの超軽量スクリプト（他のスクリプトへの依存無し）。 列を交互に自動ハイライト。 選択した行のハイライト。 データの表示件数をコントロール。 分割したデータのページネーションを設置。
Easy Display Switch with CSS and jQuery - DesignM.ag
This tutorial was originally put together by Soh Tanaka during the Spring of 2009. Unfortunately the original demo went offline along with his source codes. I checked out an older archive copy on the WayBack Machine and decided to re-built this tutorial from scratch. I am going to demonstrate how we can make a simple list-style interface that switches over to thumbnails using jQuery. The user may
ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集:phpspot開発日誌
25 jQuery Plugins for Navigation ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集。 階層メニュー、タブ、ツリーやページャにいたるまで、ナビゲーション部分に使えるjQueryプラグイン集25種がまとまっていました。 jQuery (mb)Menu クールなアイコン付階層メニュー BDC Drilldown Menu (iPod Style) iPod風ドリルダウンメニュー jBreadCrumb 動くパンくずリスト Treeview そのまんまツリービュー jQuery Full Width Navigation Widthを指定のサイズにあわせる jQuery Nested Tabs タブ内タブというネストが可能なプラグイン FastFind Menu クールなメニュー実装 jQuery Pagination Pagerを実装 全部見る 最近
リッチで使いやすいＵＩを作成するためのjQueryライブラリ＆サンプル集:phpspot開発日誌
45 New jQuery Techniques For Good User Experience | Developer's Toolbox | Smashing Magazine リッチで使いやすいＵＩを作成するためのjQueryライブラリ＆サンプル集。 JSフレームワークはもうjQueryの時代だと言わんばかりの豊富かつ有用なサンプルが多数掲載されています。 Build A Login Form With jQuery Spoiler Revealer with jQuery AJAX Upload FCBKcomplete Create Accessible Charts Using Canvas and jQuery Radio Button and Check Box Replacement Submit a Form without a Page Refresh jQuery
jQuery 3 State Switch Plugin
$("div#state3-mode3multi1").j3ssw({off:"state3down-filter", on:"state3up-filter", def:"state3def-filter", callback:listener4, mode:3, status:true}); $("div#state3-mode3multi2").j3ssw({off:"state3down-filter", on:"state3up-filter", def:"state3def-filter", callback:listener4, mode:3, index:-1}); $("div#state3-mode3multi3").j3ssw({off:"state3down-filter", on:"state3up-filter", def:"state3def-filter
WebKitの３D回転をざっくりまとめてみた - livedoor Blog（ブログ）
MobileWebKitで要素を回転させる系のCSSをざっくりまとめてみました。PC版のsafariではまだ実装されていないみたいです。iPhone/Android向けサイトで使ってみるといいと思います。 CSS Transform/Transitionの基本 -webkit-transformで２次元や３次元の位置や角度、倍率を規定する。-webkit-transitionで-webkit-transformが変化する時のアニメーションを規定する。 流れとしては-webkit-transitionを決めた後に-webkit-transformを変化させる感じ。 javascriptから操作する時は-を省略して二文字目以降を大文字にする。 CSS:-webkit-backface-visibility:hidden; JS:hogehoge.style.webkitBackfa
「iPhone」風UIを実現するJavascript「iUI.js」
twitter facebook hatena google pocket iPhoneが米国で発売され、apple独特のUIの良さが好評になっています。 今回はJoeHewitt.comのiUIで紹介されている、iPhone的なUIを実現するjavascript「iUI.js」を紹介します。 sponsors 使用方法 実装はそう難しくありません。 iUIからダウンロードしたファイル群をアップロードし、CSSとjsをhead内に挿入します。 次にHTMLです。 <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> </div> と書き込みヘッダー部分を作成します。 後はページ毎にui id="ページ名"で括り、liのリンク先にそのidを指定すれば完成です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://moto-mono.net/2009/06/04/turorial-using-iphone-like-input-delete-button.html
Michael Leigeber
[JS]一覧表示のレイアウトを切り替えるスクリプト -Easy Display Switch
cssglobe.com
jQuery UI タブ
screamo.jp