jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法｜BLACKFLAG
レスポンシブWebデザインでのサイト構築において、 PCのような大きな解像度の画面向けの場合ではタブ切り替えで実装しているUIを スマートフォン向けの小さめの解像度の画面ではアコーディオン方式のUIに 切り替える動作を見かけることがあります。 それぞれの画面解像度によって最適なUIに切り替える手段になりますが そんなレスポンシブ対応のタブとアコーディオン切り替えUIを jQueryを使ってできるだけシンプルに作ってみたのでご紹介してみます。 「jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法」サンプルを別枠で表示 サンプルではウィンドウサイズが768px以上ならばタブ切り替え、 768px以下だったらアコーディオン動作に切り替わります。 タブ切り替えではボタンクリックでコンテンツ要素がフェードで切り替わり アコーディオンではボタンクリックで付随す
[JS]普通のタブから便利な機能を備えたタブまで簡単に実装できるスクリプト -Tabslet
Custom event: タブの切替時の前後にイベントを設定します。 Tabsletの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script type="text/javascript" src="javascripts/vendor/jquery.tabslet.min.js"></script> Step 2: HTML タブをul要素で、各コンテンツをdivで実装します。 タブのアンカー（#tab-1）とコンテンツのid（tab-1）は対応するように設定します。 ラッパーのclassに「tabs」を指定し、機能を選択
シンプルで汎用性に優れたレスポンシブ対応のタブコンテンツ -Basic Tabs
jQueryとCSS3アニメーションを使ってシンプルに実装する、レスポンシブ対応のタブコンテンツを紹介します。 BasicTabs - The Simple jQuery/CSS3 Solution Basic Tabsのデモ Basic Tabsの実装 Basic Tabsのデモ タブはレスポンシブ対応で、表示サイズに合わせて最適化されます。 タブの切替はCSS3アニメーションで、左からフェードインで表示されます。このエフェクトの変更は簡単です。 デモページ：幅480pxで表示 Basic Tabsの実装 実装は非常にシンプルなので、カスタマイズも簡単だと思います。 Step 1: HTML HTMLは非常にシンプルで、タブはリスト要素、コンテンツはdiv要素で配置します。 <div id="tabwrap"> <!-- TABS --> <ul id="tabs"> <li class
2012年に見つけた入れておくと便利なオススメChrome拡張機能ベスト5 | フリーソフトラボ.com
Google Chromeがバージョン4のリリース以降拡張機能に対応して3年ほど経ち、すでに必要な拡張機能は十分に出そろった感がありますが、そんな中で今年新しくリリースされたユニークで便利な拡張機能の中から、筆者が個人的に気に入ったものを5つほど紹介します。 ちなみに当ブログでは昨年の末にも、2011年に見つけた入れておくと便利なオススメChrome拡張機能ベスト10という記事を書いているので、ウェブのブラウジングや仕事を効率化して生産性をアップしたい人は、こちらもあわせて目を通してみてはいかがでしょうか。 Tab Memory Purge 一定時間開いていないタブの読み込みを自動的に停止してメモリを解放してくれる拡張機能。Google Chromeはメモリの消費が特に激しいブラウザなので、搭載メモリの容量が少なかったり、32bit版のWindowsを使っている場合は導入するとずいぶん快適
MacのFinderにタブ機能を付加する無料アプリ「XtraFinder」が便利。カット＆ペーストも！
MacではFinder、Windowsではエクスプローラがたくさん開くとうっとうしいですよね。 それを避けるため、Windowsを使っていたときはエクスプローラをタブ化するソフトを使っていました。 もちろん、MacでもFinderのタブ機能が欲しい。むしろデフォルトでAppleに実装してほしい。 以前はTotalFinderというアプリを使っていたのですが、なぜかうまく動かなくなったり（個人的な環境の問題かも）有料化したり。。。 これを機にTotalFinderもしくはその他のタブ機能付加アプリを購入するかどうしようか迷っていたところ、無料で使えて機能もバッチリな「XtraFinder」を見つけました！ Google Chromeと見た目も操作もそっくりなタブをFinderに組み込むことができ、カット＆ペーストやフォルダ優先表示といった機能まで備えています。 めっちゃオススメです！ Xtr
[JS]スライダーやタブやページネーションなど便利な機能を少ないコードで実装する超軽量（8kb）のスクリプト -vanity
スライダー、タブ、ページネーション、ツールチップなど、ウェブページでよく使用するコンテンツをシンプルにより少ないコードで実装できるよう開発されたjQueryのプラグインを紹介します。 vanity jquery toolset [ad#ad-2] vanityは7種類のツールがあり、それぞれ8kbと超軽量のスクリプトとなっています。 機能はシンプルで、より少ないコードで簡単に実装できるように設計されています。 以下、7つのツールとそのコードを紹介します。 ※外部ファイル・スタイルシートは省略 スライダーのデモページ div要素やリスト要素で実装するスライダーです、スライドのエフェクトやスピードも調整できます。 HTML <!-- the slider content holder --> <div class="slider"> <!-- the elements inside the s
ChromeExtension「Gestures for Chrome」のスムーススクロールがヤバイ
Windows限定。理由は一番下に。 ちょっと欲しかったブラウズの滑らかさがようやく手に入ったので・・・もしかしたらこの業界では有名なのかもしれないけど。 Mac使うようになって、WindowsのChromeでのタブ移動が非常に面倒に感じるようになってしまった。 私の設定ではMacだと、中指置きながら人差し指タップで「左のタブへ移動」 人差し指置きながら中指タップで「右のタブへ移動」という設定。 そこでその機能が欲しいために、今までほとんど使いもしなかったマウスジェスチャーのExtensionを探してたら、そのスムーススクロールに今更ながら感動いたしまして・・・。 Chrome ウェブストア - Gestures for Chrome(TM) 正直入れてみたんだけど、ぶっちゃけマウスジェスチャーは使いにくいんだよね・・・。 なにが使いにくいかというと、なにもないところで左クリックを開始しな
閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」:phpspot開発日誌
JQuery Magic Tabs Plugin | jQuery Plugins 閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」。 次のように、横に長くなってもスクロールできつつ、閉じるボタンもついて、インタフェースもなかなかクールなタブUIが実現できます。 ありそうであまり無かったかもしれないプラグインですね。もちろん「タブの追加」みたいなのもできます。 実装コードはこちらに掲載されています。デモもあります ページの構成によっては使うことでより利便性の高いインタフェースを提供できそうですね 次のようなコードで比較的容易に実装が可能です。 関連エントリ 折り畳み可能なシンプルツリーメニュー実装jQueryプラグイン「Simple Tree Menu」 シャレオツなカウントダウンタイマーが実装できるjQueryプラグイン「The Final Countdown」
HTML と CSS のみでタブを作るサンプル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 ul.tab { margin: 0; padding: 0; border-bottom: 2px #ddd solid; } ul.tab li { float: left; margin: 0 0 0 5px; position: relative; bottom: -2px; list-style-type: none; border: 1px #ddd solid; border-top: none; border-bottom: 2px #ddd solid; } ul.tab
[CSS]「:before」「:after」でタブのディテールを強化するスタイルシート
Flared Borders with CSS デモページ ※上：ディテールを強化したタブ、下：旧式のタブ [ad#ad-2] 対応ブラウザは「:before」「:after」はCSS2ですが、スタイルに角丸などのCSS3を使用しているため、CSS3対応ブラウザ（Firefox, Chrome, Safari, IE9）でご覧ください。 HTML リスト要素を使用して、実装します。 <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> CSS：タブのベース シンプルな角丸
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エクセル（Excel）で「チェックボックス付アンケート」を作る方法 | ライフハッカー・ジャパン
ボタンやタブ、スライドなどのコンポーネントを実装するjQueryベースのUIライブラリ・Ninja UI