jQuery

最近良く見かけるモーダルウィンドウですが、
モーダルのサイズが大きいと画面外にはみ出してしまい、全てを表示することが出来ません。
スクロールしたとしても、モーダルの背景であるメインコンテンツがスクロールされてしまいます。

そこで、モーダルが表示されている間のスクロール対象を、背景のメインコンテンツではなく、
モーダル自身に与えてあげることで、画面外に広がったモーダルコンテンツを全て表示することが可能です。

今回は、そんなスクロール可能なモーダルを手軽に構築する方法を解説します。

また、そんなモーダルをスクロール可能にする一連の処理を
jQueryのプラグインとして作成しましたので、宜しければお使い下さい。

1. 一般的なモーダルの実装
2. 一般的なモーダルの問題点
3. 大きいモーダルを扱うサイト
4. スクロール可能なモーダルの考え方
5. jQueryモーダルプラグインの使い方
6. jQueryモーダルプラグインのソース

『サイズの大きなモーダルをスクロール可能にする方法』を続きを読む »

HTMLのラジオボタンは、複数の選択肢の中から
特定のものを選ばせる時などに使用します。
利用シーンでは、男性・女性を選択するものであったり、
利用規約の同意・非同意、旅館の予約コースの選択であったりと様々です。

HTMLのラジオボタンの作成はとても簡単で、下記の様に作成する事が出来ます。

上記では、『radio-group』というラジオボタンのグループ内で
特定の選択をさせるというものです。
選択出来るのは必ず一つで、選択状態を変更すると他の選択状態は破棄されます。
formで送信する際は、選択されたラジオボタンの「value」の値のみ送信されます。

ラジオボタンはとても便利で、よく使うHTML要素かと思いますが、
そのまま使用するとブラウザ毎に表示が異なり、
デザインにこだわったサイトでは、他のデザインと協調せず、ういてしまいます。

そこで、今回はラジオボタンを手軽に画像にする方法を解説します。
ラジオボタンに使用する画像と、制御する為のjQueryさえ用意できれば、
簡単に素敵なラジオボタンを作成する事が出来ます。

1. ラジオボタンとして使用する画像を用意しよう。
2. HTMLにラジオボタン画像を配置しよう
3. 選択された値を保持する為の要素を作成しよう
4. ラジオボタンの動きをエミュレートしよう

『とっても応用の効くラジオボタンを手軽に画像で表現する方法』を続きを読む »

今までは、Ajax（非同期）でのファイルアップロードは
iframeを使うなど、少しトリッキーな方法を用いる必要があり、
とても面倒でしたが、『XMLHttpRequest Level2』からは『FormData』というものへ
オブジェクト化すればファイルもサーバーへアップロード出来る様になりました。

しかし『Firefox 3.6』辺りでは上手く動作しない等の報告もあり、
使用に躊躇していましたが、最近の『Firefox』の強制アップデートにより、
古い『Firefox』は駆逐されたかと思いますので、
今回の記事にて、フォームを利用したAjax（非同期）でのファイルアップロード方法について
サンプルコード付きで解説します。

更に、サンプルコードは私が普段使用しているものを分かりやすく纏めたものです。
機能としては、単純なAjax（非同期）処理と、送信先や送信方式等は
送信対象のフォームを解析し、自動的にセット。

送信に対する結果通知は、コールバックを指定するという方式を取り、
汎用的に使いまわせる様にユーザ定義関数として再編しています。

主に、フォームの『submit』の代わりにお使い頂けます。

それでは早速解説に入りましょう。

1. コピペでOK！ファイルアップロード対応付Ajax通信
2. Ajax通信に必要な要素の初期化
3. ファイルアップロード対応のAjax通信用データをフォームから自動取得して成型
4. Ajax通信を実行し、返却値を受け取ろう！結果と共にコールバック起動
5. フォームデータをAjax通信にて送信する方法

『【Ajax｜非同期】ファイルアップロード対応！フォーム自動解析送信』を続きを読む »

要素自体の点滅を指定回数分繰り返しアニメーションを行う方法や、
フォーム等の要素において、枠の部分の影を滑らかに表示・非表示させるアニメーションの
実装方法をサンプルコードを交えて解説します。

JavaScript部分の実装では、ネイティブなJavaScriptに加え、jQueryを使用した
記述もあります。

サンプルはユーザ定義関数として実装されていますので、
そのままコピペで使うか、ご自身のライブラリに組み込む等してお使い下さい。

1. 要素自体を指定回数点滅させよう
2. テキストフォーム等の枠（輪郭部分）を点滅させよう

『フォームの枠や要素自体を滑らかに点滅！指定数繰り返し行う方法』を続きを読む »

インジケータを回して何かを作業中に画面操作を防止する時や、
ポップアップを表示させる時などに使用するグレーアウト方法と、
グレーアウト上に表示するポップアップやインジケーター。
その他、作業領域等を表示させる方法をサンプルコードと共に解説します。

主に、JavaScript部分ではjQueryを使用し、HTMLとCSSを操作して実現させます。
それでは早速、次章より具体的な実装方法について解説します。

1. グレーアウト用の半透明パネルを予め用意しておこう
2. グレーアウトを表示させよう
3. グレーアウトを終了させよう

『【jQuery】グレーアウトさせてポップアップを出す方法！』を続きを読む »

表題の通り、タブ風のボタンを作成し、ボタンをクリックでコンテンツの内容を
表示・非表示と切り替える方法をサンプルコード付きで解説します。

今回のタブ風のボタンでは、選択状態となっているタブに色をつけ、
他のタブを未選択状態の状態とし、選択されたタブと対になっている
コンテンツを表示させます。

タブの種類は何個でも可能ですので、用途によってカスタマイズしてください。
基本的なレイアウトはCSSとHTMLにて行い、コンテンツやタブの選択状態を切り替えるのに
簡単なjQueryを使用しています。

勿論、jQueryの部分はネイティブのJavaScriptを使用しても問題ありません。
ちょっとしたフェード効果をつけるのに、jQueryでは楽でしたので、
今回のデモにて使用させて頂きましたが、
基本的な処理ロジック、考え方は簡単ですので、使い慣れたクライアントプログラミングにて
実装して下さい。

1. タブ風のボタンを作成しよう
2. 未選択状態のタブのスタイルを定義しよう。
3. 選択状態のタブを作成しよう。
4. タブ選択で表示されるコンテンツを用意しよう。
5. タブ選択イベントとコンテンツ切り替え処理を実装しよう。

『【jQuery】タブ風のボタンでコンテンツの内容を切り替える方法』を続きを読む »

基本的に、ファイルのアップロード等で使用するフォーム要素として
『input』要素の『type="file"』がありますが、
ファイル選択ボタンや、ファイル名表示エリアの位置やデザインは
基本的にブラウザ依存で、中々デザインを当て込むのは困難です。
デフォルトで適用されるデザインは、
IEやFirefoxはファイル選択ボタンがファイル名表示エリアに対して右側ですし、
ChromeやSafariはファイル選択ボタンがファイル名表示エリアに対して左側です。
ファイル未選択字のデフォルトメッセージ（『ファイルが選択されていません』等）も
言葉が異なっていたり、そもそも表示が無い等まちまちです。
これだけブラウザによって異なれば、
そのままデフォルトで使用すると
他のデザインとのバランスが悪くなったりして、
どうしてもデザインを入れたいパターンが出てくる場合があります。

また、ブラウザ依存のデザインなので、ブラウザによってデザインが異なるため、
UI的に迷いが生じる等を危惧して、全端末同じ様な見た目にする為に
デザインを適用する場合もあります。

今回は、そんなブラウザ依存のデザインが入ってしまっている
『input』要素の『type="file"』をカスタマイズして、好きなデザインに変えてしまう方法を
サンプルコード付きで解説します。

イベント起動などでは、分かりやすいのでjQueryを使用していますが、
勿論ネイティブのJavaScriptでも同じ事が出来ますので、
適当に置き換えて読み進めて下さい。
実際、jQueryを使用しているイベント駆動の部分でも、
そこまで複雑な事はしていないので、セレクタをドキュメントから書く必要がある程度の違いです。

要望があれば、ネイティブのJavaScriptへ書き直したものを追記しますので、
コメント頂ければ幸いです。

1. まずは普通に『input』要素の『type="file"』を設置しよう。
2. ファイル選択を起動させよう。
3. ファイル選択状況表示エリアを実装しよう。
4. 忘れがちなテキストボックス選択イベント
5. Internet Explorer 対策

『【jQuery】ファイル選択フォームデザインのカスタマイズ方法』を続きを読む »

ブログの管理画面の様な、記事編集フォームを自分のサイトに取り込む方法です。
こういったフォームは、リッチテキストエディタやwysiwygエディタ、HTMLエディタなどと言われ、
wordpressの記事編集の様な操作を可能とします。
オフィスシリーズでいうと、ワードの様な操作感でしょうか。
簡単にコンテンツの編集、作成が可能なので、とてもユーザにとって便利かと思います。


今回は、そんなHTMLエディタの導入方法です。
画像添付関係は有料だというツールが多く出回っていますが、完全無料で最後まで解説いたします。

1. 無料で高機能なHTMLエディタを入手しよう
2. HTMLエディタを環境に合わせて調整する
3. elRTEを日本語化しよう！
4. HTMLエディタの値の取得、HTMLエディタへ値をセット
5. elFinderを組み合わせて画像のアップロードを可能にする
6. elRTEにelFinderを組み込もう
7. 実際にオンラインファイルマネージャーを操作してみよう
8. ファイルの保存先をカスタマイズしよう

『wysiwyg:画像添付可能なhtmlエディタを無料で導入』を続きを読む »

JavaScriptの人気ライブラリ『jQuery』は豊富な機能とクロスブラウザな点がとても良く、私も頻繁に活用しています。
むしろJavaScript開発には欠かせないものとなっています。

そんなjQueryですが、プラグイン開発も盛んで、世界中のエンジニアが様々なプラグインを作成・公開しています。

それも、jQueryはプラグイン開発がとても簡単に出来る事に起因しているのではないでしょうか？

簡単だからこそ、独自にプラグインを追加する方達の理由としては、
新たな便利な機能を追加する方もいれば、ある程度纏まった処理を汎用的にする為にプラグイン化する方もいるでしょう。

プラグイン開発の理由は人それぞれですが、プラグインの作成方法を知らない事にははじまりません。

今回は、そんな『jQuery』の独自プラグインの作成方法を、分かりやすく4ステップに分けて解説したいと思います。

1. 即時実行の無名関数でプラグイン領域を隔離する
2. jQueryにプラグインメソッドを追加する
3. 引数の値とデフォルト値
4. メソッドチェインに対応しよう

『jQueryプラグイン開発までの最短4ステップを分かりやすく解説!!』を続きを読む »