優雅なWeb製作者の為の『yuga.js』

Check このエントリーをはてなブックマークに追加

配布元：inputlog
ライセンス：MITライセンス

yuga.jsは中村 享介さんが公開されている、Web制作に役立つ機能が色々と同梱されたJavaScriptライブラリになります。Web制作を効率よく優雅に進めるためのライブラリです。

主な機能は以下の通り。

設置方法

ダウンロードしたファイルセット「jquery.js」、「thickbox.js」、「yuga.js」、「thickbox.css」をhead要素などで読み込みます。

<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script type="text/javascript" src="js/yuga.js" charset="utf-8"></script>

XHTMLにclassなどを追加することにより様々な機能を利用することが可能です。

ロールオーバー時に画像に_onを追加

img要素のclass属性にbtnを設定しておけば、画像にマウスが乗った際にimg要素の画像を拡張子の前に「_on」が付いたものと置き換えます。

<img src="bottonA.jpg" alt=" " class="btn">:

この場合は、ロールオーバー時に画像はbottonA_on.jpgと差し替えられます。

サンプル

現在のページのリンクにclass=”current”を追加

現在のページへのリンクにはa要素に自動的にcurrentというclass属性が付加されます。

サンプル

現在のページへのリンクのa要素に包まれるimg要素の画像は、拡張子の前に「_cr」が付いたものと置き換えます。

サンプル

現在のページの親ディレクトリへのリンクにclass=”parentsLink”を追加

親ディレクトリへのリンクにclass属性にparentsLinkが追加されます。

サンプル

外部リンクを別ウインドウで開く

http://から始まるリンクには自動的にtarget属性に_blankを設定します。

サンプル

画像へ直リンクをthickboxで表示

画像へのリンクはthickboxを利用して表示します。

サンプル

odd,even.empty,first-child,last-childのクラスで設定

偶数個目の要素に.evenというclassを追加します。
奇数込めの要素に.oddというclassを追加します。
空の要素に.emptyというclassを追加します。
最初の子要素に.firstChildというclassを追加します。
最後の子要素に.lastChildというclassを追加します。

サンプル

スムーズスクロール

<a href="#top">:ページ上部に移動</a>:

などのページ内リンクをスムーズスクロールに変更します。

サンプル

タブパネル

tab数値と設定された要素をhref=”#tab1″などのページ内リンクが設定された際に表示する簡易タブパネル機能です。

<ul class="tabNav">
	<li><a href="#tab1">タブ1</a></li>
	<li><a href="#tab2">タブ3</a></li>
	<li><a href="#tab3">タブ3</a></li>
</ul>
<div id="tab1">1のタブ内容</div>
<div id="tab2">2のタブ内容</div>
<div id="tab3">3のタブ内容</div>

サンプル

利用しない機能の停止

yuga.jsでは多数の機能が実装されていますが、27行目以降のコードの冒頭に/（スラッシュ）2つをつけて停止することができます。

$(function() {
  $.yuga.selflink();
  $.yuga.rollover();
  //$.yuga.externalLink();
  $.yuga.thickbox();
  $.yuga.scroll();
  $.yuga.tab();
  $.yuga.stripe();
  //$.yuga.css3class();
});

スポンサードリンク

コメント

カテゴリー：jQuery スクロール ライブラリ ロールオーバー 製作補助系