KADOYAN.com

Interface elements for jQuery - About Interface

interface.jsとjQueryを使うと、ページ内リンクのスムーズスクロールが簡単に実現できます。

$(document).ready(function() {
 $("body").ScrollToAnchors(800);
});

()の中の数字はスピードです。
色々試してみると面白い。イージングもしてくれます。

とりあえず、これを書いておけばページ内アンカーのリンクは自動的にスムーズスクロールされるんだけど…MacのSafariでは、上方向のスクロールをしてくれません。普通に飛んじゃいます。
バグですかなぁ。

あと、もしJavaScriptであとからページ内に動的にページ内リンクを付け加えたりする場合は、このスクリプトを実行する前につけておかないと、その部分だけスクロールしてくれなくなりますのでご注意。

StrictなHTMLを目指す場合、リンクのtarget指定はあまり使いたくありません。
そこで、異論はあると思いますが、外部リンクの場合はすべて新しいウインドウで開くようにするスクリプトを作ってみました。なんだかちょっと無理矢理な感じがします…もうちょっとスマートなやり方がありそうなもんですが…。
ちなみに、ウチのサイトに実装してみました。チョットしたお試しです。

スクリプトのbaseUrlのところに、サイトルートのURIをいれてください。
（ホントは、baseタグを参照するといいんでしょうけど、ない場合がほとんどなので…）
http://から始まり、かつbaseUrlに入れたURLから始まらないリンクはすべてポップアップするようになります。

ポップアップブロックされてる場合はどうなるんだろう？

追記

またEmotional Webを参考にさせていただいて修正しました。

一つめの"a[@href^=http//]"は、「hrefという属性の値がhttp://からはじまるaタグ」と言う意味になります。
詳しくは、Supported, but differentを参照。

E[@foo^=bar] an E element whose "foo" attribute value begins exactly with the string "bar"

そして、そのあとに続くnot以降は、上記の条件を満たしたaタグの中から更に「href属性が変数baseUrlの中身のテキストからはじまるもの以外」と言う条件に当てはまるものを選び出す書き方です。
詳しくは、not( el )参照。

Removes the specified Element from the set of matched elements. This method is used to remove a single Element from a jQuery object.

つまり、両方合わせて「http://から始まり、なおかつ自分トコのURLではないリンク」という条件を作っているわけです。

スクリプト

$(document).ready(function() {
 var baseUrl = "http://www.kadoyan.com/";
 //
 $("a[@href^=http://]").not("[@href^="+baseUrl+"]").click(function() {
   window.open($(this).attr("href"));
   return false;
 });
});

概要

表を組む時に、見やすさを保つため隔行で色を変えたりすることがあります。
手動でやった場合、作業そのものが時間の無駄だし、ツールを使っても一々メンテナンスが大変です。

そこで、それをjQueryを使って自動化するスクリプトを作ってみました。
色を変えたいテーブルにclass="changeTr"と書けば、その表の行を一個飛ばしで色を変えます（正確にはclass="changeTrBg"をつけていく）。

trの中にあるのがtdであろうがthであろうが、ただ単にclass="changeTrBg"をtrにつけていくだけなので、CSSはちゃんと考えて書かないと予想外の表示になってしまうかもしません。

次のサンプルは、二つめの表以外にclassをつけてあります。

いきなり追記

なんだか無駄なことをやっていた（各々のテーブルに含まれるtrの数を勘定して、偶数番めかどうかをチェックして、偶数ならclassを付与する）みたいで、更に簡単に「奇数」「偶数」番目を指定する方法があることを知りました。

Custom Selectorにある「:odd」「:even」というのがそうです。他にも色々便利そうなのがありますね。
ラクをするためにjQueryを使っているので、徹底的に楽しなきゃ…出来ないと思ってることも、ちゃんとドキュメントを読めばラクにできる方法があるかも？

Emotional Webを参考にさせてもらいました。

ただ、短い方だと、下のサンプルのような奇数行のテーブルが列んだ場合、class="changeTr"のついたテーブルをひとまとめにしてtrを勘定するのか、奇数行のテーブルが続くと、色が変わる行がずれていきます（最初のテーブルはthの次の行が色代わり、次のテーブルはthの次の行の色変わらず…の繰り返しになる）。
これを:evenを使ってうまく回避する方法はないものでしょうか。

以下のサンプルは、冗長な方を使っています。

スクリプト

//短い方
$(document).ready(function() {
 $(".changeTr tr:even").addClass("changeTrBg");
});

//長い方
$(document).ready(function() {
 $(".changeTr").each(function() {
  trs = $(this).children();
  $(trs).find("tr:even").addClass("changeTrBg");
 });
});

サンプルCSS

table {
 border-top: 1px solid #ccc;
 border-right: 1px solid #999;
 border-collapse: collapse;
}
td,
th {
 border-left: 1px solid #666;
 border-bottom: 1px solid #333;
 margin: 0;
 padding: 2px 4px;
}
th {
 background-color: #333;
 color: #fff;
 text-align: center;
}
td {
 text-align: right;
}
tr.changeTrBg td {
 background-color: #ddd;
}

Interface elements for jQuery - About Interface

コイツを使うと、ビジュアル的な処理を簡単に実現できます。
＃でも、Safariだと少し不安定なような。大丈夫かな。

エフェクト全部を詰め込むと結構なファイルサイズになるようですが、必要な機能だけを選んでダウンロードもできるようです。

今度はこれで遊んでみよう

概要

前のよりもう少し実用的なサンプルです。

サンプルの構造は次のようになっています。

タブのブロック全体がclass="tab"、タブそのものになるリスト（ul）にはclass="tablist"、デフォルトで選択されているタブ（li）にはclass="tabDefault"をつけています。
tabDefault自体は目印になっているだけなので、実際に選ばれたタブのスタイルを決めているクラスはtabChoosedです。
あとは、タブの内容になるブロックに任意のIDをつけ、対応するタブ（li）内のラベルからページ内リンクさせています。

というわけで、こちらもJavaScriptが使えない場合には、ページ内リンクとして機能するようになっています。まじめなあなたも安心？

スクリプト

$(document).ready(function() {
 //初期化
 $(".tab/div").hide();
 var tabDefault = $(".tabDefault").attr("href").split("#");
 $(".tabDefault").parent().addClass("tabChoosed");
 $("#"+tabDefault[tabDefault.length-1]).show();
 //
 $(".tablist/li/a").click(function() {
  splitID = $(this).attr("href").split("#");
  targetID = "#"+splitID[splitID.length-1];
  $(".tab/div").hide();
  $(".tablist/li").removeClass();
  $(this).parent().addClass("tabChoosed");
  $(targetID).show();
  return false;
 });
});

サンプルCSS

.tablist,
.tablist li {
 margin: 0;
 padding: 1px 0;/*padding-topはWin IEバグ対策*/
}
.tablist li {
 float: left;
 margin-right: 2px;
 padding: 1px 4px;
 list-style: none;
 font-weight: normal;
 background: #eee;
 border: 1px solid #999;
}
.tablist li.tabChoosed {
 font-weight: bold;
 background: #fff;
 border-bottom: 0;
}
.tab #tab1,
.tab #tab2,
.tab #tab3 {
 clear: both;
 padding: 2px 5px;
 background: #fff;
 border: 1px solid #999;
}
/*clearfix*/
.tab:after {
 content: ".";
 display: block;
 height: 0;
 visibility: hidden;
 clear: both;
}
* html .tab:after {
 zoom: 1;
}

2007年6月17日追記：ちゃんとしたのもできました。新しい方をご覧ください。

概要

簡単な、タブ切り替えのテストです。

構造は、次のソースを参照。

タブになる部分をclass="tab"を囲い、その中にclass="tablist"のulを作ります。
各リストはタブの見出しになります。
その下に、任意のIDでブロックを作ります。これが、タブで切り替えられる表示の中身です。
最初に出しておきたいブロックには、class="tabDefault"をつけておきます。
最後に、見出しのラベルから、表示したいブロックのIDをつかってアンカーリンクを張ってください。

JavaScriptが効かない時は、ページ内リンクになりますので、構造的におかしいことはないと思います。

とりあえずは動きのテスト。実用的なのはまたあとで作ってみよう。

スクリプト

$(document).ready(function() {
  $(".tab > div").hide();
  $(".tabDefault").show();
  //
  var tabIndex = $(".tab > div");
  var tabNum = $(tabIndex).length-1;
  //
  $(".tablist > li > a").click(function() {
    var targetID = $(this).attr("href");
    for (i=0; i<=tabNum; i++) {
      $(tabIndex[i]).hide();
      }
    $(targetID).show();
    return false;
  });
});

サンプルCSS

ul.tablist,
ul.tablist li {
    margin: 0;
    padding: 0;
}
ul.tablist li {
    border: 1px solid #999;
    float: left;
    margin-right: 2px;
    padding: 1px 4px;
    list-style: none;
}
.tab div {
    clear: both;
    border: 1px solid #999;
}
.tab:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
  * html .tab:after {
    zoom: 1;
}

WiiインターネットチャンネルでYoutubeを見るページを実験的に作ってみました。
他にも色々サービスはあるので今更ですけど…

jQueryでYoutube APIから来たデータを処理して展開しています。

Wiiのインターフェース用JavaScriptもできたみたいなので、いずれは十字キーとかのコントローラで操作できるようにしてみよう。