Hatena::ブログ(Diary)

Cyokodog :: Diary

こちらのブログは更新を停止しております。最新の記事は以下ブログをご覧ください。
www.cyokodog.net

January 25, 2011

FORM の登録確認のダイアログ表示に jQuery Alert Dialogs を使う方法

jQuery Ex Alert Dialogs の更新履歴

2011-06-07
Ver 0.1.2
各種パラメータの指定、API オブジェクトの取得をできるようにしました。

毎度ながら地味なネタですが、FORM 要素で登録確認のダイアログを表示する際、jQuery Alert Dialogs で代替えする方法について書いてみたいと思います。ちなみに jQuery Alert Dialogs とは、独自デザインなダイアログを表示してくれる jQuery プラグインです。

続きを読む

December 13, 2010

テーブルのセル間をフォーカス移動できるようにする jQuery exTable Focus

先日、現物とドキュメントの乖離に嫌気がさし、テーブル定義書の和名や説明文を、DBのメタ情報として保存できるようにする Web アプリを作りました。(オラクルデータディクショナリを利用してます)

テーブル定義書イメージな画面から Ajax + In-Place-Editor で直接編集できるようにしたのですが、編集量が多い時など、キー操作による上下左右のフォーカス移動ができないとどうにも不便だったので、これを可能にする jQuery プラグインを書いてみました。

続きを読む

November 19, 2010

HTML5 の autofocus 属性を拡張する jQuery exAutofocus

更新履歴

2010-11-25
jQuery Alert Dialogs との併用例を追記しました。

HTML5 のサポートブラウザで実装されてる autofocus 属性をクロスブラウザで使用できるようにする jQuery プラグインです。適用したい要素に autofocus 属性を記述した状態で JS ファイルを読み込むと、画面表示時に自動的に autofocus 属性を持つフィールドにフォーカスがあたるようになります。

ただ autofocus の標準機能だけだとあまり実用性がないので、「入力エラーがあった場合はそちらのフィールドへのフォーカスを優先する」といったちょっとした拡張を、オプションで使用できるようにしてあります。

続きを読む

November 01, 2010

要素のリサイズイベントを検出する jQuery exResize

ブラウザのウィンドウサイズが変更された時に、何らかの処理を行いたい場合、jQuery では resize() メソッドで window オブジェクトに対し処理を割り当てます。

$( window ).resize(function(){
	/* 行ないたい処理 */
});

一方、div 要素などの普通の HTML 要素に対し、resize() メソッドで割り当てた処理は起動されることはありません。resize() メソッドではウィンドウのサイズ変更しか検出することができないようです。

今回作成した jQuery プラグイン exResize を使用すると、div 要素等の普通の HTML 要素においても、サイズ変更を検出し、割り当てた処理を実行させることができるようになります。

続きを読む

October 15, 2010

select 要素の change イベントを補正する jQuery exChange Select

先日、select 要素の値を矢印キーで変更してたら jQuery の change イベントが起動しないという事象に遭遇しました。例のごとくまた IE6 固有の問題かと思ってたのですが、念のため調べてみると Opera 以外はほとんどのブラウザで再現してしまいました。

という訳で select 要素で正しく change イベントを起動させる jQuery プラグインを作ってみました。

続きを読む

September 27, 2010

エクセルベースの帳票出力機能を自動生成するツール

すっかり月一ペースのエントリになってしまってますが、そろそろ9月も終わりなので実務も兼ねたネタを1つ… 今やってる業務は、2ヶ月程前に引き継いで担当になってしまった新システム(Webアプリ)の設計で、外注分の帳票出力機能の設計をやっているところです。今のところ以下のような前提条件があります。

  • エクセルで出力
  • IE 内の VBScriptActiveX)で帳票生成処理を完結させる(社内標準が Offece2000 から Offece2010 になろうとしてる関係もあり・・・)
  • 1つのブックにいろいろなパターンのシートを含める(動的に生成するグラフやオートシェイプを含んだシートとか)
  • 年に1、2回の確率で帳票レイアウトが変更されていく可能性が高い

続きを読む

August 19, 2010

HTML をプレゼン形式に表示する jQuery プラグインを作ってみた

先日「jQuery の紹介」と題して、職場(情報システム部門)向けのプレゼン資料を作成する機会がありました。うちの職場では「新技術紹介」という名目で、隔週でプレゼンを行うという決まりがありやむなく作ったものです。(資料の内容自体は、大量にブクマした記事から jQuery の紹介文の部分だけをコピペして作った手抜き資料ですが・・・)

はじめはパワーポインタで作ってた資料ですが、jQuery の紹介で jQueryプレゼンツール使わないのもどうかなと思いプラグインを探しはじめましたが、例のごとくなかなか IE6 にもやさしいやつを見つけられずに・・・(会社の標準ブラウザは未だに IE6 なんです)

そんな訳で、結局自前で作ることになった jQuery ベースのプレゼンツールを紹介致します。

続きを読む

July 21, 2010

リスト要素をドロップダウンメニューに変換する jQuery プラグインを作ってみた

更新履歴

2011-09-29
Ver 0.1.3 に更新
垂直方向へのスクロール状態でのメニュー表示位置ずれ不具合を修正しました。
2010-12-01
Ver 0.1.2 に更新
ドロップダウンメニューの保持を示すマーカー(»)の表示位置の調整処理を補正しました。
2010-11-17
Ver 0.1.1 に更新
メニューが画面の端で展開された際に、ウィンドウの表示枠からはみ出て隠れてしまわないように、表示位置を補正をするようにしました。Demo

先日、イントラの WEB ページで 10 年以上使用してる Java アプレット製のドロップダウンメニューを JavaScriptリニューアルしたいという相談を受けました。jQueryプラグイン使えば簡単かなと思い安請け合いしたのですが、なかなかしっくりくるプラグインを見つけることができませんでした。具体的には水平/垂直の両方向に対応したドロップダウン、メニューの表示/非表示のタイミングの使用感といった点で Java アプレット版より劣ってしまいます。

そんな訳で Java アプレット版と同等レベルの使用感を実現させるべく自前で作成することになった jQuery プラグインを紹介します。

続きを読む

June 28, 2010

In-Place-Editor (その場で編集する UI) の jQuery プラグインを書いてみた

更新履歴

2011-07-05
Ver 0.1.5.1
リスト編集モードで値未入力時のラベル表示不具合等を修正しました
2011-06-20
Ver 0.1.5
表示テキストの整形処理を記述できる replaceLabel パラメータを追加しました。
2011-04-29
Ver 0.1.4.1
編集値の変換処理の不具合を修正しました
2011-04-21
Ver 0.1.4
リスト編集モード等の機能追加をしました
jQuery exInPlace Editor にリスト編集モード等の機能追加をしました - Cyokodog::Diary
2010-07-17
Ver 0.1.3
editorType パラメータを textarea にし元テキストに br もしくは p が含まれた場合、textarea 内で改行に置換されない不具合を修正しました
2010-07-16
Ver 0.1.2
block 要素限定で表示/編集モード切替時にエフェクトをかけられるようにしました
oninit , effect , dataSelect パラメータを追加しました(詳細はリファレンス参照)
2010-07-01
Ver 0.1.1
ESC のショートカットキーを、Safari , Chrome でも効くように修正しました。
2010-06-28
Ajax 関連の Demo ページに不具合があったので修正しました。
ESC のショートカットキーが、Safari , Chrome で効かないようなので原因を調査中です

今さら感はありますが、業務で使用することも多いので再利用しやすいようプラグイン化してみました。以前書いた記事「In-Place-Editor (その場で編集するUI) の実装方法を考えてみた」では網羅できなかった下記機能についても対応させてみました。

  • 初期化処理時のコールバック処理(内部生成された要素の初期化処理などが可能)
  • 編集、確定、取消に対する処理の割り込みとイベントのキャンセル
  • 確定/取消ボタンの表示/非表示オプション
  • テキスト/HTML編集モードの切替オプション
  • DB更新 / Validation 処理後の(表示位置が最適化された)メッセージ表示機能
In-Place-Editor %28その場で編集するUI%29 の実装方法を考えてみた - Cyokodog::Diary

続きを読む

May 30, 2010

iframe を iframe ぽく見せない jQuery プラグインを作ってみた

更新履歴

2011-09-29
Ver 0.1.4 に更新
  • jQuery 1.6.2 に対応しました
2010-06-10
Ver 0.1.3 に更新
2010-06-04
Ver 0.1.2 に更新
  • IE6 で実行時にタイミングにより表示されてたエラー警告を、表示されないように修正しました。
2010-06-01
Ver 0.1.1 に更新
  • IE で正常に動作しない不具合を修正しました。

社内アプリAjax 的な UI なものが増えるにつれて、1画面にたくさんの機能を詰め込みたいという要望を受ける事が多くなりました。素直に作るとプログラムも肥大化し保守も大変になるので、機能単位に画面を分けて作成し、それぞれの画面を iframe で1つの画面に読み込むといった方法で対応したりしてます(iGoogle 的な感じ)。

その際 「iframe 使ってます感」がでないようにするため、枠線/スクロールバーの消去やコンテンツサイズに合わせた iframe サイズの調整を行うのですが、毎回この処理を書くのも面倒なので jQuery プラグイン化して簡単に使えるようにしてみました。

続きを読む