jQuery 軽量簡易！セレクトフォームを装飾・デザインするプラグイン【.customSelect()】 | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【軽量簡易！セレクトフォームを装飾・デザインするプラグイン】です。先ほどチェックボックスやラジオボタンを装飾する方法を記事にしましたのでその続編です。セレクトフォームをかっこよくするプラグインは数々ごさいますが…設定が手間だったり…重かったり…機能が多かったり…となかなか悩みどころが多く、これ！といったプラグインが少なかったのですが…今回記事にする【.customSelect()】は脅威の簡易さです。デザイン性は他のプラグインに劣りますが、安定性や容量、使い勝手では群を抜くプラグインかと思います。 発展編 22. .customSelect() 画像の準備 まずはセレクトフォームに使用する画像を準備します。用意するのは閉背景画像のみです。 基本設定 画像を準備したらjQueryを読み込みます。 JS <script src="js/
基本的なフォーム -- ごく簡単なHTMLの説明
この例をもとに、HTMLのフォームを構成する要素を順番に説明していきます。この例のHTML全体は、本章の最後で改めて紹介します。 フォームの基本枠組み データを送信するためには「何を」「どこに」「どうやって」送るかを示さなければなりません。フォームはこのための手段を提供します。 HTMLのフォームは、データを入力するための手段（コントロールと呼びます）と、それに関するラベルや説明から構成されるひとまとまりのセクションです。「何を」送信するかを示すためにこのセクションの範囲を明示し、「どこに」「どうやって」送信するかを設定します。この枠組みを提供するのがform要素です。 form要素の構造 form要素タイプは2つの主要な属性を持ちます。ひとつは「どこに」、つまりデータを受け取るプログラムを指定するaction属性、もうひとつが「どうやって」、つまりデータの送信方法を指定するmethod属
入力フォームの全角・半角を勝手に変換してくれるJavaScript
入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの？と思ったのが、作ったそもそもの発端です。 ２．半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A
チェックボックスとラジオボタンをスタイリングする為のjQueryプラグイン・iCheck.js
checkboxesとradioボタンをスタイリングするjQueryのプラグインです。カスタマイズ性に優れており、使い方も手軽そうだったので備忘録的にご紹介します。 よくあるプラグインですけど、使いやすそうだったのでメモ。 checkboxesとradioボタンをスタイリングするライブラリ。IE7にも対応しています。 かわいい。 スタイルは最初からいろいろと用意されていますのでカスタマイズの参考にもなりますね。 コード<script src="jquery.js"></script> <script src="jquery.icheck.js"></script>コアとプラグインを読み込みます。 $('input').icheck();初期化します。 $('input').icheck({ handle: '', // 'checkbox'か'radio'とすればどちらかに限定できる ch
ツールチップ｜jQuery plugin｜Ajax｜PHP & JavaScript Room
［CSS］jquery.cluetip.css ［JS］jquery.js v1.2.6、jquery.dimensions.js、jquery.hoverIntent.js、jquery.cluetip.js HEAD <!-- JS --> <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.dimensions.js" type="text/javascript"></script> <script src="jquery.hoverIntent.js" type="text/javascript"></script> <!-- optional --> <script src="jquery.cluetip.js" type="t
美しいフォームデザインを実装する事が可能なjQueryプラグイン・Ideal Forms
チェックボックスやラジオボタンなど、フォーム周り のデザインを美しくする事が出来るjQueryプラグ イン・Ideal Formsのご紹介。スタイルもいくつか 用意されており、フレームワークとして使えるよう です。デザインテーマもいくつか用意されている ので好みで選ぶことも出来ますね。 ボタン、セレクト、ラジオボタンやチェックボックス等のフォームデザインを変更できます。デザイの変更はcssのみで可能なフレームワークタイプなのでノンプログラマーな方でも気軽に使えそうですね。IE6以外は対応しているようです。 フォームのデザインをガラッと変えることが出来ます。よりデザインに統一感を出せそうですね。 テーマも用意されている Ideal Formsはフレームワークとしても利用出来るように、cssでデザインが変更できる作りになっています。現在は3つのcssファイルがテーマとして用意されていますのでそ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
