これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
FormヘルパーとjQuery UIのdatepickterを連動させる
日付選択のプルダウンに対してjQuery Uに含まれるdatepickerを使う方法をメモついでに紹介。 CakePHP 1.2.6 + jQuery 1.3.2 + jQuery UI 1.7.2で確認。 Formヘルパーでは、タイムスタンプ系のフィールドを持つカラムに対してinput()を使ったり、date()やdateTime()といったメソッドでプルダウンによる日付選択を表示させるのはごく一般的だと思いますが、これを発展させてカレンダーから日付を選択することもできるように簡単に機能を追加する方法をご紹介します。 jQueryに含まれるdatepickerは便利な機能でして、オプション次第でいろいろな表示ができます。しかし、このカレンダーはinputに対してしか発動させられません。よって今回のようなプルダウン（selectタグ）には直接結びつけることはできないのです。そこで下記のよう
第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要素の子要素に以下のように指定します（
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせるとページ送りが出るUI。これだけでもシンプルでかなり使えそう。無駄なUIは不要という方に。 ページインデックスを次のように○で表示したスライダーも作れます。 ページ番号がついたもの サムネイルがついた物 サムネイル＋ラベル付き サムネイルを横に配置したもの シンプルにサムネイルを敷き詰めた例 何らかの製品等の特徴を表示するようなおなじみのタブUI型スライダーも。 画像だけでなくHTMLも使える タ
[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要素にツールチップ、ポップアップを作成できます。 ツ
WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」:phpspot開発日誌
WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」 2010年11月25日- jquery.dynatree.js | jQuery Plugins WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」。 次のように、デザインそっくりのUIが比較的簡単に実現できます。 スキンに対応していて、次のように、Vistaっぽくすることも可能 アイコンを付けてより分かりやすくすることもできます。 ドラッグ＆ドロップも出来たりします。移動している最中のUIもWindowsアプリそっくり 各ツリーはAjaxに対応していて、読み込み時に全部読む必要がなく、巨大なツリーを表示することにも対応しています。 Windowsアプリなんかでは何かと便利なこのUIですが
[JS]ページをめくるアニメーションが楽しい、本のように表示するスクリプト -Viewbook
div要素で配置したコンテンツ（パネル）を自動で重ねて、本のようにページをめくるアニメーションで次々にコンテンツを表示するスクリプトを紹介します。 Viewbook - jQuery Plugin デモ [ad#ad-2] 次のページをめくるには三通りの方法が用意されています。 「Next」「Previous」で、次・前へ ページのナンバリング ※違和感がありますが キーボードの矢印キー 中でも、キーボードでの操作が楽でいいですね。 Viewbookの実装 各パネル（ページ）はdiv要素のため、画像やテキストなどさまざまな要素が配置できます。 HTML コンテンツはdiv要素の入れ子で構成されています。 idのmybookは自由に変更できます。 <div id="mybook"> <div class="vb-load"> <div>Page 1</div> <div>Page 2</di
j-carousellite
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB, yet very flexible and customizable to fit most of our needs. As if that wasn't enough, the best part is yet to come... You don't need any special CSS file or class name to get
jQuery＋CSSによるカルーセルパネルの作り方 (1/3)
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
iPhoneのようにフリック操作でスクロールできるjQueryプラグインつくった - テクメモ
iPhoneやAndroid風にマウスでフリックスクロールできるようにするjQueryプラグインつくりました。 ページ末端を過ぎると戻るような動作を再現しています。ページ区切りを設定するとiPhoneのホーム画面のようなUIも実現できます。 現在はアルファ版として公開中。 デモ デモ（ページ全体） ダウンロード コードサンプル ページ一部をフリックできるようにする場合。 $('.selector').flickable(); ページ全体をフリックできるようにする場合。 $(window).flickable(); ページ区切りを作る場合。sectionオプションでセレクタか要素を指定します。 $('.selector').flickable({ section: '.content' }); オプションの取り方などを含め、jQuery UIと同じような実装にしています。 詳しくは、http
[JS]ドラッグで操作するコントローラーのデザインを強化するスクリプト -jQuery Skin
jQuery Skin デモページ [ad#ad-2] デモでは下記のように多種多様なコントローラーが実装されており、いくつかのコントローラーは互いに連動して動作します。 デモページ ※クリックで拡大 対応ブラウザはFirefox, Chrome, Safari, Operaで、IE6ではうまく動作しないでしょう、とのことです。 IE7で試したところ、いまいちでした。 jQuery SkinはjQueryのプラグインのため、実装にはjquery.jsが必要です。
iPhone向け最適化Webサイトを構築するjQueryライブラリ·jQuery iPhone UI MOONGIFT
jQuery iPhone UIはHTML/JavaScript製のオープンソース・ソフトウェア。iPhone用のWebサイトを構築するニーズが増えてきている。既に幾つかテンプレートもリリースされており、それらを使えば最適化されたインタフェースのサイトが作りやすくなる。 アイコンリスト そうしたライブラリを使う時に重要なのが、どれくらいの機能に対応しているかだ。単純なリストはもちろん、プロフィールページ、画像付きリスト、フォームなど多数のニーズがある。その一つ、JavaScriptを使ったパターンに適合できそうなのがjQuery iPhone UIだ。 jQuery iPhone UIの特徴は名前の通りjQueryを使っていることだろう。同種のライブラリとしてjQTouchがあるが、あちらはがちがちに固まっている雰囲気があるがjQuery iPhone UIは切り離して使えそうだ。HTML
Using jQuery Stop
Full Cycle of Animation on Hover/Off Goals: Animate wide on mouseEnter Animate back on mouseLeave No matter what, perform a complete wide/back cycle Not queue up animations on multiple hovers Be smooth NOT Using .stop(); The smoothness of this is perfect, but the animations queue up. $("div").hover(function(){ $(this).animate({ width: "200px" }); }, function() { $(this).animate({ width: "100px" })
ホバー開始、終了時のアクションタイマーを実装できるjQueryプラグイン「hoverTimer」:phpspot開発日誌
CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaEleme... 次の記事 ≫：Bit.lyのクリック数をエントリにjQueryで表示するコード Plugins | jQuery Plugins ホバー開始、終了時のアクションタイマーを実装できるjQueryプラグイン「hoverTimer」。 cssの:hoverなどを使うと、マウスホバー時の動作を指定できたりしますが、hoverTimerを使えば、ホバー開始や終了から何秒後という風にタイミングをずらせて処理を行うことが容易です。 ヘルプやヒントなんかで、マウスを乗せたらしばらくはマウス操作に関わらず数秒表示しておくというような部分に応用できますね。 実装は次のようにhoverTimerメソッドにオプションを渡せば動きます。 $(element).hoverTimer({ waitover:200, //
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://labs.skinkers.com/touchSwipe/
https://forum.jquery.com/portal/en/community/topic/jquery-ui-datepicker-with-select-lists
jQuery Masonry › Primer
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
dvq.co.nz