2009-01-01から1年間の記事一覧

jQuery ライクなプラグイン API の定義方法を考えてみる

jQuery UI の $.widget を使用しプラグイン定義を行うと、jQuery らしい一貫性のあるプラグイン API が使えるようになります(関連記事)但し「ui.core.js(13.6KB)が必須」「API メソッド実行の記述が冗長になる」といった条件がついてしまいます。今回は…

jQuery UI の プラグイン定義関数 $.widget を使ってみる

jQuery UI の tabs や accordion といったウィジェット系プラグインでは、専用のプラグイン定義関数 $.widget でプラグイン定義することで、一環性のあるプラグイン API を利用者に提供しています。今回は、$.widget を使ったプラグインの定義方法について調…

テーブルのヘッダとフッタを固定する簡易プラグイン

更新履歴 2010-06-02 jQuery.exTable.js を Ver 0.1.2 に更新 jQuery 1.3 以上のバージョンで正常動作しない不具合を修正しました。 サンプルを含む zip ファイルでダウンロードできるようにしました。 2010-01-21 jQuery.exTable.js を Ver 0.1.1 に更新 セ…

プラグイン API の定義パターンについて調べてみた

jQuery の標準 API が DOM 操作等のコア機能に特化しているのに対し、プラグインとして提供される機能には、ウィジェット生成処理をはじめとした拡張機能的なものが多々あります。また、このようなプラグインの中には内部的に生成した要素やメソッドに対し、…

jQuery プラグインの定義パターンについて調べてみた

jQuery のプラグインの定義手法については、いろいろな記述の仕方が考えられるかと思います。今回、実際に公開されているソースを参照して、どのような定義パターンがあるのかを調べてみました。 jQuery 標準 API の定義構造のおさらい まず、jQuery が標準…

In-Place-Editor (その場で編集するUI) の実装方法を考えてみた

画面上の変更したいデータや文章をクリックすると、画面遷移をせずその部分のみが編集可能状態になるユーザインターフェースのことを Edit-In-Place あるいは In-Place-Editor と呼ぶそうです。 jQueryでEdit-In-Place(その場編集)を実現するためのプラグ…

タブ UI 生成プラグイン exTAB.js を機能拡張しました

exTAB.js は、見出し要素ベースなタブ UI を生成する jQuery プラグインです。 前回のエントリ(アウトラインの付いたタブ UI の CSS の記述方法を調べてみた - Cyokodog::Diary)で調べたタブデザインを簡単に適用できるようにした他、以下のような機能拡張…

アウトラインの付いたタブ UI の CSS の記述方法を調べてみた

CSS

以下のようなアウトライン付きタブ UI の CSS の書き方が分からなかったので調べてみました。

jQuery.exFixed.js を機能拡張しました

以前、exFixed という jQuery プラグインを作成しました。IE6 で position:fixed を実現するプラグインで、特徴として IE6 でもガタつかない position:fixed が可能 クロスブラウザで fixed 要素に対し、位置移動、リサイズ等の動的な変更が可能(素のanimat…

スクロールイベントの開始 / 終了 / 方向を判定する jQuery プラグインを書いてみた

バージョンアップしました。詳細は以下記事をご覧ください。[Ex Scroll] スクロールイベントの開始/終了、方向を判別できる jQuery プラグイン - Cyokodog 需要なさそうですが、備忘録ということで。 只今、以前作成した exFixed.js という jQuery プラグイ…

inline-block を使ってプレースホルダ付き入力欄を実装する

更新履歴 2010-01-22 jQuery.exPlaceHolder.js を Ver 0.1.1 に更新 title 属性(あるいは任意の属性)で、表示するメッセージを指定できるようにしました 専用の css ファイルの読み込みを不要にしました jQuery.exInlineBlock.js ファイルの読み込みを不要…

クロスブラウザで display:inline-block させる jQuery プラグインを作ってみた

更新履歴 2009-11-11 ご要望があったので jQuery.exInlineBlock.js の圧縮版をダウンロードできるようにしました。 CSS には display:inline-block というボックス要素を横並びに配置させる機能があります。 通常のボックス要素(diplay:block)は、横に伸び…

IE6 でガタつかない positoin:fixed をさせるための詳細条件を調べてみた

「IE6 position:fixed の諸問題を解決する jQuery.exFixed.js」について、たくさんのコメント、フィードバックありがとうございます。 exFixed のうりとして「IE6 でもガタつかない position:fixed ができる」というのがありますが、フィードバックでいただ…

見出し要素ベースなタブUIを生成する jQuery.exTAB.js

更新履歴 2009-11-20 リファレンスサイト(GAE)変更中のため只今参照できません。機能拡張版の下記エントリをご覧ください。 タブ UI 生成プラグイン exTAB.js を機能拡張しました - Cyokodog::Diary 見出し要素より目次を自動生成する jQuery プラグイン jQu…

Mayaa for GAE/J でサイトのレイアウト共有機能を試してみた

GAE

Mayaa とは はてなキーワードによると Mayaa とは HTML をベースとしたテンプレートによるプログラマとデザイナの作業分担を強く意識したWEBフロントサービスエンジンです。オープンソースにて、Seasar ファウンデーションで開発されています。 と説明されて…

GAE/j (Google App Engine for Java) を活用するための Eclipse 環境の整備

GAE

無料ホームページスペースとしてのGAE 当ブログのサンプルプログラムは FC2 のホームページスペースに置いてるのですが、(少しですが)広告が入ったりCGIなどが使えなかったりします。 で、公開してる jQuery プラグイン のドキュメントやサンプルの置き場…

iframe 関連処理まとめ

iframe 関連の処理で分かったことをこちらにまとめてこうかと思います。コードは jQuery ベースです。変更履歴 2009.06.17 Safari,Chrome にて動的に生成したiframe内に CSS ファイルを読み込ます方法が分からないとしてましたが、codeなにがし(http://code.…

目次の自動生成を行う jQuery.exTOC.js

exTOC は、ページ内の Hn 要素(h1 - h6)に対し、ページ内リンク付きの目次コンテンツを自動生成する jQuery プラグインです。 以下のような特徴があります。 目次 / Hn 要素に対する付番機能 ページ内リンクのスムーススクロール 高いカスタマイズ性 以下は …

QueryString 取得プラグイン jquery.exQueryString.js を作ってみた

ありがちなプラグインかなと思い調べたところ jQuery プラグインではありませんが、いくつか見つかりました。 JavaScriptファイルに引数を渡す - hail2u.net 外部Javascriptのsrc属性で、URL引数を取得する - CSS-EBLOG JavaScriptファイルに引数を渡す(な…

jQuery exFixed を動的な位置移動やリサイズ処理に対応させてみた

更新履歴 2010-11-14 exFixed Ver 1.3.0 ベースの記述に変更しました。 2009-10-16 本ページのサンプルソースを jQuery.exFixed.js の Ver 1.2.0 に対応した記述に差し替えました。詳細は以下をご覧下さい。 jQuery.exFixed.js を機能拡張しました - Cyokodo…

ソースを修正しないでモーダルウィンドウ系プラグインの IE6 のガタつきを抑止してみる

jQuery BlockUI のようなモーダルウィンドウ系プラグインの中には、画面スクロールしてもウィンドウ表示位置が固定されるものがありますが、IE6 の場合 position:fixed が使えない関係でスクロール時、固定ウィンドウがガタついて表示されてしまう事が多いよ…

jQuery で簡単なデートピッカー(日付選択UI)を作ってみる

去年の8月頃から作ってるシステムが来月リリース予定ってことで、後回しにしてた画面周りの微調整をしてるのですが、デートピッカー(カレンダーから日付を選択するUI)もその1つで後で jQuery のプラグインの中から適当にチョイスすればいいやと思ってい…

IE6 position:fixed の諸問題を解決する jQuery.exFixed.js

最近の更新履歴 2011-12-07 Ver 1.3.2 リリースjQuery 1.7.1に対応しました。 2010-12-27 Ver 1.3.1 リリースfixed 要素がブラウザ表示エリアから隠れ1度非表示状態になると、ウィンドウをリサイズし表示エリア内におさめても非表示状態が続いてしまう不具…

Date オブジェクトを拡張する jQuery.exDate.js

更新履歴 2009-03-25 addMonths メソッドでマイナス値を引数にした時の不具合を修正しました。 JavaScript の標準オブジェクトである Date オブジェクトに、各種拡張機能を追加したオブジェクトを返す jQuery プラグインを作ってみました。インスタンス化し…

レイヤーベースのプレースホルダ付き入力欄を作る

変更履歴 2009/03/26 IE6 不具合対策として、input 要素と同一 font-size をラベルに割り当てる処理を無くし、パラメータでラベルの style を指定できるようにしました。(理由はソースのコメント参照) prototype.js 版 JavaScript でプレースホルダつき入…

jQuery の位置・サイズ関連メソッドまとめ

ばらけてきたのでこちらにまとめます。 索引 位置の設定 css(name,value) 位置の取得 css(name) offset() position() scrollTop() / scrollLeft() event.pageY / event.pageX サイズの設定 css(name,value) / height(value) / width(value) サイズの取得 css…

汎用的に使える表示位置補正メソッドを定義してみる

前回のエントリのつづきです。 見た目上の原点位置を取得するメソッドを定義する スクロールコンテナの表示原点位置を取得する処理のみを抽出し、汎用的に活用できるメソッドを定義できないか考えてみたいと思います。 と言って終わったので、jQuery でこれ…

スクロールイベントにおける position:absolute 要素の位置補正

スクロールイベント内での position : absolute 要素の表示位置の補正処理について考えてみます。具体的には以下のプラグインのような動きの動作原理について考えてみます。 jQuery Scroll Follow | demo スクロールにより対象要素が隠れると、スクロールに…

jQuery でブラウザの表示領域に対するサイズや位置情報を取得してみる

更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary 前回、前々回のエントリではボックス要素を例にサイズや位置、スクロール量などの求め方について書き…