こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
2014年8月20日 jQuery いつも使っているラジオボタンやチェックボックスにもっと彩りを！ここではCSSとjQueryを使ってiPhone風のデザインに変える方法を紹介します。使用する画像は一枚のみ。CSSスプライトで表示位置を変えます。サンプルも用意してみたので覗いてみてくださいね！ ↑私が10年以上利用している会計ソフト！ サンプルはこちら。IE7, IE8, FF, Chromeで正常動作 See the Pen Mobile like radio/check buttons by Mana (@manabox) on CodePen. ファイルを準備 必要なファイルを準備します jQuery こんな感じの画像を作る コーディング ファイルを読み込む ヘッダー内にjQueryを読み込ませます。 <script type='text/javascript' src='/samp
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいＵＩに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off を切り替えればいいわけですから、まさに何でもありで、参考にして他にも面白く、使いやすいデザインはいくらでも作れるかもしれません。 jQueryによるクロスブラウザ対応が出来るので、昔のように神経質になる必要もないですね。 詳細は以下のエントリから参照。 Pretty checkboxes with jQuery | Aaron Weyenberg
今まで様々なjQueryを使ったプラグインを紹介してきましたが、今日紹介する「jqtransform」は今まで紹介した物と少し違っていて、フォームのデザイン補助してくれると言うものです。 CSSなどでデザインせず、普通にフォームを制作した場合上記のように利用OSに準拠したプルダウンメニューやボタンなどが表示されます。このプラグインを使えば上機能なありきたりなフォームデザインを施す事が可能です。変更後のデザインは以下の通り 詳しくは以下 デザインだけでなくプルダウンもアニメーションがついていたりと細かな部分も配慮されています。実装方法は簡単、jQueryとプラグインを読み込んで、フォームにクラス指定をしてあげるだけになっています。デザインはCSSで制御しているみたいなので、個別のカスタマイズできるようになっていますので、使い勝手が良いかと思います。これならDemoで表示されているデザインが気
最近、jQueryにハマっているishidaです。 CSSコーディングで角丸処理をする場合、たいていは上下の角丸部分を画像として切り出して、そんでもって背景画像を適用してという風にします。 また最近では、角丸を作るjavascriptライブラリーなどがあります。 でもdiv要素が増えたり、なんだかソースがすきっりしないぜぇ～と思っていましたがイイものがありました。 私がハマっているjQueryで角丸をつくるjQuery curvyCorners。 jQuery curvyCornersサンプル まずjQueryサイトからjquery-1.2.1.pack.jsファイルを入手。次に jQuery curvyCornersサイトからjquery.curvycorners.packed.jsファイルを入手。 使いかた まず、上記で入手したjsファイルをインクルード。 <script src="j
サンプル ライティング テキストテキストテキストテキストテキストテキストテキスト。 XHTMLコーディング テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキスト。 カンプデザイン テキストテキストテキストテキストテキストテキストテキストテキストテキスト。 CSSコーディング テキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキスト。 ソース XHTML <ol class="list611"> <li> <dl> <dt>ライティング</dt> <dd>テキストテキスト......</dd> </dl> </li> <li> <dl> <dt>XHTMLコーディング</dt> <dd>テキストテキスト......</dd> </dl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
