JavaScript色々まぜまぜ。主にjQuery使ったヤツ

使わせていただいたJavaScriptたち

• jquery.js
• interface.js
• thickbox.js
• jQuery_Auto.js
• yuga.js
• heightLine.js

このサンプル全部ダウンロード

ダウンロード

jQuery_Autoカスタマイズ

$.auto.hide

JSがoffの場合は、class="noScript"のが出る。

I am visible (and the one you don't see is hidden.)

I am hidden.

<p>I am visible (and the one you don't see is hidden.)</p>
<p class="noScript">I am hidden.</p>

$.auto.tabs

• タブ切り替え
• 切り替えたいブロックレベル要素のid名の最後に「Body」を付ける。
• 選択されているタブはclass="active"がつく

<div class="tabContainer">

<ul class="tab">
<li id="tab1"><a href="#tab1Body">One</a></li>
<li id="tab2"><a href="#tab2Body">Two</a></li>
<li id="tab3"><a href="#tab3Body">Three</a></li>
<li id="tab4"><a href="#tab4Body">4</a></li>
<li id="hoge"><a href="#hogeBody">hoge</a></li>
</ul>
<div id="tab1Body">
<p>One<br />I'm the one's tab content.ああああああああああああ</p>
</div>
<div id="tab2Body">
<p>Two<br />I'm the two's tab content.</p>
<p></p>
</div>
<div id="tab3Body">Three<br />Guess who am I -- says the three's tab content.<p></p>
</div>
<div id="tab4Body">
<p>ふぉおおおふぉふぉふぉふぉふぉおぉぉぉぉぉぉ！！！！！</p>
</div>
<div id="hogeBody">
<p>「Body」の前は任意のidがつけれる</p>
</div>

<!-- .tabContainer --></div>

$.auto.submit

changeSubmitってclassがselect要素にあるとSubmitボタンを押さなくても変わる

Please select... This one Or this one But not this one

<form action="test.html">
<p><select name="test" class="changeSubmit">
<option value="">Please select...</option>
<option value="one">This one</option>
<option value="two">Or this one</option>
<option value="">But not this one</option>
</select> <input type="submit" value="Submit" class="noScript"/></p>
</form>

$.auto.select

inputかlabelにclass="fieldSelect"が有ると消すんじゃなくて、選択状態にする

With label: Click here

Without label:

<p>With label: 
<label for="field_1" class="fieldSelect">Click here</label> 
<input name="test" id="field_1" value="to select this"/ class="fieldSelect"></p>
<p>Without label: 
<input name="test2" value="Click me to select this" class="fieldSelect"/></p>

heightLine

classにheightLineと付けてあるブロックレベル要素の高さが統一される
詳しくは本家サイトを参照。ブロックレベル要素の高さを揃えるheightLine.js[to-R]

<div class="heightLine border">
<p>hoge</p>
</div>

<div class="heightLine border">
<p>文字サイズ変更しても、ボックスが勝手にサイズ変わる。</p>
<p>bar foo</p>
<p>bar foo</p>
</div>

<div class="heightLine border">
<p>bar foo</p>
<p>bar foo</p>
<p>bar foo</p>
<p>bar foo</p>
<p>bar foo</p>
<p>bar foo</p>
</div>

yuga.jsカスタマイズ

ロールオーバー

class="imgLink"の子要素にimg要素が有るとロールオーバーしる

• 
• 
• 
• 
• 

<ul id="nav" class="imgLink">
<li><a href="#page"><img src="img/demo.gif" alt="Test" /></a></li>
<li><a href="#page"><img src="img/demo.gif" alt="Test" /></a></li>
<li><a href="#page"><img src="img/demo.gif" alt="Test" /></a></li>
<li><a href="#page"><img src="img/demo.gif" alt="Test" /></a></li>
<li><a href="#page"><img src="img/demo.gif" alt="Test" /></a></li>
</ul>

img要素に指定してもOK

<p><a href="#page"><img src="img/demo.gif" alt="Test" class="imgLink" /></a></p>

thickbox

画像へ直リンクするとthickboxで表示(thickbox.js利用)

<p><a href="img/cbr.jpg" title="demo"><img src="img/demo.gif" alt="Test" /></a></p>

外部リンクは別ウインドウ（http://からリンク貼った場合）

MTとかだとリンクがhttpから始まっちゃうから、JSをいぢった方が良いかも。

digiper(外部リンクテスト)

<p><a href="http://digiper.com/">digiper(外部リンクテスト)</a></p>

現在のページへのリンク

現在のページにリンクしてる場合、class="current"がつく。画像は、_overになる

現在のページだよ。っていう感じの線

<p><a href="./test.html"><img src="img/demo.gif" alt="Test" /></a></p>
<p><a href="./test.html">現在のページだよ。っていう感じの線</a></p>

スムーズスクロール

親要素にclass="pageTop"が指定されているa要素は#pageに飛ぶ(interface.js利用)
設定は、yugaAutoLine.jsに。

PageTop

<p class="pageTop"><a href="#page">PageTop</a></p>

CSS HappyLifeに戻る