jQuery Archive

時間に余裕ができたので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 公開しました。

jQueryはウェブサイトを作るには素晴らしいライブラリですが、管理画面のようなウェブアプリケーションに近いものの制作にはあまり向いていません。（ちょっと管理画面を制作する必要が出てきたのです）

最近リリースされたjQuery UIも試してみたのですが、情報が少ない、公式サイトからダウンロードしたスクリプトがエラーになる、サンプルで使われているものを強引にダウンロードするとファイルサイズが違うなど、まだ実用レベルに達していないようです。

そこで、以前から注目していたExt.jsを使って制作してみようかと思います。Ext.jsは美しいUIが特徴のAjaxライブラリです（2007年4月1日に1.0がリリースされました）。現在は単体でも動作しますが、もともとほかのライブラリと組み合わせて使うように設計されました。現在もこの設計は残っており、使い慣れたjQueryと組み合わせて使えます。今回は現在公開されているExt.js 2.0 beta1とjQueryの1.2.1をつかって開発します。

まず、Ext.jsのダウンロードページから2.0 beta1のzipをダウンロードします 。jQueryも手元になければjQueryの公式サイトから最新版（ブログ記述時点では1.2.1）をダウンロードしておきます。

jQueryは1ファイルなので問題ないですが、ext.jsはzipファイルを解凍すると1500ファイル近くでてきてしまうので必要なファイルだけ取り出します。jQueryと合わせて使う場合はadapter > jqueryフォルダにある以下の2ファイルが必要です。

• ext-jquery-adapter.js
• jquery-plugins.js

jquery.jsもありますが公式サイトから落としてきた最新版を利用しても問題ありません（僕が使った限りではですが。。）。あとはトップ階層にある以下の２ファイルを取り出せばjsファイルは全部です。

• ext-all.js
• ext-all-debug.js

あと、resourcesの中の以下も取り出しておきます。

• css/ext-all.css
• imagesフォルダ

これでファイルはすべてそろいました。ベースとなるhtmlに次のような順番で読み込ませましょう（2007.11.21順序修正、uasiさんコメントでの指摘ありがとうございます！）

1. jquery.js（jquery本体）
2. jquery-plugins.js（ext.jsが使う必須プラグイン）
3. ext-jquery-adapter.js
4. ext-all.css

jQueryを使わない場合はadapter>extにあるext-base.jsを以下のように読ませてもOKです。（2007.11.21修正）

1. ext-base.js
2. ext-all.css

ちょっと長くなってしまったので実際のコードの書き方は別の記事で書きます。

CSSっぽくJavaScriptを書けるお気に入りなJavaScriptライブラリ、jQueryの1.1.4がリリースされたようです。

jQuery 1.1.4: Faster, More Tests, Ready for 1.2

1.1.3のリリース時もそうだけど、毎回800%速度UPとか発表していて、異常に高速化が図られているっぽいです。実際体感でわかるほど動作が軽くなっているので、jQueryは重いからと敬遠していた方も試してみるとよいのではないでしょうか。amachangも「jQuery すげげえええええええええええええええええ！」って言ってたし。