imageless buttons


Description: 画像を使わず、テキストでスタイリッシュなメニューやボタンを実装します。セレクトコンテンツやドロップダウンにも対応。クロスブラウザにも対応しています。
Sample: demo
Tutorial: jQuery imageless buttons a la Google
License: -

Note

$(document).ready( function () {
			 // this is unfortunately needed due to a race condition in safari
			 // limit the selector to only what you know will be buttons :)
			$("span").css({
				 'padding' : '3px 20px',
				 'font-size' : '12px',
			});

			$("span.makeMeAbutton").styledButton({

				'orientation' : 'alone', // one of {alone, left, center, right} default is alone

				// action can be specified as a single function to be fired on any click event
				'action' : {
							'on' :function () {
								alert( "You've turned on the button" );
							},
							'off' : function () {
								alert( "You've turned it off" );
							}
						},

				'display' : 'block', // main element's display css, default is inline-block

				'toggle' : true, // is the button togglable, default is false

				'role' : 'checkbox', // one of {button, checkbox, select}, default is button. Checkbox/select change some other defaults

				'checked' : true, // display as a checked checkbox or not, default is false

				// checkbox values, default are on and off
				'checkboxValue' : {
									'on' : "custom on!",
									'off' : "custom off!"
								},

				'defaultValue' : "foobar", // default value for select, doubles as default for checkboxValue.on if checkbox, default is empty

				'name' : 'checkfield', // name to use for hidden input field for checkbox and select so form can submit values

				// enable a dropdown menu, default is none
				'dropdown' : {
						'element' : 'ul' // what nested element to use as dropdown, default is ul
						}

				'clear' : false // in firefox 2 the buttons have to be floated to work properly, set this to true to have them display in a new line

				'border' : 2 // use this if you're using a nonstandard border thicknes
			});
		} );
		

軽量で済みそうです

Related snippet :

  • Description: Twitterのように文字数をカウントするプラグイン。クロスブラウザ対応です。日本語のような2バイト文字も1文字として扱ってくれます。意外と使いどこ ...
  • Description: Lightboxです。サイズ等もcssをいじること無く変更可能で、オーバーレイも素敵な印象ですね。画像だけでなく、フレームやAjaxなどにも対応して ...
  • Description: アニメーションしながら縦に開閉するアコーディオン式のパネルです。弾むようなエフェクトが可愛いですね。他のパネルを開くと元々開いていたパネルは閉じられ ...
  • 詳細: シンプルなフォームバリデーションです。エフェクトも無く、汎用性のあるベーシックなタイプ。 デモ: demo チュートリアル: Inline V ...
  • Description: iPod風のドリルダウンメニューを実装します。メニューのドロップダウンから、ページ推移なしでサイドにフライアウト。省スペースで大量のリンクメニューを ...
  • Description: フォームがアクティブの時にラベルを外にスライドさせます。通常はアクティブ時に消えますが、外にだすことで、入力補助になりそうです。クロスブラウザにも対 ...
  • Description: かっこいいエフェクトでメニューを呼び出すプラグイン。ゲームみたいですね・・・クロスブラウザでは動作しませんが、なかなか印象的な見せ方ではないかなと思 ...