April 27, 2012
一定範囲で position:fixed させる Ex Flex Fixed がかゆいとこだらけだったので作り直しました
かゆいとこだらけの Ex Flex Fixed (サイドメニューなどを一定の範囲でのみ position:fixed させる jQuery Ex Flex Fixed)を作り直しました。
改善内容
- fixed 要素の幅を自動調整するようにした
- リキッドレイアウト(可変幅)でちゃんと表示するようにした
- fixed 要素がコンテナからはみ出ないようにした
- fixed 要素がウィンドウ高さに収まらない状態でのスクロール時の表示を見やすくした
- 動的にレイアウトサイズが変更されても、ちゃんと表示されるようにした
- カラム高さを揃えるプラグインと併用できるようにした
という訳で半年も放置しておいてあれですが、ちょくちょく問い合わせもあるので、ご利用の際には新バージョンでどうぞ。
September 04, 2011
サイドメニューなどを一定の範囲でのみ position:fixed させる jQuery Ex Flex Fixed
更新履歴
- 2012-04-27
- Ver 0.2.0
再実装し、もろもろ痒いとこを解消しました。詳しくは下記エントリをどうぞ。
一定範囲で position:fixed させる Ex Flex Fixed がかゆいとこだらけだったので作り直しました - 2012-02-09
- Ver 0.1.3.1
Firefox の場合、watchPosition パラメータ が true でスクロール状態で画面更新すると固定位置がずれる不具合を修正しました。
IE の場合、水平方向非固定処理が有効にならないケースがある不具合を修正しました。 - 2011-12-31
- Ver 0.1.3
固定表示する要素の位置が変化するケースにも対応しました。 Demo - 2011-11-05
- Ver 0.1.2
IEで、固定表示する要素のmarginがautoの場合、正しく処理されない不具合を修正しました - 2011-10-06
- Ver 0.1.1
スクロール開始時に対象要素の表示位置が1pxずれる不具合を修正しました。
スクロールされた状態で、画面をリロードすると対象要素の表示位置がずれる不具合を修正しました。
サイドメニューの固定表示に position:fixed を適用するというケースがあると思いますが、表示位置が常に固定される故に、スクロール時にメニューがフッターに被らないようデザインしたり、ウィンドウの表示枠に収まるメニュー数に調整したりと、デザイン上の配慮がいろいろ必要になったりします。
jQuery Ex Flex Fixed を使用するとこういった事を極力気にせず、position:fixed を適用することができます。(IE6 には対応してません・・面倒だったので・・)
June 22, 2011
jQuery ColorBox を フォーム入力用にカスタマイズした Ex Colorbox Form
更新履歴
LightBox 系プラグイン の中でも人気の高い jQuery ColorBox をフォームの入力画面用にカスタマイズしてみました。仕事柄、画像の表示を主目的とする LightBox 系のプラグインを使用することはあまりないのですが、iframe に対応してるものも多く、登録系の画面が主となる業務アプリでも使えそうだなぁと思い ColorBox をベースにちょっと作ってみました。(ちなみにオリジナル の colorbox のソースはいじってません)
POST で画面を遷移してくような画面でのブクマを抑止でき、登録完了後の親画面へのコールバック処理等もできるので、手軽な割には結構便利かとな思ってます。
April 21, 2011
jQuery exInPlace Editor にリスト編集モード等の機能追加をしました
更新履歴
- 2011-07-05
- Ver 0.1.5.1
リスト編集モードで値未入力時のラベル表示不具合等を修正しました - 2011-04-29
- Ver 0.1.4.1
編集値の変換処理の不具合を修正しました
久しぶりのエントリです。
仕事でちょっと必要になったので、以前紹介した In-Place-Editor の jQuery プラグイン(In-Place-Editor (その場で編集する UI) の jQuery プラグインを書いてみた - Cyokodog::Diary)に機能追加をしました。
January 25, 2011
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 要素においても、サイズ変更を検出し、割り当てた処理を実行させることができるようになります。

