(Better) Tabs with Round Out Borders | CSS-Tricks
The following is a guest post by Menno van Slooten. You might notice we’ve been down this road before, but I quite like Menno’s approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually using less elements. A good-looking tab control usually has one feature that I’ve always found impossible to re
jQuery UI/Tabs - tech.ludicmind.net
概要 タブは通常アコーディオンのように、コンテンツを、スペースを節約できる切り換え型のセクションに入れるのに使用される。 デフォルトではタブのクリックでセクションを切り替えるが、オプションでhoverにもできる。タブのコンテンツはタブにhrefを設定する事でAjaxを通して読み込む事もできる。 イベント 一連のイベントがタブの操作で実行される。 tabsselect, tabsload, tabsshow（この順番で） tabsadd, tabsremove tabsenable, tabsdisable イベントバインドの例： $('#example').bind('tabsselect', function(event, ui) { // 関数内で有効なオブジェクト: ui.tab // 選択された（クリックされた）タブのアンカー要素 ui.panel // 選択/クリックされたタブ
jQueryで作るタブのメニュー画面がリンクから飛んできた時も選択した状態にしたい
今開発してるシステムでちょっとおもしろそうな題材があったので紹介しておきます。 ソース全部載せると分かりづらいので一部だけで概念的に説明しますが、これはまあ、普通にレフトメニューがあって、そしてメインの部分にはタブでメニューを選択できるようなレイアウトの画面だと思って下さい。 レフトメニューはこんな感じ <div class="left"> <p>メニュー</p> <ul> <li><a href="sample.html#menu1">menu1</a></li> <li><a href="sample.html#menu2">menu2</a></li> <li><a href="sample.html#menu3">menu3</a></li> <li><a href="sample.html#menu4">menu4</a></li> <li><a href="sample.htm
Pano :: Add-ons for Firefox
他グループのタブへ簡単にスイッチするためのアドオン。 == Pano サイドバー == サイドバーにグループ毎のツリーを表示できます。タブのアイテムをダブルクリックでスイッチグループをダブルクリックでグループ名の編集ができますタブやグループのアイテムをドラッグ＆ドロップで移動できますタブのタイトルとURLを検索できます == Pano ボタン == Pano サイドバーの開閉ができ、メニューから他のグループへスイッチできます。 == タブ一覧ボタン == タブバーの右側にあるタグリストの一覧メニューに他グループのタブを表示します。 == Pano パネル == ほとんどPanoサイドバーと同じですが、こちらはポップアップパネルです。一時的に使いたい場合に有効でしょう。 イメージギャラリー 開発者のコメント == バグと機能追加 == バグ報告や機能追加の要望は、https://github
角丸画像使用のサイズ可変タブ | ruless-works.com memo
角丸を画像で表現するタブのコーディングにちょっと苦労したので、メモ。 タブ内の文字サイズは可変にしなきゃいけない。 IE6対応でCSS3は使用不可。でも角丸にしたい！ タブの下部に影付けたい。 で、デザインしたのがこれ。 これを実現しようとすると、cssとhtmlがめんどうくさいことになりました。 切り出し用に調整したものと、スライスの設定。 フォントサイズ可変対応とはいえ、タブ内の文字数は少ない前提なので画像横幅と高さは気持ち控えめ。 [css] .tabmenu_info { background: url(../img/tabbtn_info_btm.gif) repeat-x 0 bottom; } .tabmenu_info ul { padding: 0; margin: 0; list-style: none; } .tabmenu_info li {
MacのFirefoxのフォームで、TAB移動ができなくて困ってた - こんにちはこんにちはmonmonです！
Mac始めました: フォームの入力について ウインドウズの場合、Tabを押していくと、各項目に順番にチェックボックスに項目が移動し、チェックボックスやsubmitボタンにもフォーカスが当てられます。 これがMacだと、テキストエリア以外にはTab移動でフォーカスが移らないんですよね。 テキストエリア最後でTabを押すと、なぜかURL入力欄にフォーカスが移動してしまう。 まさに同じ状態で困ってました。 と言うか、そういうものなのかと思い、調べもせずでしたね。 で、たまたま Blog not found を見る機会があり、 Safari の TAB キーも、フォームの要素を移動するためのものだそうです。が、次のように、"タブキーを押したときに WEB ページ上の各項目を強調表示" オプションを ON に変更すれば、その動きを変えることができます。 というのを見て、Safariで試し「おぉ！」と
- ノヴァちゃん日記 - JavaScriptによるフォーカスの制御でハマらない為のTips
仕事でJavaScriptを使ってフォーカスの制御をしたいという要望があったんです。 それもTabキーでの移動を制御したいと。 そいでまぁ作ってたわけなんですが、クロスブラウザ実装でかなりの地獄を見たので これはいかんと思いメモを残しておくことにしました。 ブラウザのデフォルトを殺す まずはこれをやっとかなきゃ話になりません。一番重要！ なぜならどんなに一生懸命tabindexとかを張ろうとも、 これがある限り結局完璧な制御は出来ないからです。 具体的な例を挙げると、 例えばTabキーを複数回押された場合なんかに、 特定の範囲内だけでフォーカスをループしたいなんて事があります。 そんなとき、tabindexなんかだと特定の範囲内でループなんてしてくれませんから、 当然JavaScriptを使用してフォーカスを戻すなんて処理が欲しくなるわけです。 しかしこの時、ブラウザによっては最後のTa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
