こちらの記事も…お薦めです…
jQuery UI Extra-5 : HTML要素のマウスホバー時に光源がカーソルに追従するエフェクト
★・。。・゜゜・。。・☆・。。・゜゜・。。・★・。。・゜゜・。。・☆
概要
「Button」公式ページ
jQuery UI Documentation / API / 1.8 / Button
「Button」についての「Demos & Documentation」
jQuery UI Demos & Documentation / Button
…ですが…あまり役に立ちません…
っていうか…「Button / ボタン」って…殆んどリンク以外の用途で使わないでしょ
まぁ…私が使っている機能しか解説しないので…公式も読んでおきましょう…
「カスタムコード」と「CSS」
先ずはカスタムコードから書いていきますが…
「jQuery」と「jQuery UI」で HTML に彩りを添えよう…第1回「導入」
を参照して…カスタムコードを導入して下さい…
尚…読みやすさも勘案して…最小限の改行を入れています…
ボタン用カスタムコード
$("input,a",".buttons").button();
$(".north").button({icons:{primary:"ui-icon-triangle-1-n"}});$(".east").button({icons:{primary:"ui-icon-triangle-1-e"}});$(".south").button({icons:{primary:"ui-icon-triangle-1-s"}});$(".west").button({icons:{primary:"ui-icon-triangle-1-w"}});$(".exit").button({icons:{primary:"ui-icon-newwin"}});$(".close").button({icons:{primary:"ui-icon-circle-close"}});
$(".north2").button({icons:{secondary:"ui-icon-triangle-1-n"}});$(".east2").button({icons:{secondary:"ui-icon-triangle-1-e"}});$(".south2").button({icons:{secondary:"ui-icon-triangle-1-s"}});$(".west2").button({icons:{secondary:"ui-icon-triangle-1-w"}});$(".exit2").button({icons:{secondary:"ui-icon-newwin"}});$(".close2").button({icons:{secondary:"ui-icon-circle-close"}});
$(".north-only").button({icons:{primary:"ui-icon-triangle-1-n"},text:false});$(".east-only").button({icons:{primary:"ui-icon-triangle-1-e"},text:false});$(".south-only").button({icons:{primary:"ui-icon-triangle-1-s"},text:false});$(".west-only").button({icons:{primary:"ui-icon-triangle-1-w"},text:false});$(".exit-only").button({icons:{primary:"ui-icon-newwin"},text:false});$(".close-only").button({icons:{primary:"ui-icon-circle-close"},text:false});
$(".button-set").buttonset();
続いて…CSS です…ご自由に弄って下さい…
ボタン用 CSS
.buttons a,.button-set a{font-family:メイリオ,Meiryo,HG丸ゴシックM-PRO,'HG Maru Gothic M-PRO','MS Pゴシック',sans-serif;color:#fff;font-size:11px;font-style:italic}
ボタン用カスタムコード1列目
クラス名が「buttons」の「input」要素と「a」要素をボタン化する記述です…
クラス名は…ご自身の解りやすい名前で OK です…
「input」要素はヘッダーと左サイドバーに置いてある…
サイト内検索をボタン化しています…
このサイト内検索は同時に5列目の「button-set」クラスも指定しています…
検索フォームに見えないぞッ
…ってな理由で…
「input」要素をボタン化したくない方は…
1列目の「input,」部分を削除して下さい…
「a」要素は全てのリンクで使用しています…
1列目だけだと…このようなボタンになります…
Example / no-icon
上記ボタンのコード
<span class="buttons"><a href="#">Example / no-icon</a></span>
ボタン用カスタムコード2列目
ボタンテキストの「左」に表示するアイコンの設定です…一番目だけ解説…
クラス名が「north」の場合にボタン化して…
ボタンテキストの前(primary)に…
「ui-icon-triangle-1-n」という名前のアイコンを付ける…ってな意味です…
2列目まで導入すると…このようなボタンを作れます…
Example / ui-icon-triangle-1-e(primary)
上記ボタンのコード
<span class="buttons"><a class="east" href="#">Example / ui-icon-triangle-1-e(primary)</a></span>
ボタン用カスタムコード3列目
ボタンテキストの「右」に表示するアイコンの設定です…一番目だけ解説…
クラス名が「north2」の場合にボタン化して…
ボタンテキストの後(secondary)に…
「ui-icon-triangle-1-n」という名前のアイコンを付ける…ってな意味です…
3列目まで導入すると…このようなボタンを作れます…
Example / ui-icon-triangle-1-e(secondary)
上記ボタンのコード
<span class="buttons"><a class="east2" href="#">Example /ui-icon-triangle-1-e(secondary)</a></span>
ボタン用カスタムコード4列目
ボタンテキストを書いても表示せずに…
アイコンのみのボタンを生成するための設定です…
例えば…多数の動画埋め込み時に…
同一タイトルの複数の埋め込み動画をクリックで表示させる…
…などという場合…省スペースになり…且つ…
HTML でのコンテンツ管理も容易にできるメリットがあります…一番目だけ解説…
クラス名が「north-only」の場合にボタン化して…
「ui-icon-triangle-1-n」という名前のアイコンを付けて…
ボタンテキストは書きますが非表示(text:false)に…ってな意味です…
4列目まで導入すると…このようなボタンを作れます…
Example / ui-icon-triangle-1-e(text:false) テキストは記述してありますが表示されません…
上記ボタンのコード
<span class="buttons"><a class="east-only" href="#">Example / ui-icon-triangle-1-e(text:false)</a></span>
ボタン用カスタムコード5列目
複数のボタンを合体させて1個のボタンにするための設定です…
クラス名が「button-set」の要素内のボタンを…
纏めて1個のボタンにする(buttonset)…ってな意味です…
「サイト内検索フォーム」「パンくずリスト」
記事末の「ラベルナビゲーション」…で…使っています…
Label Name Label Name Current-Label : Label Name
「ラベルナビゲーション」のコード
<span class="button-set"><a href="#">Label Name</a> <a href="#">Label Name</a> <a class="ui-state-focus" href="#"><span style="color:#F15B55;">Current-Label</span> : Label Name</a></span>
更には…「ul」や「ol」を使わなくても…
こんな感じの「ページング」もお手軽に作れちゃいます…
「ページング」のコード
<div align="center">
<span class="button-set"><a class="close-only" style="cursor:text;">Prev</a> <a class="ui-state-focus" style="cursor:text;">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a class="east2" href="#">Next</a></span></div>
<div align="center">
<span class="button-set"><a class="west" href="#">Prev</a> <a href="#">1</a> <a class="ui-state-focus" style="cursor:text;">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a class="east2" href="#">Next</a></span></div>
ヘッダーに置けば…
1階層のナビゲーションとしても使えます…
「1階層のナビゲーション」のコード
<div align="center" class="button-set">
<a class="south" href="#">Home</a> <a class="south" href="#">Blog</a> <a class="south" href="#">Labs</a> <a class="south" href="#">Blogger</a> <a class="south" href="#">Design</a> <a class="south" href="#">Video</a> <a class="south" href="#">Music</a></div>
jQuery の「buttonset」は左から順にボタンを重ねて…
1個のボタンを生成する仕様になっていますので…
マウスホバー時に…右端のボタン以外は右枠線か見えなくなります…
テーマ毎のホバー設定にもよりますが少しだけ気に入らないので…
私は…ボタン間に半角スペースを入れて…
僅かに隙間を空けています…お好みで半角スペースを削除して下さい…
アイコン
尚…アイコンは…ご自身のサイトで使用する分だけ登録して下さい…
更には…自作アイコンもボタンに表示できます…
Example / Custom Icon
上記ボタンのコード
<span class="buttons"><a href="#"><span class="CSS Sprites のクラス名" title="New"></span> Example / Custom Icon</a></span>
自作アイコンは CSS Sprites で表示しています…
Tonttu/テンプレート編集に必須な「CSS Sprites」作成ツールの使い方と「HTML」マークアップ
Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】
おわりに…
以上ですが…かなり…お便利でしょ
しかしながら…公式はもとより…
検索上位で表示されるサイトの殆んどは…
実装もせず…「zip」に同梱されているサンプルでお茶を濁しています…
どのサイトもアクセス数稼ぎの金太郎飴みたいです…
逆に…深く検索していってヒットするリアルエンジニアの方の解説は…
チンプンカンプン…なんて事が…私自身かなりありました…
なので…せっかく底辺サイトまで辿り着いて読んでくださっている…
奇特な方々のためにも…できるだけ…今後も…
50過ぎのオヤヂ目線で書いていくつもりです…( ̄ー ̄)邪笑
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿