jQueryUI

疎結合なUIコンポーネントの作成について

複数画面で使えるAjax formダイアログのコンポーネントを作る 初期状態 Google CalendarのようなWebアプリを想像してください。 1日が1個のセルになっていて、セルをクリックしたらスケジュール登録ダイアログが表示され、 入力して登録ボタンを押すとスケジ…

Secrets of the JavaScript Ninja輪読会 JavaScriptのテスト

先日行われた若手IT勉強会 : ATNDに参加。 JavaScriptのテスト周りの話を読む。 JavaScriptのテストユニットフレームワークにおいては、 非同期テストのサポート eventのシミュレーションのサポート が重要とかそんな感じだった。 QUnitでは非同期テストはサ…

jQuery UI Droppableに疑似的にdropする

jquery ui droppable とかを JSTAPd でテストするいい方法ないかなー。。。 http://twitter.com/Yappo/status/5416937057 これが気になったので、やってみた。 前提としてjQuery UIの各pluginはplugin用のオブジェクトを持っていて、 jQueryオブジェクトでの…

The JUI 2009 Returns (JavaScript User Interface)

The JUI 2009 Returns (JavaScript User Interface) : ATND CSS Transforms, JavaScript IME, Explorer-like selection Paul Bakaus jQuery UIのメインcommiter JavaScript UIのunittest frameworkを作ってる 3Dの箱の表面にテクスチャ貼ったりテクスチャを…

Django Hack-a-thon Disc.8 でjQuery & jQuery UIのプレゼン

http://djangoproject.jp/weblog/2009/02/24/django_hack_a_thon_disc8/ スライド jQueryを効率的に利用・習得するためのhogehogeみたいな話と、jQueryUIの紹介という内容。 質問はTwitterのreplyで受け付けるという形にしたらとてもやりやすかった。 補足 …

jQuery UI Tabs覚え書き

公式サイト http://ui.jquery.com/ なお、以下の解説は1.5系前提です。 内部実装概略 tabsメソッドの対象は何か? 「$(someSelector).tabs();」を実行した時のjQueryオブジェクトはどんなDOM要素をラップしたjQueryオブジェクトか? →タブにするli要素の祖先…

jQueryとGreasemonkeyの相性が素晴らしく良い件

pixiv_add-bookmark.user.js · GitHubを弄ってて実感した。 DOMツリー構築とE4X jQueryだとjQuery関数にHTML断片を文字列として渡す事でDOMツリーを構築する事が出来る。 で、Greasemonkeyのscriptが動く環境は当然FirefoxなのでE4Xを使う事が出来る。 する…

pixivのイラストをその場でブクマできるようにするグリモン(少しマシになった版)

pixiv_add-bookmark.user.js · GitHub クリックしてインストール修正・改良点 酷いポカのせいででやたら重いのを修正 表示して閉じてまた開くとグループが倍になってるの修正 選択済みグループがグループ一覧で強調表示されるようにした 選択済みグループ表…

pixivのイラストをその場でブクマできるようにするグリモン(超とりあえず版)

とりあえず動く版は出来たものの超とりあえず版。 pixiv_add-bookmark.user.js · GitHub クリックしてインストールここら辺の話の続き pixivのイラストをブックマークするのをブックマーク追加画面に遷移せずに行いたい - 文殊堂 なぜか$(/*何がし*/)でindex…

jQueryUI 1.6でのメソッドprivate化回避コード

$('.ui-dialog-content').dialog('position','top'); などとやってやれば、Dialogを画面の一番上に移動することが出来る。 一方1.6では以下のどちらを実行してもピクリともしないのだ。 $('.ui-dialog-content').dialog('position','top'); $('.ui-dialog-co…

jQuery UI1.5→1.6での変更点(1.6RC2時点)

Download Builder | jQuery UIで1.6RC2をダウンロードできる。 以下変更点 widget pluginが5つ追加された 興味のある人は落としてきてデモを触ってみるとよいかと。 以下簡単なせつめー ui.autocomplete.js オートコンプリート ui.colorpicker.js グラデーシ…

jQueryUIの素敵なとこってどこなんだぜ?

まず、jQueryの素敵な所 は何かって言うと、 CSSセレクタで比較的簡単に簡単に要素を選択出来る メソッドチェーン(流れるようなインタフェース?)でDOM操作が快適に行える という所だと思うのだ。 event関連とかAjax関連とかネイティブのAPIを素敵な感じにラ…

jQueryUIのコンポーネント化についてふと考えたこと

jQueryUIは何かのコンテンツをjQueryオブジェクトにしてpluginのメソッドを呼ぶだけで様々な機能を付加できる。 $('<div/>') .append('<div><input type="text"/></div>') .append('<div><span/></div>') .dialog({ buttons:{ copy:function(){ $('div:eq(1)>span',this).text($('div:eq(0)>:text',this).val()); }, </div/>…

jQuery UI Dialogの使い方の基本-初期化とメソッド呼び出し(jQuery UI 1.5.2)

jQuery UI Dialogの導入法と使い方のさわり(jQuery UI 1.5.2) - 文殊堂の続きまず、UI Dialogを読み込んだときにjQueryオブジェクトで使えるようになるメソッドはdialogメソッドだけです。 UI Dialog絡みの操作は全部dialogメソッドで行います。 具体的に出…

jQuery UI Dialogを使う Google AJAX Libraries API編(jQuery UI 1.5.2)

jQueryだけでなくjQueryUIもGoogle AJAX Libraries APIで取ってこれるようですので、その使い方をば。Google AJAX Libraries APIで取ってくるjQueryUIは、 UI Core・Core Interaction・Widgets・Effects全部入りです。 なので、当然前回言及したDialog・Drag…

jQuery UI Dialogの導入法と使い方のさわり(jQuery UI 1.5.2)

jQuery UI Dialogって何? http://dev.jquery.com/view/trunk/ui/demos/functional/#ui.dialogにあるデモを見ると感じがつかめると思うけど、 ウィンドウっぽいダイアログをちょいちょいで作れちゃうし、 オーバーレイありのも作れちゃうjQuery plugin。 使…