Assetsスクリプト&スタイル

Webサイト共通に使うスタイルとスクリプトをルートフォルダー/assets/に保存した。下位のフォルダーにあるHTMLファイルから/assets/にあるjs/cssファイルを引用すればローカル・ウェブともに機能する。ただしローカルファイルを開くときのブラウザはChrome/IE9を使う。Firefox/Safari/Operaはローカルでは参照できない。

iPadでのスクリプト動作可否

jQuery Tabs

Oneの内容
Twoの内容
かつてBBC Newsで使っていたスクリプトを入手して利用。tabs.jsに含まれていた古いJQueryを削除し、Bootstrapで使っているJQueryを共用できるようにした。 tabs.js はおよそ9KBと軽量である。インラインのスクリプトの#areaTabsを変えて複数のTabsを同じページ内に書くことができる。
<link href="css/tabs.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js"></script>
<script src="js/tabs.js"></script>
<!-- jQuery Tabs -->
<script type="text/javascript">
$(function() { $('#areaTabs').tabs({ fxSlide: false, fxFade: true, fxSpeed: 'normal' });});
</script>
<div id="areaTabs">
  <h4>jQuery Tabs</h4>
  <ul class="tabs-nav">
    <li class="tabs-selected"><a href="#one"><span>One</span></a></li>
    <li class=""><a href="#two"><span>Two</span></a></li>
    <li class=""><a href="#three"><span>Three</span></a></li>
  </ul>
  <div id="one" class="tabs-container"> Oneの内容 </div>
  <div id="two" class="tabs-container tabs-hide"> Twoの内容 </div>
  <div id="three" class="tabs-container tabs-hide"> Threeの内容 </div>
</div>
 

Bootstrap Togglable Tabs

home

profile

jquery.js, bootstrap.js, bootstrap.css 利用。およそ280KBで、JQuery Tabsより重いが、ドロップダウンなどのメニューを作成できる。 ソースコードの例はこちら

※Web site構築の学習には w3schools.com が分かりやすい。

※JQuery.jsは汎用的に使うので個別サイトに置くのではなく、 Google Hosted Libraries から呼び出すほうがよい。使うバージョンを指定できる。ただしテストのときでも常時ネット接続環境になる。
〔例〕 https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js

※IDセクションのトグルはJQueryだけで実現できる。

$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});

Simple Template

One

Two

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="js/bootstrap.min.js"></script>
<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#one" data-toggle="tab">One</a></li>
  <li><a href="#two" data-toggle="tab">Two</a></li>
  <li><a href="#three" data-toggle="tab">Three</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="one"><p>One</p></div>
  <div class="tab-pane fade" id="two"><p>Two</p></div>
  <div class="tab-pane fade" id="three"><p>Three</p></div>
</div>
   

Glyphicons

アイコンはBootstrapに含まれている無料版glyphicons(12pxのpngファイルのみ)を利用。 大きなサイズはGLYPHICONS.comから購入できる。 ライセンスはCC BY 3.0である。
※class属性は、"icon-アイコン名" である。
  • glass
  • music
  • search
  • envelope
  • heart
  • star
  • star-empty
  • user
  • film
  • th-large
  • th
  • th-list
  • ok
  • remove
  • zoom-in
  • zoom-out
  • off
  • signal
  • cog
  • trash
  • home
  • file
  • time
  • road
  • download-alt
  • download
  • upload
  • inbox
  • play-circle
  • repeat
  • refresh
  • list-alt
  • lock
  • flag
  • headphones
  • volume-off
  • volume-down
  • volume-up
  • qrcode
  • barcode
  • tag
  • tags
  • book
  • bookmark
  • print
  • camera
  • font
  • bold
  • italic
  • text-height
  • text-width
  • align-left
  • align-center
  • align-right
  • align-justify
  • list
  • indent-left
  • indent-right
  • facetime-video
  • picture
  • pencil
  • map-marker
  • adjust
  • tint
  • edit
  • share
  • check
  • move
  • step-backward
  • fast-backward
  • backward
  • play
  • pause
  • stop
  • forward
  • fast-forward
  • step-forward
  • eject
  • chevron-left
  • chevron-right
  • plus-sign
  • minus-sign
  • remove-sign
  • ok-sign
  • question-sign
  • info-sign
  • screenshot
  • remove-circle
  • ok-circle
  • ban-circle
  • arrow-left
  • arrow-right
  • arrow-up
  • arrow-down
  • share-alt
  • resize-full
  • resize-small
  • plus
  • minus
  • asterisk
  • exclamation-sign
  • gift
  • leaf
  • fire
  • eye-open
  • eye-close
  • warning-sign
  • plane
  • calendar
  • random
  • comment
  • magnet
  • chevron-up
  • chevron-down
  • retweet
  • shopping-cart
  • folder-close
  • folder-open
  • resize-vertical
  • resize-horizontal
  • hdd
  • bullhorn
  • bell
  • certificate
  • thumbs-up
  • thumbs-down
  • hand-right
  • hand-left
  • hand-up
  • hand-down
  • globe
  • wrench
  • tasks
  • filter
  • briefcase
  • fullscreen
  • circle-arrow-right
  • circle-arrow-left
  • circle-arrow-up
  • circle-arrow-down

過去に使ってきたアイコン(WebArtsで作成)をglyphicons.pngに追加し、bootstrapを使わないページでも利用できるように を作成した。

  • help
  • forbid
  • key
  • thumb
  • slide
  • video
  • photo
  • song
  • chrome
  • firefox
  • safari
  • opera
  • ie
  • twitter
  • gplus
  • flickr
  • picasa
  • sigma
  • elmblog
  • wp
  • journal
  • blogger
  • drupal
  • elgg
  • wiki
  • joomla
  • gallery
  • sites
  • alumni
  • burari
  • tv
  • movie
  • note
  • score
  • myspace
  • digg
  • linkedin
  • sunny
  • cloud
  • rain
  • snow
  • moon
  • gear
  • close
  • closex
※サイズが24pxのアイコンglyphicon24.pngを作成し、<i> classでlargeを指定して使えるようにした。
〔例〕アイコン名alert: <i class="icon-alert"></i> <i class="icon-alert large"></i>
  • sigma
  • elmblog
  • sites
  • alumni
  • burari