Home > JavaScript | jQuery | yuga.js > yuga.js 0.6.0 - 優雅なWeb制作のためのJavaScript

yuga.js 0.6.0 - 優雅なWeb制作のためのJavaScript

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

Comments:18

hirasawa 08-05-22 (木) 9:34

あ、あの、classを複数セットさせるのは、どうやったら良いのでしょうか。

Ver0.4.x辺りから書き方が変わって、どうやったら良いのかわからないんです、、、

Kyosuke 08-05-26 (月) 16:29

>hirasawaさん

こんな感じですかね？
ここで書いたhoverSelectorがそのまま$()の中に入れられています。

$.yuga.rollover({
hoverSelector: ‘.roll, .btn’,
groupSelector: ‘.rollgroup, .btngroup’,
postfix: ‘_over’
});

hirasawa 08-05-27 (火) 12:11

$.yuga.rollover({
hoverSelector: ‘.btn img, .hoge img’,
groupSelector: ‘.rollgroup’,
postfix: ‘_over’
});

ご連絡いただいた方法で、
こんな感じで書くと、2個目のは動作しないんです。

yoshizawa 08-05-27 (火) 15:54

はじまして、こんにちは。
yuga.js を利用した場合、どうも return false; が効かないようです。
具体的には、仮リンクとして # を入れて onclick と onkeypress と return false; を指定している部分があるのですが、yuga.js を読み込ませていると index.html# のように return false; が効かずに URL に # がついてしまいます。

$.yuga.scroll();　の部分を丸ごとコメントアウトすると return false; が効くようにはなるのですが、できれば $.yuga.scroll(); も使用したいと考えています。共存させつつ、さらに return false; も効くようにしておくことはできないでしょうか？

良い方法がありましたらご教授いただければ幸いです。

Kyosuke 08-05-29 (木) 19:05

>hirasawaさん
書いていただいた条件でソースを追っていたところグループ化したロールオーバーのところで両方のセレクタを合わせている部分がありました。そこを単純にスペースで区切って繋げていただけだったので複数アイテムの指定でおかしくなっていたようです。すみません。0.6.1で複数アイテムを判定してセレクタを作る処理を追加しました。動作をご確認いただけますでしょうか？
yuga.js 0.6.1 ダウンロード

>yoshizawaさん
はじめまして。#を入れるとyuga.scrollの対象になってしまうためですね。。とりあえず0.6.1にて#のみが指定された要素は無視するようにしました。

この部分、href属性が#headerなどとなっていた場合にonclick属性を指定してもyuga.scrollを使えるようにしたらいいのか、onclick属性を指定されていた場合はyuga.scrollしない方がよいのか、迷ってます。

hirasawa 08-05-29 (木) 22:18

確認しました！
正常に動作しました。ありがとう御座います。

時間出来たら、また紹介記事書きたいと思います。

yoshizawa 08-06-02 (月) 16:07

ありがとうございます！
両立させて使えたらと思っていたので、本当に嬉しいです。

プログラマ側から「onclickでこう指定してくれ」と指定がある場合も多々あるので、個人的にはonclick属性があった場合にはyuga.scrollされないほうが助かったりします…！
とはいえ、とりあえず#だけの場合に無視されるだけでも、かなり作業が軽減されるのでとても助かります！

どうもありがとごうざいます！

chobi 08-06-06 (金) 14:18

初めまして。
お聞きしたいのですがyuga.jsを適用した状態で画像をthickboxで表示させるとたまに重複した（下にもう一枚画像が出てくる）状態で表示されてしまいます。
いろいろ弄っているのでyuga.jsと何かがぶつかってしまっているだけかも知れないのですが一応報告させていただきます。

chobi 08-06-06 (金) 16:04

申し訳ないです。
こちらで重複した記述をしていました

potato 08-06-10 (火) 15:30

環境
windows　ｘｐ
firefox

利用させていただこう思っております。
奇数・偶数
の機能で「ul」には反映するのですが、「table」のｔｒにはfirstChild
のみで「odd」「even」が反映されません。

//奇数、偶数を自動追加
～省略～
$(’table’).each(function(){
$(this).find(’tr:odd’).addClass(c.evenClass);
$(this).find(’tr:even’).addClass(c.oddClass);
});
},

childrenをfindに書き換えたら反映されました。

firebugで見たところ元のhtmlソースには書いていないtbodyが挿入されておりました。これが原因かなと思っております。

potato 08-06-10 (火) 17:23

更になんですが・・・
ページ内するするスクロールは
リンク先をウインドウの上部にもっていきたいのですが、現状では
ページの上から下のリンクにスクロールするとidをつけたボックス等が出たところでストップしてしまいます。
例えばそれが見出しであればその下の段落は隠れたままなので、できればウインドウ上部にまで来て欲しいなぁと思います。

よろしくお願いします。

potato 08-06-10 (火) 17:32

上記のスクロールに関しての追加です。
win xp
ie6
ie7
では望み道理のうごきでした。
firefoxだとだめでした。

potato 08-06-10 (火) 20:52

Add Your Comment

potato 08-06-10 (火) 20:56

ｈｔｍｌの構造上の問題でした。
目的のボックスの上部にfloatしたボックスを左右に並べており
ieなどは独自のボックス拡張で回避されただけでした。

firefoxには高さを与えてやれば望みの動きになりました。
ありがとうござます。

あと、できたらidの名前に「-」ハイフンが使えると嬉しいのですが・・・
これってどうにかなるものでしょうか？

yon3210 08-06-17 (火) 2:29

こんにちは、いつも利用させてもらってます。
「親ディレクトリへのリンクのクラス設定」のサンプルなのですが、現在見ているページが”/company/map.html”なので、「元のソース」で示されているリンクをたどると、たとえば”/company/company/map.html”のようなページを指すことになってしまいます。
これだと『リンク先のURLが現在見ているページの一部であった場合』の条件に一致せず、クラスも追加されないように思います。
サンプルのソース中のリンクは、正しくは、
地図
のようになるのではないでしょうか。これだときちんとクラスが追加されたのですが。
もしサンプルの解釈自体が間違っていたらすみません。

yon3210 08-06-17 (火) 2:32

すみません、↑のコメントですが、HTMLを直接記述してしまい、わけがわからなくなってますね。

正しくは、
<li><a href=”../company/map.html”>地図</a></li>
のようになるのではないでしょうか。

です。失礼しました。

kaiten 08-06-26 (木) 12:34

はじめまして。こんにちは。
新バージョン（yuga.js 0.6.1）をDLして対応サイトにフィックスさせておりますが、ロールオーバーのセレクタ設定でとまどってます。
yuga.js 0.4.2では、セレクタ以下の要素に対応させようとすると
たとえば、[#nav img]でも反応したのですが、yuga.js 0.6.1の場合は、セレクタ以下の要素に反応しないので、どのように対処すればよろしいでしょうか？
よろしくお願いいたします。

Kyosuke 08-07-07 (月) 18:19

皆様返事が遅くて申し訳ありません。。

＞chobiさん
class=thickbox記述しても２重に設定されないよう調整してみました（0.6.3）

＞potatoさん
スクロールに関して、自己解決したみたいでよかったです。
idの名前に「-」ハイフンですが、セレクタ部分はjQueryにまるなげだったりするのでjQueryの対応次第です。。JavaScriptだとマイナス演算子として判定されてしまったりするかもしれないので難しいかもですね。。

＞yon3210さん
リンクの書き方ですね。href属性にリンク先を/から書くとサイトルート相対パスになります。href=”company/map.html”ですとご指摘の通り/company/company/map.htmlになってしまいますが、href=”/company/map.html”とした場合は希望通り/company/map.htmlになるはずです（ただしローカルファイルでは反映されません）。ちなみにhref=”../company/map.html”と相対で指定した場合でもyuga.jsは問題なく動作します。

＞kaitenさん
すみません、ロールオーバーのセレクタ設定、0.6.2で修正しましたので最新版をお試しいただけますでしょうか？お手数かけてすみません。

Comment Form
Remember personal info

Trackbacks:2

Trackback URL for this entry
http://blog.kyosuke.jp/2008/05/14/53/trackback
Listed below are links to weblogs that reference
yuga.js 0.6.0 - 優雅なWeb制作のためのJavaScript from inputlog
pingback from PHPのincludeを使ったら表示がズレる件 | BONKURA BLOG 08-12-05 (金) 1:38

[...] inputlog - yuga.js 0.6.0 - 優雅なWeb制作のためのJavaScript [...]

pingback from PageTop↑ボタン押してください | あびっこぶろぐ 臆病猫のアビシニアン 09-01-19 (月) 13:11

[...] 配布サイト・設定方法は ① 配布サイト　inputlog 優雅なWeb制作のためのJavaScript [...]

Home > JavaScript | jQuery | yuga.js > yuga.js 0.6.0 - 優雅なWeb制作のためのJavaScript

Recent Entries
Categories
Archives
Tag Cloud
Search
Feeds
Meta

Return to page top