yuga.js Archive

コメントでいただいたリクエストを反映したyuga.jsの0.7.1を公開します。0.7.0からの差分は以下の通りです。

• セルフリンク：対象の範囲を指定できるように
• jQuery: 1.3.1に変更（1.2.6でも動作します）

上記機能が必要ない場合はバージョンアップする必要はありません。

yuga.js 0.7.1 ダウンロード

また、ドキュメントのほうにカスタムパラメータについて情報を追加しました。

http://kyosuke.jp/yugajs/

不具合、リクエストなどありましたら、この記事にコメントしていただけると助かります。

追記： jQuery 1.3系からSafari 2.0をサポートしていないようです。もしSafari 2.0での動作が必要であればSafari 2.0に対応しているjQuery 1.2.6でもyuga.js 0.7.1は動作しますのでjquery.jsを置き換えてください。

yuga.jsの配布ページは長らく放置されていてblogより古いバージョンが配布されていたりとひどい状況だったわけですが、0.7.0の公開に合わせて準備していたドキュメントのページができましたのでこちらに差し替えました。urlも長くてわかりづらかったので新しくしました。前のURLは301でリダイレクトしているので自然とこちらにアクセスすることになるかと思います。

http://kyosuke.jp/yugajs/

全機能一通り書きましたのでブログからダウンロードしていまいち使い方がわからないなどという方も役に立つかもしれません。今後の予定としてはこれにカスタマイズのための情報を追記して行く予定です。誤字や意味がわからない個所などありましたらこの記事のコメントでお知らせいただけると助かります。

コメントでいただいたリクエストやちょっとした不具合を修正したyuga.jsの0.7.0を公開します。0.6.3からの差分は以下の通りです。

• ロールオーバー：処理最適化（前回のバージョン比150%ぐらいの速度アップ）
• セルフリンク、ロールオーバー：2重に_on, _crがつかないように調整
• 自動thickbox：urlに?が含まれていた場合は自動でthickboxにならなくした。
• 外部リンク：アイコン追加機能を付加（デフォルト無効）
• 外部リンク：自分のドメインから指定されている場合外部リンクとして扱わないよう修正（主にMovable Type対策）
• するするスクロール：対象のidがなければa要素のname属性で探すよう修正
• するするスクロール：スクロール後にURLを本来のリンク後のものに書き換えるよう修正
• 内部処理：url解析時、ついでにGETパラメータを扱いやすくした

yuga.js 0.7.0 ダウンロード

不具合などありましたら、この記事にコメントしていただけると助かります。

yuga.jsの機能が増えてきたので全機能のマニュアルも作っていますがなかなか進まず。。 完成したら公開します。

主にコメントでいただいた不具合を修正したyuga.jsの0.6.3を公開します。0.6.0からの差分は以下の通りです。

• 0.6.3 :thickboxのクラスが付いていても２重に設定されないように調整、ストライプがテーブルでうまく動作しない不具合の修正
• 0.6.2 : ロールオーバーセレクタで#nav li imgなどの指定とselfリンクが合わせて使えなかった不具合を修正
• 0.6.1 : ロールオーバーセレクタカスタム時に複数指定に対応、#のみの仮リンクにするするスクロールを適用しないように

基本的には特定環境におけるバグフィックスです。0.6.0でも問題がないかたは無理にアップデートする必要はありません。

yuga.js 0.6.3 ダウンロード

不具合などありましたら、この記事にコメントしていただけると助かります。

時間に余裕ができたのでyuga.jsに新機能を追加しました。追加した機能は以下です。

• 親ディレクトリへのリンクにクラスを設定と画像の変更
• 簡易タブ機能の追加

そのほか、スクロール周りのソースの整理などを行いました。

yuga.js 0.6.0 ダウンロード

最低限の使い方

XHTMLの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>

機能を無効にする

27行目に以下のようなコードがあります。

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

この中で不要な機能はコメントアウトすることで切ることができます。たとえば、外部リンクを別ウインドウ、first-child、emptyなどのクラス付加機能をOFFにするには以下のようにします。

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

機能のパラメータを変える

ロールオーバーのクラス名などを変えたい場合は設定をすることが可能です。fuctionの引数としてobjectの形でパラメータをセットします。 たとえば、rolloverのクラスをrollとrollgroupに、ファイル名につく名前を_overに変更するには以下のようにします。

$(function() {
  $.yuga.selflink();
  $.yuga.rollover({
    hoverSelector: '.roll',
    groupSelector: '.rollgroup',
    postfix: '_over'
  });
  $.yuga.externalLink();
  $.yuga.thickbox();
  $.yuga.scroll();
  $.yuga.tab();
  $.yuga.stripe();
  $.yuga.css3class();
});

hoverSlectorなど、何というプロパティ名で設定するかは対応するfunctionの var c = $.extend({ …となっている部分を参照してください。

新機能1：親ディレクトリへのリンクのクラス設定

今まで、yuga.jsでは自分のページに設定したリンクに対してcurrentというクラスと画像を_cr付きのものに差し替えるという機能がありました。今回はこれの拡張です。 リンク先のURLが現在見ているページの一部であった場合にparentsLinkというクラスを付加し、画像を_cr付きのものに差し替えるようにしました。 これによって、companyディレクトリ以下のhtmlでは、/company/とリンクを張った場合にparentsLinkというクラスが設定されます。

現在見ているページ： /company/map.html

元のソース：

<ul>
<li><a href="/company/">会社案内</a><ul>
  <li><a href="/company/map.html">地図</a></li>
</ul></li>
<li><a href="/service/">サービス</a></li>
<li><a href="/recruit/">求人案内</a></li>
</ul>

適用後のソース：

<ul>
<li><a href="/company/" class="parentsLink">会社案内</a><ul>
  <li><a href="/company/map.html" class="current">地図</a></li>
</ul></li>
<li><a href="/service/">サービス</a></li>
<li><a href="/recruit/">求人案内</a></li>
</ul>

index.htmlなどがついている場合はURLの一部ではないのでparentsLink設定されません。適用したくない場合にindex.htmlまで記述するなどといった使い方も可能です。

新機能2：簡易タブ機能

簡単なタブ機能です。tabNavというクラスを設定した中のa要素を調べ、リンク先に設定されているdiv要素の表示を切り替えるようになります。 最初はひとつめのa要素のタブが表示され、また、a要素にはactiveというクラスが設定されます。

<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>

もっと高度な機能が必要な場合は jQuery UIのタブ機能を利用をおすすめします。