JavaScript Archive

主にコメントでいただいた不具合を修正した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 ダウンロード

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

Google AJAX APIを使うとjQueryをgoogleからダウンロードできます。これを使うと自分でサーバーに配置する場合に比べて以下のようなメリットがあります。

• バージョン指定を最後までしないことで最新版を利用できる
• gzipによる圧縮を自動で行ってくれる（jquery.minだと54.5 KB->16 KBへ）
• 普及すればネット全体でjQueryをキャッシュできる

デメリットとしては以下のような感じでしょうか。

• インターネットにつながっていないとライブラリが利用できない（ローカルでの確認時の問題）
• googleのサーバーが落ちたら困る（ほぼないと思いますが。。）

使い方はhtmlで読み込んでいるscript要素を以下のように書き換えるだけです。

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">google.load("jquery", "1.2.6");</script>

google.loadで指定しているバージョンを1.2とすると1.2.xの最新バージョンを自動で読み込んでくれます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">google.load("jquery", "1.2");</script>

参考サイト

• Google人気JavaScriptライブラリ配布開始、ネット全体でキャッシュ効果 | エンタープライズ | マイコミジャーナル
• AJAX Libraries API - Google Code

時間に余裕ができたので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のタブ機能を利用をおすすめします。

yuga.jsの0.5.3を公開します。0.5.1からの差分は以下の通りです。

• 0.5.3 : するするスクロールを高速で切りかえられた場合の動作修正
• 0.5.2 : 余計なアクセスが発生する不具合の修正

基本的にはバグフィックスですが、0.5.2で修正した内容が大きなバグなのでできればアップデートを推奨します。

yuga.js 0.5.3 ダウンロード

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

バージョンアップはこそこそしていたりする優雅なWeb制作のためのJavaScript yuga.jsの0.5.1を公開します。

CSS HappyLifeの平澤さんにわたして公開していただいた0.4.2からの差分は以下の通りです。

• 全体の構造変更
  • グローバル変数yugaをやめ、プラグインの記述方法でjQueryオブジェクト内にyugaを持つように
  • 機能別にfunctionを分け、ソースの最初で初期化をするように
  • 初期化の際、各パラメータを設定できるように
• interface.roのスクロールが1.2系で動作しないためスクロールを独自実装（interface.jsを廃止）
• 外部リンクを別ウインドウで開く機能を初期化パラメータで簡単にoffにできるように

yuga.js 0.5.1 ダウンロード

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

追記： yuga.js 0.5.3 公開しました。