フォーカスイベントとタブ切り替え - higeorange's blog
input や textarea にフォーカスがあったってる状態でタブを切り替えたときに focus, blur イベントがどのように起こるか各ブラウザを調べてみた。 テスト内容 テストページ ページには input[type=text], textarea, button が並んでる。 各要素はフォーカスすると 要素名を書き出し、フォーカスが外れると 要素名: blur と書き出すようになっている。 やったことはテストページと別のページを開いておき、input or textarea or button のいづれかの要素にフォーカスした状態でもう一方のページに切り替え、テストページに戻るというテスト。ページの切り替えはタブバーを使った。 テストしたブラウザは IE 7, Firefox 3.0.6, Opera 9.64, Safari 3.2.2 の 4 つ。いづれも Windows
CSSとJavaScriptで実装するタブ型インターフェイス37選 -noupe | コリス
noupeのエントリー「37+ Great Ajax, CSS Tab-Based Interfaces」から、CSSとJavaScriptで実装するタブ型インターフェイス37選の紹介です。 37+ Great Ajax, CSS Tab-Based Interfaces 自動で切り替わるタブ型インターフェイス Easy Tabs 1.2 - now with autochange Rotating jQuery tabs example Tab Content Script (v 2.1) スライド式のタブ型インターフェイス Sliding Tabs Coda-Slider Perspective Tabs AJAXを使用したタブ型インターフェイス Ajax Tabs Content Script (v 2.1) 閉じることも可能なタブ型インターフェイス Tab Panels Close
JSタブ切替え応用編 —他ページから直接タブにアクセスする— - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 他ページからそれぞれのタブにリンクすることってできますか？ —タブ切替をサクッと実装, くりはらさんのコメント 確かに便利そうなので、やってみました。ページ内リンクと同じように「なんたら.html#Contents」とかってURLでアクセスできます。意外と簡単～。サンプルは以下の画像から。 考え方 tab.dive = function(){ var hash = window.location.hash; hash = hash.split("?"); hash = hash[0].split("#"); if(hash[1] == 'page2') tab.sho
MooTabs - Tiny tab class for MooTools
MooTabs is a tiny JavaScript class that will help you put together tab navigation on your website. It required MooTools to run.What Is MooTabs? MooTabs is a tiny(3kb) class for MooTools. As the name suggests, it's main purpose is to help out with the creation of simple tab navigation. As of version 1.2, you can also set tab content via an Ajax request. See the documentation below for more info!
Adrian Miu » Blog Archive » Mochikit Tabs
Designing a website that has a lot of content raises many challenges due to the limited amount of space available on the first screen. Javascript can help you show or hide certain blocks in a webpage, making it easy to place more content in the same space. One common technique is the use of tabs. Mochikit was the first Javascript library I used and tried to implement in my projects and this is my
画像を使ったタブ式インタフェースが簡単に作れる「Tab menu with images」
Tab menu with images 画像を使ったタブ式インタフェースが簡単に作れる「Tab menu with images」。 次のようなタブ式インタフェースを簡単に作れるようです。 作成する際のHTMLは説明にも書いてある通り、クリーンなものになります。 メニュー部分のＨＴＭＬは次のような感じでクリーン。 タブをマウスオーバーすると下位層のメニューが現れますが、そのメニューも次のHTMLコードに含まれています。 <!-- メインメニュー--> <div id="mainMenu"> <a>Products<img src="images/tabmenu_right.gif"></a> <a>Support<img src="images/tabmenu_right.gif"></a> </div> <!-- サブメニュー--> <div id="submenu"> <!-- Th
prototype.js でタブ切り替え - AUSGANG SOFT
たつをさんのCSS と JavaScript でタブ切り替えをprototype.jsを使って書き直しました。 極力、再利用が簡単になるようにしてみました。 ライセンスは本家の「無償・無保証・著作権放棄」に準じます。 ご自由にお使いください。 サンプルはこちらからダウンロードできます。 基本コードは以下のようになっています。 <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="tabMaker.js"></script> <link href="tabMaker.css" rel="stylesheet" type="text/css" /> <div id="tabContent"> <ul id="tabIndex"> <li class="tab
DOMTab - Navigation tabs with CSS and DOMscripting
What is DOMtab? DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any "back to top" links in the section and automatically hides all but the first one when the page is loaded. You can use as many tabbed menus on the page as you want to. New: If the URL of the page links directly to one of the tabs it get automatically highlight
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
