[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory
デモページ：Custom Easings イージングのエフェクトをカスタマイズしたデモ。 Ioryの使い方 Step 1: HTML HTMLはシンプルで、各パネルをリスト要素で実装し、divで内包します。 <div class="slider js_simple simple"> <div class="frame js_frame"> <ul class="slides js_slides"> <li class="js_slide">1</li> <li class="js_slide">2</li> <li class="js_slide">3</li> <li class="js_slide">4</li> <li class="js_slide">5</li> <li class="js_slide">6</li> </ul> </div> </div> Step 2: CSS
![[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory](https://cdn-ak-scissors.b.st-hatena.com/image/square/f1cb6498582cf16c5feffd074f068f12f4d958a9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015040901.png)
[JS]ページのツアーガイドをjQuery無しで実装するスクリプト -Shepherd
Shepherdの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="shepherd-theme-arrows.css" /> </head> <body> ... <script src="shepherd.min.js"></script> </body> Step 2: HTML HTMLは普通に実装してOKです。 ガイドを表示する要素には、それが指定できるようclassを付与しておきます。 Step 3: JavaScript ガイドを表示するタイミングや内容はスクリプトで記述します。 基本書式は下記のようになり、classesに表示する場所、scrollToで自動スクロールの有無を指定します。 tour = new Shepherd.Tour defa
[JS]一味違ったアイデアでレスポンシブ対応のテーブルを実装するスクリプト -Responsive tables
サイズが変更されても、ハイライト表示はできます。 Responsive tablesの使い方 Step 1: スタイルシート スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/rwd-table.min.css"> </head> Step 2: スクリプト スクリプトを</body>の上あたりに記述します。 <body> ... <script type="text/javascript" src="js/rwd-table.js"></script> <script> $(function() { $('.table-complex').responsiveTable({ adddisplayallbtn: true, addfocusbtn: true, fixednavbar: '#n
[JS]レスポンシブ対応でパンくずの一行が長くて困ったを解決するスクリプト -rCrumbs
多階層をもったサイトでは、パンくずも長くなりがちです。 テキストベースで実装した長い一行のパンくずを表示幅に合わせて最適化するjQueryのプラグインを紹介します。 jQuery rCrumbs -GitHub rCrumbsのデモ rCrumbsの使い方 rCrumbsのデモ 一行で長いパンくずは表示幅を変更すると、最適化されて表示されます。 主要なモダンブラウザをはじめ、IE8+でご覧ください。 デモページ：幅1200, 780, 480pxで表示 幅1200pxで表示 先頭のHomeから、長いページタイトルまで全部が表示 幅780pxで表示 先頭のHome側からはみ出るアイテムを省略 幅480pxで表示 長いページタイトルもはみ出る場合は省略 ※省力無しの固定表示することもできます。 rCrumbsの使い方 実装は簡単で、パンくずはリスト要素で実装されています。 Step 1: 外部
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
