Web屋の私がブックマークしているサイト65 | Webクリエイターボックス の、CSSんところにちゃっかり、CSS HappyLife ZERO が載ってて嬉しい＞＜

さて、今回はフォームです。
お問合わせフォームとか資料請求フォームとか、ウェブサイトには結構な確率で何らかのフォームが有るかと思います。

このフォームの使い勝手の良し悪しが、とても重要なのは言うまでも有りません。
でもまぁ、ビミョーなフォームが多いですよね。

本気でやり出すと、サーバーサイドに手を加えたりして云々だと大変なので、コストがかかるとかで出来ない場合も有るかも知れません。
しかし、フロントエンドで出来ることも有るので、フォームを実装する際に何事もなかったかのように極々自然と使い勝手が良くなる︵だろう︶機能を盛り込んだらステキですよね。きっと。

しれっとコーダーが、フォームに今回紹介する機能を実装しておけば﹁おー！イイね！﹂と言ってもらって評価が上がっちゃうかも知れません！

小粋空間の中の人に会った時にMT5でこんな事したいんすよねーって話をしてて、その後MTQに書いたら、速攻でプラグインにしてくれました！
マジ感謝です。ありがとうございます。

ウェブページとかで、ページを生成したくない場合に使えるプラグインです。


●PagePublishControllerプラグイン: 小粋空間


さて、今回は折りたたみするJSを結構前から所々で使ってて、毎回ソレを微妙に改変したりしながら使ってたのですがもうちょっと汎用性を高めた感じにしたくて、javascript が全く分からないのに色々やってソレっぽくしました。

これは、RedLine MagazineさんのjQueryでリストを開閉させたいがベースです。2007年11月08日 00:19 にちゃっかりしっかりコメント残してますね。

どんな感じの時に使えるかと言いますと、ウチのブログならサイドバーに有るアーカイブ部分です。
2010年以外は全部閉じてて、年部分をクリックすると開閉する感じのです。
他にMT underHatのトップに有る﹁もう少し詳しく読む﹂とかがソレです。
また、気持ち設定すればよくある質問みたいなのにも使える感じにしています。

jQuery使えば、とっても簡単に出来るのでそんな大したモンじゃありませんが、コレをベースにエロい人がすごくいい感じにしてくれるんではないかと期待を込めて公開する感じで！

ひょんな事から、yuga.jsを作られたKyosukeさんから未公開最新版のyuga.js 0.4.2 をもらっちゃいました！

嬉しさのあまり、本人に公開と配布の許可を確認したら快諾していただいたので、せこせことデモページも作ったっす。
元々CSS Nite LP2で紹介したJSなんで、デモっぽいデモも無いかな？と思い用意したというのもあるのですが。

あ、yuga.jsってのはjQueryのプラグインです。jQuery使って優雅なWeb制作しちゃおーっていう感じだとボクは思ってます。

まぁ何はともあれデモをば。


●デモページ

●デモページごとダウンロード︵zip:241kb︶

●yuga 0.4.2 ダウンロード︵5kb︶


デモページは、IE6無視してます。IE6でどんなに素敵なことになってても仕様です。
ですので、Fx、IE7、Opera、Safari3︵Winでしか見てないけど︶辺りで見ていただければ良いかと思うです。

であ、設置方法などの説明をば。

いろんなサイトで見かける﹁よくある質問﹂。
一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。

特別ソレがいけてないとかは思わないんですが、飛んだ後に﹁戻るボタン﹂で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです。

それならそういった手間が掛かるかも知れないことを少しでも省けないかしら？って事で、jQueryを使ってタブ型で折りたたまれたよくある質問っぽいサンプルを作ってみました。
︵単純にボクがこのスタイルが一番見やすくて好きってだけだったり︶


●サンプルページ

●サンプルダウンロード(Zip:20KB)

●メインのCSSファイル


︵サンプルページの内容は適当ですので、あくまでも動きを見ていただければと思うです。︶

使わせていただいた、JSは以下の3つです。


●jQuery

●jQuery_Auto

●RedLine Magazine : jQueryでリストを開閉させたい


一応サンプルのよくある質問部分に関しては、がっつり改行してたりそれなりに分かりやすくしてるつもりなんでソコソコ使いやすいかと思いますが、カスタマイズする際の参考にでもしていただければって事で、ご説明をするです。

JavaScriptいぢってるのは楽しいけど、書くことはまったく出来ないので、似たような機能を持つのが多い中でも選ぶ理由の一つが、class名が気に入るかとかhtmlがごちゃごちゃしないかとかそんな基準だったり。

んで、jQueryのプラグインの中でもjquery_autoさんがぼちぼち気に入ったけど、class名が！とか思ったので、いぢって自分用にしてみました。
そんな事してたら、他の便利なJavaScriptも足してみたくなったので、足したりしてたらこんなんなりましたっていうのを公開。

今回その実験に使わせていただいたJavaScriptたちは以下。


●jquery.js

●interface.js

●thickbox.js

●jQuery_Auto.js

●yuga.js

●heightLine.js


上記の色々なJSたちを自分用にしたサンプル？デモ？とダウンロードは以下。


●サンプルページ

●ダウンロード


見てお分かりのとおり、基本的には全部足しただけで別にどーこうってしてません。
主にclass名やらを自分の好みにして、重複しちゃってる機能を消したりという感じです。

こういうのはちょっとライセンス問題が気になるので、間違ってたらご指摘ください。

いちお、MIT LicenseとPublic Domainだったので、勘違いしてないか調べた限りでも、まぜまぜして公開するのはOKだったので公開してます。

Webは略語じゃないのに﹁WEB﹂って書く人が多いのが気になって仕方ない今日この頃。︵あ、音声ブラウザを配慮したらという場合です︶

さて、本題に。

CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。
ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。

通常外部リンクなどを別窓で開く際に、target="_blank"を使うと思うのですが、コレは非推奨となっているので、もうちょっと美しく別窓で開くにはどうしたらいいか？
と何度か考えた事がありますが、適当にぐぐると、JavaScriptを使うものが何点かあるけど、ソレもイマイチスマートじゃない。

例えば下記で紹介されているような。
http://allabout.co.jp/internet/hpcreate/closeup/CU20040118A/

コレはコレで今までの問題を解決するにはいいのかなーと思うのですが、ボクが個人的に求めているのはもうちょっとスマートなやり方。

今まで、この問題に関して深く調べた事が無かったのですが、雲のむこうの人からこういう方法もあるよ。
って教わったので、今回はそのやり方を紹介いたします。