Caps Lock や ime-mode を設定する jQuery exCapsLock - Cyokodog :: Diary
タイトルからも想像できますが、地味な jQuery プラグインです。毎度、似たような記述をするのが面倒だったのでプラグイン化してみました。 機能概要 INPUT もしくは TEXTAREA 要素のキー入力で、大文字のみに入力制限したり、キー入力を漢字モードにすることができます。 実装方法 実装は非常に単純で、対象要素に対し CSS の text-transform と ime-mode を当ててるだけです。ただ、text-transform については、見た目は大文字になりますが、内部的には実際入力した値を保持してしまうので、対象要素の blur イベント内で toUpperCase() して大文字変換しています。 ちなみに ime-mode は IE と Firefox3 以降でしか対応してないので、漢字入力モードはその他ブラウザでは適用されません。 使い方 jquery.js、jque
要素のリサイズイベントを検出する jQuery exResize - Cyokodog :: Diary
ブラウザのウィンドウサイズが変更された時に、何らかの処理を行いたい場合、jQuery では resize() メソッドで window オブジェクトに対し処理を割り当てます。 $( window ).resize(function(){ /* 行ないたい処理 */ }); 一方、div 要素などの普通の HTML 要素に対し、resize() メソッドで割り当てた処理は起動されることはありません。resize() メソッドではウィンドウのサイズ変更しか検出することができないようです。 今回作成した jQuery プラグイン exResize を使用すると、div 要素等の普通の HTML 要素においても、サイズ変更を検出し、割り当てた処理を実行させることができるようになります。 機能概要 以下の基本機能があります。 div 要素等の普通の HTML 要素に対するリサイズイベントの割り当て
In-Place-Editor (その場で編集する UI) の jQuery プラグインを書いてみた - Cyokodog :: Diary
更新履歴 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
iframe を iframe ぽく見せない jQuery プラグインを作ってみた - Cyokodog :: Diary
更新履歴 2011-09-29 Ver 0.1.4 に更新 jQuery 1.6.2 に対応しました 2010-06-10 Ver 0.1.3 に更新 getTargets, getTarget メソッドを追加しました 2010-06-04 Ver 0.1.2 に更新 IE6 で実行時にタイミングにより表示されてたエラー警告を、表示されないように修正しました。 2010-06-01 Ver 0.1.1 に更新 IE で正常に動作しない不具合を修正しました。 社内アプリも Ajax 的な UI なものが増えるにつれて、１画面にたくさんの機能を詰め込みたいという要望を受ける事が多くなりました。素直に作るとプログラムも肥大化し保守も大変になるので、機能単位に画面を分けて作成し、それぞれの画面を iframe で１つの画面に読み込むといった方法で対応したりしてます（iGoogle 的な感じ）。 そ
CSS1 によるウィンドウの表現と jQuery Alert Dialogs への適用 - Cyokodog :: Diary
時間もネタも無いのですが、最低でも一ヶ月一エントリはしときたいので、前回(CSS1 のみで質感のあるボタンを表現してみる)と同じような内容になりますが書いときます。 今回は CSS1 のみで質感のあるウィンドウを表現してみます。また応用として、ダイアログウィンドウを表示するプラグイン jQuery Alert Dialogs に、今回定義する CSS を当てて、見た目を変えてみます。 CSS 定義とマークアップ ブラック系のウィンドウを２種類定義してみました。html を以下のようにマークアップします。（サンプルでは dl を使ってますが div でも OK です） <dl class="ex-window-bk1"> <dt class="ex-window-head"><span>Window</span></dt> <dd class="ex-window-body"> <p>CSS
jQuery プラグインの定義パターンについて調べてみた - Cyokodog :: Diary
jQuery のプラグインの定義手法については、いろいろな記述の仕方が考えられるかと思います。今回、実際に公開されているソースを参照して、どのような定義パターンがあるのかを調べてみました。 jQuery 標準 API の定義構造のおさらい まず、jQuery が標準で提供している各種 API が、どうのような構造で定義されてるかおさらいしてみます。 $ や jQuery はグローバル変数、つまり window オブジェクトのプロパティ名であり、その実体は関数オブジェクトです。 window.$ = window.jQuery = function(){ ... } jQuery が提供する API には 関数 API と メソッド API があり、関数 API は jQuery 関数オブジェクト（以降 jQuery セレクタと記述します）が持つ、関数オブジェクトのことを指します。 jQue
jQuery で簡単なデートピッカー（日付選択UI）を作ってみる - Cyokodog :: Diary
去年の８月頃から作ってるシステムが来月リリース予定ってことで、後回しにしてた画面周りの微調整をしてるのですが、デートピッカー（カレンダーから日付を選択するUI）もその１つで後で jQuery のプラグインの中から適当にチョイスすればいいやと思っていました。 で、いざいろいろ調べだすと機能過多だったり動きがもっさりしてたりとで、なかなか欲しいのが見つかりません。 これならシンプルなやつを自前で作ったほうが早いかなってことでサクっと作ってみました。 サンプルページ デザイン構造 基本、デザインは CSS のみでカスタマイズできるようにしたいので、JavaScript では サイズ等の設定は行わずクラス名等の割り当てまでとします。 カレンダーといえばテーブルを使うのがセオリーっぽいですが、実用性を重視して「 float:leftな日付 BOX の流し込み 」方式にしてみました。 イメージ的には以
jQuery 関連記事まとめ - Cyokodog::Diary
はてブだと埋もれるのでこちらに書き足してきます。 jQuery 基本機能 本家 jQuery.com リファレンス jQuery 日本語リファレンス jQuery 開発者向けメモ jQuery リファレンス- openspc2 jQuery 1.2.6 リファレンス - StackTrace チートシート HTML/CSS, jQuery, WordPressなどウェブ制作者のためのチートシート集 - coliss スライド・関連情報 はじめての jQuery jQueryのプレゼンVIDEO - JAM LOG 第1回 Silverlight vs. jQuery＋ASP.NET AJAX - @IT チュートリアル jQuery 入門 - openspc2 jQuery を使って Ajax 開発を単純化する - IBM jQueryの魔法 - All About jQuery ではじめ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
