メイン

「jQuery」のアーカイブ

2008年7月 5日

jQuery plugin : color-utils.js リリース

以前、JUIに参加したときに、「jQuery pluginとしてリリースします」と言ってほったらかしになっていたcolor-utils.jsをリリースしました。

jquery-color-utils - Google Code

使い方等のドキュメントは↓こちら。

Document - jquery-color-utils - Google Code

RGB(rbb(n,n.n))表記を、16進表記(#nnnnnn)に変換したり、rgbの値を与えて色を変更したり、色の平均値を出したり、背景色でHTML Elementをソートしたりできます。

まあ、普通のアプリでは、あまり使われることはなさそうですかね。

テストを先日紹介したQUnitで書いているので、興味がある方はテストのページもご覧ください。

QUnit sample

ダウンロードは↓コチラのページから。

jquery-color-utils - Google Code

2008年7月 2日

jQuery Search

Google Custom Search Engineを使って、jQueryの公式サイトと、jQueryのGoogle Groupを検索する検索エンジンを作りました。

関数や不具合報告の検索に役立つと良いな(といっても、検索先が英語なので、ちょっと敷居が高いかもしれませんが)。

jQuery Search

2008年6月15日

jQueryのテスティングフレームワークQUnit

jQueryのSubversionリポジトリにtestフォルダがあって、jQuery自身のテストが納められていたのですが、そこで使われているテスティングフレームワークがQUnitとしてトップレベルのプロジェクトになったようです。

QUnit - jQuery JavaScript Library

これを使うと簡単にjQueryプラグインのテストコードが書けちゃいます。

使い方は以下の通り。

提供されているメソッド

test( name, test ) : nameにテストの名称、testには実行するテストを関数の形で渡します。

module( name ) : テストの途中で、テスト対象のモジュールや関数の目印を付けたいときに使います。nameにはモジュールの名称を渡します。

ok( state, message ) : stateがtrueならOK、falseならNGという判定になります。messageはテスト時に表示するメッセージです。

equals( actual, expected, message ) :actualとexpectedが同値ならOK、異なればNGという判定になります。messageは同上。

expect( amount ) : そのテスト(text(name,test)で引数に指定しているテスト関数)の中で実行されているok()/equals()の数をamountに指定します。テストの数が異なれば、エラーが表示されます。

start( ) : テストを再開します。

stop( ) : テストを中断します。Ajaxで非同期通信等のテストを行うとき、非同期処理前にstop()でテストを止め、非同期処理終了時のコールバック関数内でstart()を実行して、テストを再開します。

サンプル

実際のテストケースを見た方が早いと思うので、以下にQUnitのページで紹介されているサンプルコードを掲載します。

test("a basic test example", function() {
  ok( true, "this test is fine" );
  var value = "hello";
  equals( "hello", value, "We expect value to be hello" );
});

module("Module A");

test("first test within module", function() {
  ok( true, "all pass" );
});

test("second test within module", function() {
  ok( true, "all pass" );
});

module("Module B");

test("some other test", function() {
  expect(1);
  ok( true, "well" );
});

このテストの実行結果はこちらのページで確認できます。

テスト結果の行の最後の3つの数字は、それぞれ「エラー数」「成功数」「テスト総数」を意味しています。

結果の行をクリックすると、各テストのメッセージが表示されます。エラーが発生していた場合は、ここで、どのAssertでエラーが発生したかが分かります。

ということで、上記サンプルをちょっといじって、エラーが発生するパターンのページを作ってみました。

こちらでご確認ください。

equalsでエラーが発生した場合は、期待値と実際の処理結果の値が画面に表示されます。

非常にシンプルなフレームワークなので、さくっとテストを書くことができて便利です。

QUnitの基本的なHTMLは以下のようになります(DLはこちらから)。下記のページに、テストしたいjsを読み込んで、テストコードを書けばOKです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>QUnit sample</title>
        <script src="http://code.jquery.com/jquery-latest.js">
        </script>
        <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/qunit/testsuite.css" type="text/css" media="screen" />
        <script type="text/javascript" src="http://dev.jquery.com/view/trunk/qunit/testrunner.js">
        </script>
        <script type="text/javascript">
            $(function(){
                try {
                    //ここにテストを記述
                } 
                catch (e) {
                }
            });
        </script>
    </head>
    <body>
        <h1>QUnit example</h1>
        <h2 id="banner"></h2>
        <h2 id="userAgent"></h2>
        <ol id="tests">
        </ol>
        <div id="main">
        </div>
    </body>
</html>

テストケースを、どのように書いたら良いか分からない方は、本家のjQuery自身のテストケースを見てみることをおすすめします。以下にテストJavaScriptコードのリンクをいくつか紹介します。

2008年6月 2日

jQueryでダミーフォーカスの実装

昨日公開した「Amazon ベストセラー ビューア」では、左側の商品のサムネイルで、オレンジ色のカーソルを実装しています。キーボードの、hで左に移動、lで右に移動、jで下に移動、kで上に移動します。

今回は、こうしたダミーフォーカスの実装方法を解説します。

とっても、やり方は簡単で、フォーカスを表現するスタイルシートのクラスを定義して、そのクラスを付け外しするだけです。

Amazon ベストセラー ビューア」では、フォーカスを定義するスタイルシートのクラスとして、以下のようなクラスを定義しています。

#feed img{
    padding:3px;
}
#feed img.selected {
    background-color:#FF8C00;
}

id="feed"のエレメント(サイトではdiv)の下にあるimgは、すべてpadding:3pxとし、selectedというクラスが指定されているimgについては、背景がオレンジ色になります。これで、画像の周りにオレンジ色の枠ができ、フォーカスを表現しています。

以下に、上記スタイルを適用したimgを並べてみます。

selectedクラスが指定された2つ目の画像の周りがオレンジ色になっています。

さて、サイトでは、キーボード操作でフォーカスが移動できるようにしています。

これには、先日紹介したjQueryのキーバインドのプラグイン「js-hotkeys」を使っています。

このプラグインでは、キーに対して、動作させたい関数を以下のように割り付けます。

$.hotkeys.add('Ctrl+c', function(){ alert('copy anyone?');});

では、hキーを押すとフォーカスが左に移動するという機能を実装してみます。

「フォーカスが左に移動する」というのは、以下のように書くことができます。

$('#focus_test_000 img.selected').removeClass('selected')
.prev().addClass('selected');

id="focus_test_000"以下のselectedというクラスが指定されたimgタグから、selectedというクラスをremoveして、そのimg属性の前にある要素にselectedクラスを付加しています。

これをhキーに割り付けるので、以下のようなコードになります。

$.hotkeys.add('h',function(){
    $('#focus_test_000 img.selected').removeClass('selected')
    .prev().addClass('selected');
});

では、動きを見てみましょう。以下に、id="focus_test_000"を指定したpタグの中にimg属性を並べて、上記関数を実行してあります。

hキーを押下すると、オレンジ色のフォーカスが左へ移動していきます。

一番左側にある画像にフォーカスがあたっているときに、hキーを押すと、フォーカスが消えてしまいます。

ということで、先ほどの関数に「一番左側にフォーカスがあるときは、最も右側の(最後の)要素にselectedクラスを付加する」という処理を加えてやればOKです。

さて、フォーカスが移動する要素が少ない場合は、このような実装方法で問題ないかと思いますが、要素が多くなってくると動作が遅くなる可能性があります。

というのも、$('#hoge img.selected') と書いた場合、jqueryの内部では、getElementsByTagNamesでid="hoge"要素以下のimgタグを全て取得し、ループを回してclass名のチェックを行っているからです。

キーボード操作のように、連続して関数が実行される場合は、ライブラリ内部で実行される処理もなるべくコンパクトになるよう考えた方が良いです。

で、「Amazon ベストセラー ビューア」では、左側のサムネイル(imgタグが100個)のフォーカス移動については、selectedIdというグローバル変数でフォーカスが当たっている要素のid属性を管理しています。

つまり、以下のように書くことで、内部ではgetElementByIdが2回実行され、先ほどよりも早く処理することができます。

$.hotkeys.add('h',function(){
    $('#img_'+selectedId).removeClass('selected');
    selectedId -= 1;
    $('#img_'+selectedId).addClass('selected');
});

jQueryの魅力であるメソッドチェーン風の書き方を崩す形になりますが、こちらの方が快適に動作します。

2008年5月26日

jQueryでキーバインド

先日のJUIで刺激を受けて、ちょっとしたマッシュアップアプリを作っているのですが、そこでJavaScriptでキーバインドを実装することにしました。

で、jQueryを使っていたので、適当なプラグインがないかと探してみたら、よさげなのを発見。

js-hotkeys - Google Code

$.hotkeys.add('a', fn);

こんな感じでキーバインドできます。クロスブラウザ対応もちゃんとやっていてくれるみたいです。

デモ・テストは↓こちらで。

デモページ

 

2008年4月18日

Re:一晩で覚えるjQueryの逆引き基礎サンプル7つ

一晩で覚えるjQueryの逆引き基礎サンプル7つ*ホームページを作る人のネタ帳

jQueryに書くとほってんとり入りできるらしいので便乗。というかリンク先で紹介されているサンプルコードにちょっと意義異議あり。

一個のサンプルは非常に単純な構造になっておりますゆえ、jQueryをすでにやったことがある人にとって必要ないものだということをあらかじめご了承くださいませ。

ということであれば、「jQueryらしい」書き方をした方が良いかなと思います。

で、僕ならこう書くってことで。

全般的に使われている$(document).ready(fn)は、$(fn)でショートカットできます。

$(document).ready(function(){alert('hoge');})

は、

$(function(){alert('hoge');})

こう書けると。

まあ、これはどうでもいいや。短く書けるってだけなので。初心者向けに$(document).ready(fn)で説明した方が、「ドキュメントが準備完了になったら」というニュアンスが伝わるのかも。

次に、HTMLとJavaScriptの分離ってことで、サンプルでは、

<input name="btn22" type="button" value="ローディング" onClick="bt01()">
<div id="load1"></div>

と、HTMLのonclickに関数を書いていますが、id属性をつけてJavaScriptのコードで

$('#hoge').click(bt01)

と書くほうがjQueryっぽいのでは。

次に、「閉じる、開くボタンを同一の場所で交互にしたい」というtoggleの処理。サンプルでは、ローディングするHTMLにボタンを書いちゃってますが、これだとメンテナンス性が落ちちゃうんじゃないかなー。

ってことで、

<div id="load1"><input name="btn22" type="button" value="ローディング" onClick="bt01()"></div>

は、

<input name="btn22" type="button" value="ローディング" onClick="bt01()"><div id="load1"></div>

こんな感じにローディングする部分の外にボタンは出しちゃいましょう。あとは、JavaScriptで

$('input[name=btn22]').toggle(
function(){
$("#load1").load("./load.html");//HTMLをロードする処理
$(this).attr('value','閉じる')//自分自身のvalueを"ローディング"から"閉じる"に変える。
}
,function(){
$("#load1").html("");//HTMLを消す処理
$(this).attr('value','ローディング')//自分自身のvalueを"閉じる"から"ローディング"に変える。
}
);

こんな感じかな。長くなって分かりにくくなっちゃったかもね。

あと、jQueryのselectorは,区切りで複数指定できるので、

$(document).ready(function(){
$("#ls1").keyup(function () {
var value1 = $("#ls1").val();
var value2 = $("#ls2").val();
$("#ls3").val(value1 * value2);
}).keyup();

$("#ls2").keyup(function () {
var value1 = $("#ls1").val();
var value2 = $("#ls2").val();
$("#ls3").val(value1 * value2);
}).keyup();
});

は、

$(document).ready(function(){
var calc = function(){
var value1 = $("#ls1").val();
var value2 = $("#ls2").val();
$("#ls3").val(value1 * value2);
}
$("#ls1,#ls2").keyup(calc).keyup();
});

こう書いた方がすっきりするし、同様に

function del(){
$("#ls1").val("");
$("#ls2").val("");
$("#ls3").val("");
}

は、

function del(){
$("#ls1,#ls2,#ls3").val("");
}

と書いた方がかっこゆすだと思います。

jQueryを使ったことない人向けってことだったのだけど、HTMLとJavaScriptを分離できるってところが魅力の一つだし、なるべく短くコードが書けるってところもアピールできたらと思って書いてみました。

別にこれが「正解」ってつもりで書いてないので、あしからず。あくまで僕ならこう書くってことで。

2008/4/18 12:20 追記:

本当にページ中のテキスト入力フォームをすべて空にしたいのであれば、

$('input:text').val('')

でいけます。

あと、jQueryとは直接関係ないかもしれませんが、最後のサンプルで、aタグをcodeタグで囲って、さらにクリックしたときにcodeタグのtitle1,2,3属性とかを持ってくるというのは止めた方が良いですよね。

var clickFunc = function(txt1,txt2,txt3){
  $('#ls1').val(txt1);
  $('#ls2').val(txt2);
  $('#ls3').val(txt3);
}

こんな関数を定義して、各aタグに、

$('a:eq(0)').click(function(){clickFunc('北海道','飛行機','2000')});

とイベントを定義していくかなぁ。まあ、この辺はもっと上手い書き方で来ますね。

2008年4月 2日

jQueryでBASIC認証のAjax通信

最近AIRアプリ(HTML + Ajaxの方)でTwitterクライアントを作ろうと思って色々やっていて、発言を投稿するとかその辺の認証が必要なところはBASIC認証での認証が必要なことが分かりました。

通常のHTMLページであれば、Twitter以外のドメインのページからTwitterのドメインに対してHTTPXmlRequestでAjaxでの通信を試みても、クロスドメインの制約にひっかかってしまうわけです。

ところが、AIRアプリであればこのクロスドメインの制約がなくなるので、通信は成功するはずだったんです。

で、HTTPXmlRequestでBASIC認証するには2通りの方法があって、1つはopenメソッドの引数にユーザIDとパスワードを渡す方法で、もう一つはユーザIDとパスワードをJavaScriptでBase64エンコードを行いAuthorizationヘッダに格納する方法。

JavaScriptのBase64エンコードがちょっと面倒だったので、jQueryの$.ajaxメソッドでBASIC認証の通信ができないものかとjQuery1.2.3のソースを見ていたら、2761行目に、

xml.open(s.type, s.url, s.async, s.username, s.password);

って書いてありました。1.2.1のソースにはs.usernameとs.passwordがなかったので、最近追加されたんですかね。

やったやったと喜んで、これで実装してみたんですが、動かず。

なんでだろ・・・。AIR内蔵のブラウザがこの機能をサポートしてないのかな。うーん。

2008年3月29日

jQuery plugin --- selectbox-utils 0.2.0 Release

以前作ったjQueryのプラグインを更新しました。

selectbox-utils.js download

このプラグインを利用すると、jQueryオブジェクトで以下の3つのメソッドを利用することができます。

  • numericOptions(option)
  • datePulldown(yearObj,monthObj)
  • options(Array)

今回のバージョンアップでは、numericOptionsに渡せるオプションの種類と、optionsメソッドを追加しました。

追加したオプションの種類

・labels

numericOptionsメソッドは連続した数値のプルダウンを生成するメソッドですが、プルダウンの値は数値でも見た目(ラベル)は文字にしたい場合があるという要望があったので、ラベル用の文字列を渡せるようにしました。

・exclude

連続した数値の中で、プルダウンに含めたくない値を配列で渡すことができます。

・startLabel

プルダウンの最初の値に「値を選択してください」のような文字列の選択肢を渡すことができます。渡す値は、長さ2の配列で、最初に値、そしてラベルを設定してください。

 

optionsメソッド

引数なしで実行すると、そのjQueryオブジェクト以下のoptionタグのjQueryオブジェクトが取得できます。

引数に数値を指定すると、その数値番目のoptionタグのjQueryオブジェクトを取得できます。

引数に配列の配列を指定すると、オプションタグを生成してappendします。

 

デモはこちらで確認することができます。各「execute code」を押下するとコードが実行されます。

 

プロジェクトホームページ:jquery-selectbox-utils - Google Code

2008年1月31日

jQueryの$(function)がwindow.onload後に効かない問題

病み上がり職場復帰のリハビリ代わりに、下記jQueryの$(function)の挙動をソースから追っかけてみました。

で、amachangの

jQuery.event.special.ready.setup()
/* または */
$.event.special.ready.setup()

は、たしかjQuery1.2.2から実装されたイベントAPIの一種なので、それ以前のバージョンのjQueryでは使えないので使うときはバージョンを要チェックです(ちがってたらゴメンナサイ)。

川崎さんが困っている、

具体的には、DOM 構築完了後に、script 要素を DOM ツリーに追加して、
そのソース中で $(function) した場合とかに、C の状態が発生する。

という現象は、そもそも普通に実行しちゃだめなのかなぁと思うのですが、どうなんだろう。

hoge()を$(hoge)と書かなければいけない理由が作られているアプリにあるのかな。

 

ソースを見ていて、

(C) DOM 構築完了前に実行される JavaScript 中で $(function) を呼び出さないまま
  DOM 構築後に初めて $(function) を呼び出す
    →スルーされる

こうなっちゃうのは、jQuery.ready()が実行されていないからで、強引に、

$.ready()

とかやっちゃえば使えるようになるんだけど、これもいまいちかな。

$(function)をDOM構築前に実行すると、以下のbindReady()が実行されて、最後にwindowがloadするタイミングでjQuery.ready()が実行されるようになっているから間違っちゃいないとは思うんだけども。うーむ。

function bindReady(){
 if ( readyBound ) return;
 readyBound = true;
 // If Mozilla is used
 if ( jQuery.browser.mozilla || jQuery.browser.opera )
  // Use the handy event callback
  document.addEventListener( "DOMContentLoaded", jQuery.ready, false ); 
 // If Safari or IE is used
 // Continually check to see if the document is ready
 else (function(){
  try {
   // If IE is used, use the trick by Diego Perini
   // http://javascript.nwbox.com/IEContentLoaded/
   if ( jQuery.browser.msie || document.readyState != "loaded" && document.readyState != "complete" )
    document.documentElement.doScroll("left");
  } catch( error ) {
   return setTimeout( arguments.callee, 0 );
  }
  // and execute any waiting functions
  jQuery.ready();
 })();
 // A fallback to window.onload, that will always work
 jQuery.event.add( window, "load", jQuery.ready );
}

 

2008年1月15日

jQuery1.2.2 Release

今日はjQueryの2才の誕生日。それに合わせてか、jQuery 1.2.2がリリースされました。

jQueryブログで紹介されているImportant Changesの内容をかいつまんで紹介します。

$(DOMElement) の速度の改善(300%)

$(this)のように、頻繁に使われている$(DOMElement)を改善して、かなりの速度改善が得られたようです。(といっても、もともと0.0x ms オーダーの処理なので、ループ処理の中で大量の$(DOMElement)を呼び出していなければ、効果のほどは感じられないかもしれません)

.ready() の見直し

IEでのメモリリークの問題が色々と解決しているみたいです。

$(document).ready(fn) も、$(document).bind("ready",fn)のように書けるようになりました。 

.bind("mouseenter") / .bind("mouseleave") の追加

新たに"mouseenter","mouseleave"というイベントが加わり、これまでの.hover(fn1,fn2)が別の書き方ができるようになりました。

$("li").hover(function(){
  $(this).addClass("hover");
}, function(){
  $(this).removeClass("hover");
});$("li").bind("mouseenter", function(){
  $(this).addClass("hover");
}).bind("mouseleave", function(){
  $(this).removeClass("hover");
}); 

独自のイベントを追加できるようになった

独自のイベントを追加できる plugin API が追加されました。

これで"mousewheel"のようなイベントをpluginの形で追加 できるようになっています。

セレクタ :not() の追加
:not()というセレクタが追加され、より複雑な処理を行えるようになりました。

$(".hover:not(li.active)")
$("li:not(.active,.hover,:contains(test))")

その他、合計120個のBugも修正されています。

ダウンロードは↓こちらから。

ソース読み込まないと。 

2008年1月 8日

jQueryのcheatsheet 壁紙

このサイトで紹介されているprototype.jsの壁紙を使っていたんですが、最近は何かとjQueryづいているので、jQueryの壁紙にしたいなぁと思って探してみたんですが、壁紙として使えそうなのがありませんでした。

jQuery Cheat Sheet - jQuery.info

Google ドキュメント - JQuery Cheat Sheet

じゃあ自分で作ってみるかってことで、ちまちま作業して完成。

とりあえず 1280x960 版を作ってみました。

サイズとか色とかフォントとか内容について希望がありましたらご連絡ください。善処します。 

1280x960 blue

1280x960 black (2008.1.9 追加)

2008年1月 6日

jQuery in Action を買ってみた

manningのサイトで"jQuery in Action"を購入してみました。

Early Access Edition とのことで、PDF形式の本です。洋書なんで英語。2、3年前にTapestry in Actionを買ったのを思い出しましたよ。

ぱらぱらと見た感じ、大体知っていることが載っていそうでしたが、英語の勉強も兼ねて読んでみようかと思います。

PSPでPDFが見られたら良いのになぁ。

せっかくの大画面なんだから、そういう書籍Viewerとしても活躍して欲しいですわ。

 

Jquery in Action
Jquery in Action
posted with amazlet on 08.01.07
Bear Bibeault Yehuda Katz
Manning Pubns Co (2008/10)
売り上げランキング: 28798

2008年1月 5日

jQueryの素敵なところ

軽量で簡単にプログラミングできることで注目されているjQueryの素敵だなぁと思うところをメモ。

 

グローバルに定義される変数が少ないのが素敵。

 :jQuery と $ だけ(かな)。prototype.jsと比べると全然少ないです。

$関数の衝突に気をつかっているのが素敵。

 :jQuery.noConflict();で、$関数をjQuery関数で代用できます。さらにj$ = jQuery;ってやるのが定番なのかな。

Nativeなクラスを汚染しないのが素敵。

 :Object クラスとか Array クラスのprototypeを拡張してないので、手組みの部分で想定外の動きをすることがありません。

プラグインのインターフェースが提供されているのが素敵。

 :簡単にプラグインの関数とかを作れちゃいます。ちゃんと引数、引数のデフォルト値も簡単に定義できるのが良い感じ。

 

↓今こんな本出てるんですね、洋書ですが。ManningのサイトでPDF版買ってみようかな。

Jquery in Action
Jquery in Action
posted with amazlet on 08.01.05
Bear Bibeault Yehuda Katz
Manning Pubns Co (2008/10)
売り上げランキング: 26737

2007年12月19日

jQuery plugin --- selectbox-utils 0.1.1 Release

日付のセレクトプルダウンを動的に作る jQuery plugin を作った」でリリースした、数値のoptionタグを動的に生成するプラグインですが、Opera でバグがあったので修正しました。

バグの内容は、Optionタグを動的に生成した後、下記コードで選択されている箇所を指定すると、

this.selectedIndex = settings.selectedIndex;

以下の図ような状態になってしまうというもの。

opera_option.png

以下のOperaのフォーラムで指摘されているとおり、

OperaでのJavascriptで、おかしい所がある - 日本語 - 日本語

Operaの場合だけ、下記のコードで指定するようにしました。

this.options[settings.selectedIndex].defaultSelected = true;

Operaかどうかの判定は、jQueryの下記変数を利用しています。

jQuery.browser.opera

確認は以下のページで。

jQuery plugin --- selectbox-utils Demo page

ダウンロードは以下からどうぞ。

jquery.selectboxutils-0.1.1.js

2007年12月15日

jQuery で select タグの option タグを増減させるときの注意点

昨日のエントリ「日付のセレクトプルダウンを動的に作る jQuery plugin を作った」で、select タグに対してoptionタグを削除したり、追加したりしたんですが、その中でちょっとだけはまったことをメモ。

option タグを select タグに append するとき、最初↓こんな風に書いてました。

this.append('<option value="1">1</option>');

this はselect のjQueryオブジェクトです。上記のappendをfor文でぐるぐる回す感じ。

で、

<select id="year"></select>
<select id="month"></select>
<select id="date"></select>

↑こういうoptionがないタグに対して、ページ表示時に、

$(function(){
$('#year').numericOptions({from:2007,to:2011});
$('#month').numericOptions({from:1,to:12,selectedIndex:5,namePadding:2});
$('#date').numericOptions({valuePadding:2});
});

こんな感じで実行してやると、IE のときに、年と日のプルダウンの横幅が正常に表示されないんですね。

というわけで、↓Option オブジェクトを new して、options のオブジェクトに入れる形にしました。

this.options[j] = new Option(padfunc(i,settings.namePadding),padfunc(i,settings.valuePadding));
//padfung は0詰め用の関数

IE6には、select タグに optionタグを innerHTMLで差し込むことが出来なって言う地味なバグがあるので(BUG: Internet Explorer は、オブジェクト選択の innerHTML プロパティを設定するのに失敗します。)、そこはjQueryのオブジェクトに頼らない方が良いのかなと。もしかしたらOptionタグを設定するメソッドを僕がしらないだけかもしれませんが。


ついでに、IEのDOM に関連するバグで、table を動的にcreateElement してappend する場合、TBODY タグがないと表示されないってバグがあるんですが、これはjQueryは上手くクロスブラウズ対応してくれています。

$('body').append('<table><tr><td>a</td></tr></table>');

↑このコードで生成されるHTMLは、ちゃんと

<table><tbody><tr><td>a</td></tr></tbody></table>

になってるんですね。

2007年12月14日

日付のセレクトプルダウンを動的に作る jQuery plugin を作った

jQueryのお勉強に、ってことでプラグインを作ってみました。

参考にしたのは↓こちらの記事。

jQuery のプラグインを作成する : ブログの新着記事を表示:Goodpic

(function() { $.fn.myplugin = function(config){ config = jQuery.extend({ value1: "Default value 1", value2: "Default value 2" },config);

var target = this;
target.append("Hello jQuery Plugin !
"
+ config.value1 + "
" + config.value2);
};
})(jQuery);

↑こんな感じで、$.fn のプロパティとして関数を作成してやればOK。簡単。

注意点は、関数名を他のプラグインと被らないようにするってことと、メソッドチェーンしても良い関数のときには、最後に return this するのを忘れないようにするってことかな。

で、作ったのが↓以下の2本。

・jquery.numericoption.js
・jquery.datepulldown.js
(2007.12.16 追記)
結局1本にまとめました。
jquery-selectbox-utils-0.1.0.js
(2007.12.16 追記 ここまで)

numericoption.js の方は、

$('#month').numericOptions({from:1,to:12,selectedIndex:5,namePadding:2});

↑こんな風にして、使って、1から12までのオプションタグをappend するってプラグインです。

config の値として渡せるのは、以下のもの。

remove : 既存のoption タグを削除するかどうか。default は true
from : 開始の値。default は 1
to : 終了の値。default は 31
selectedIndex : 生成後に選択済みにしておくオプションタグの index。default は 0
valuePadding : value 値の左0詰め桁数。default は 0
namePadding : name 値の左0詰め桁数。default は 0

動的にオプションタグの値を変えたいときに地味に便利です。

でもって、それを利用しているのが、datepulldown.jsの方。

$('#date1').datePulldown({year:$('#year1'),month:$('#month1')});

↑こんな感じで使います。

これで、year と month に指定した値が変わったときに、指定したタグの下にその年月に応じた日数のプルダウンを生成します。

デモ見てもらった方が早いと思うので、↓デモページをどうぞ。一番下の奴です。

jQuery plugin --- selectbox-utils Demo page

コードはいつものようにGoogle code でホスティングしてます。

jquery-selectbox-utils - Google Code

2007年12月12日

jQueryのパフォーマンスについて --- id アクセスとclass アクセス

最近、jQueryを利用して書かれたソースのパフォーマンスチェックをしていて、jQueryのソースも見つつ色々と分かってきました。

jQueryのパフォーマンス最適化に関するTips

で、↑このエントリで話題になっている

  • class指定だとid指定より遅くなる。
  • $('div#hoge') と $('#hoge') では、$('#hoge')の方が早い。

という2点について、その理由を解説します。

・class指定だとid指定より遅くなる。

javascript にはdocument.getElementById() という関数はありますが、class指定でHTMLElementを取得するメソッドは存在しません。

なので、class名で取得しようとした場合、検索対象のHTMLElementを総なめしてclass名をチェックする必要があります。

検索対象が多ければ多いほど当然遅くなっちゃいます。

・$('div#hoge') と $('#hoge') では、$('#hoge')の方が早い。

これは上記に関連するのですが、jQueryのソースを見ると、$('div#hoge') は document.getElementById()で値を取得するのではなく、まずdocument.getElementsByTagNames で検索対象のHTMLElementを取得して、それをfor文でまわして id 属性を文字列比較しています。

同じように、$('div.hoge') も 、class 属性を文字列比較して取得しています。

結論

  • 可能な限り$('#id') でid属性を指定して使おう。
  • class指定を使うときは対象を絞り込んでから。
  • $('tagName#id') と $('.class') はダメ。絶対。

余談

結論として$('tagName#id') は使っちゃダメって話なんですが、$('div.hoge') とどっちが早いのか。

僕の環境では $('tagName#id') の方が早かったです。

ソースを見ると、id はhtml中で一意ということで、for文でチェックしつつ見つかったら breakでfor文を抜けていますが、classの場合全部チェックしないといけないので、その分の差かもしれません。

あと、class は class = "hoge moge" のようにスペース区切りで複数指定できるので、jQueryのソースでは指定したclass名の前後に半角スペースを付け、チェック対象のHTMLElementのclassName 属性値の前後にも同様に半角スペースを付けて、indexOf でチェックしています。

↓$('tagname#id')で id でチェックしているところ

var tmp=[];
for(var i=0;r[i];i++)
  if(r[i].getAttribute("id")==m[2]){
    tmp=[r[i]];
    break;
  }
r=tmp;

↓$('tagname.class')で class名 でチェックしているところ

// r がチェック対象のオブジェクト、mがチェックするclass名、
// not がbool値でtrue:mのclass名が該当しないものをリターン,false:mのclass名が該当するものをリターン
classFilter:function(r,m,not){
  m=" "+m+" ";
  var tmp=[];
  for(var i=0;r[i];i++){
   var pass=(" "+r[i].className+" ").indexOf(m)>=0;
   if(!not&&pass||not&&!pass)tmp.push(r[i]);
  }
  return tmp;
}

この辺の泥臭い処理もベンチマークの結果に効いてくるのかもしれません。

にしても、jQueryおもしろい。なんか書いていて楽しくなりますね。

でぃべろっぱーず・さいど http://dev.chrisryu.com/ 鹿児島出身子持ちSEのディベロッパーとしての一面 ja Copyright 2013 Sat, 05 Jul 2008 23:57:52 +0900 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss jQuery plugin : color-utils.js リリース 以前、JUIに参加したときに、「jQuery pluginとしてリリースします」と言ってほったらかしになっていたcolor-utils.jsをリリースしました。

jquery-color-utils - Google Code

使い方等のドキュメントは↓こちら。

Document - jquery-color-utils - Google Code

RGB(rbb(n,n.n))表記を、16進表記(#nnnnnn)に変換したり、rgbの値を与えて色を変更したり、色の平均値を出したり、背景色でHTML Elementをソートしたりできます。

まあ、普通のアプリでは、あまり使われることはなさそうですかね。

テストを先日紹介したQUnitで書いているので、興味がある方はテストのページもご覧ください。

QUnit sample

ダウンロードは↓コチラのページから。

jquery-color-utils - Google Code

]]>
http://dev.chrisryu.com/2008/07/jquery_plugin_colorutilsjs.html http://dev.chrisryu.com/2008/07/jquery_plugin_colorutilsjs.html jQuery Sat, 05 Jul 2008 23:57:52 +0900
jQuery Search Google Custom Search Engineを使って、jQueryの公式サイトと、jQueryのGoogle Groupを検索する検索エンジンを作りました。

関数や不具合報告の検索に役立つと良いな(といっても、検索先が英語なので、ちょっと敷居が高いかもしれませんが)。

jQuery Search

]]>
http://dev.chrisryu.com/2008/07/jquery_search.html http://dev.chrisryu.com/2008/07/jquery_search.html jQuery Wed, 02 Jul 2008 23:36:48 +0900
jQueryのテスティングフレームワークQUnit jQueryのSubversionリポジトリにtestフォルダがあって、jQuery自身のテストが納められていたのですが、そこで使われているテスティングフレームワークがQUnitとしてトップレベルのプロジェクトになったようです。

QUnit - jQuery JavaScript Library

これを使うと簡単にjQueryプラグインのテストコードが書けちゃいます。

使い方は以下の通り。

提供されているメソッド

test( name, test ) : nameにテストの名称、testには実行するテストを関数の形で渡します。

module( name ) : テストの途中で、テスト対象のモジュールや関数の目印を付けたいときに使います。nameにはモジュールの名称を渡します。

ok( state, message ) : stateがtrueならOK、falseならNGという判定になります。messageはテスト時に表示するメッセージです。

equals( actual, expected, message ) :actualとexpectedが同値ならOK、異なればNGという判定になります。messageは同上。

expect( amount ) : そのテスト(text(name,test)で引数に指定しているテスト関数)の中で実行されているok()/equals()の数をamountに指定します。テストの数が異なれば、エラーが表示されます。

start( ) : テストを再開します。

stop( ) : テストを中断します。Ajaxで非同期通信等のテストを行うとき、非同期処理前にstop()でテストを止め、非同期処理終了時のコールバック関数内でstart()を実行して、テストを再開します。

サンプル

実際のテストケースを見た方が早いと思うので、以下にQUnitのページで紹介されているサンプルコードを掲載します。

test("a basic test example", function() {
  ok( true, "this test is fine" );
  var value = "hello";
  equals( "hello", value, "We expect value to be hello" );
});

module("Module A");

test("first test within module", function() {
  ok( true, "all pass" );
});

test("second test within module", function() {
  ok( true, "all pass" );
});

module("Module B");

test("some other test", function() {
  expect(1);
  ok( true, "well" );
});

このテストの実行結果はこちらのページで確認できます。

テスト結果の行の最後の3つの数字は、それぞれ「エラー数」「成功数」「テスト総数」を意味しています。

結果の行をクリックすると、各テストのメッセージが表示されます。エラーが発生していた場合は、ここで、どのAssertでエラーが発生したかが分かります。

ということで、上記サンプルをちょっといじって、エラーが発生するパターンのページを作ってみました。

こちらでご確認ください。

equalsでエラーが発生した場合は、期待値と実際の処理結果の値が画面に表示されます。

非常にシンプルなフレームワークなので、さくっとテストを書くことができて便利です。

QUnitの基本的なHTMLは以下のようになります(DLはこちらから)。下記のページに、テストしたいjsを読み込んで、テストコードを書けばOKです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>QUnit sample</title>
        <script src="http://code.jquery.com/jquery-latest.js">
        </script>
        <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/qunit/testsuite.css" type="text/css" media="screen" />
        <script type="text/javascript" src="http://dev.jquery.com/view/trunk/qunit/testrunner.js">
        </script>
        <script type="text/javascript">
            $(function(){
                try {
                    //ここにテストを記述
                } 
                catch (e) {
                }
            });
        </script>
    </head>
    <body>
        <h1>QUnit example</h1>
        <h2 id="banner"></h2>
        <h2 id="userAgent"></h2>
        <ol id="tests">
        </ol>
        <div id="main">
        </div>
    </body>
</html>

テストケースを、どのように書いたら良いか分からない方は、本家のjQuery自身のテストケースを見てみることをおすすめします。以下にテストJavaScriptコードのリンクをいくつか紹介します。

]]>
http://dev.chrisryu.com/2008/06/qunit.html http://dev.chrisryu.com/2008/06/qunit.html jQuery Sun, 15 Jun 2008 22:38:31 +0900
jQueryでダミーフォーカスの実装 昨日公開した「Amazon ベストセラー ビューア」では、左側の商品のサムネイルで、オレンジ色のカーソルを実装しています。キーボードの、hで左に移動、lで右に移動、jで下に移動、kで上に移動します。

今回は、こうしたダミーフォーカスの実装方法を解説します。

とっても、やり方は簡単で、フォーカスを表現するスタイルシートのクラスを定義して、そのクラスを付け外しするだけです。

Amazon ベストセラー ビューア」では、フォーカスを定義するスタイルシートのクラスとして、以下のようなクラスを定義しています。

#feed img{
    padding:3px;
}
#feed img.selected {
    background-color:#FF8C00;
}

id="feed"のエレメント(サイトではdiv)の下にあるimgは、すべてpadding:3pxとし、selectedというクラスが指定されているimgについては、背景がオレンジ色になります。これで、画像の周りにオレンジ色の枠ができ、フォーカスを表現しています。

以下に、上記スタイルを適用したimgを並べてみます。

selectedクラスが指定された2つ目の画像の周りがオレンジ色になっています。

さて、サイトでは、キーボード操作でフォーカスが移動できるようにしています。

これには、先日紹介したjQueryのキーバインドのプラグイン「js-hotkeys」を使っています。

このプラグインでは、キーに対して、動作させたい関数を以下のように割り付けます。

$.hotkeys.add('Ctrl+c', function(){ alert('copy anyone?');});

では、hキーを押すとフォーカスが左に移動するという機能を実装してみます。

「フォーカスが左に移動する」というのは、以下のように書くことができます。

$('#focus_test_000 img.selected').removeClass('selected')
.prev().addClass('selected');

id="focus_test_000"以下のselectedというクラスが指定されたimgタグから、selectedというクラスをremoveして、そのimg属性の前にある要素にselectedクラスを付加しています。

これをhキーに割り付けるので、以下のようなコードになります。

$.hotkeys.add('h',function(){
    $('#focus_test_000 img.selected').removeClass('selected')
    .prev().addClass('selected');
});

では、動きを見てみましょう。以下に、id="focus_test_000"を指定したpタグの中にimg属性を並べて、上記関数を実行してあります。

hキーを押下すると、オレンジ色のフォーカスが左へ移動していきます。

一番左側にある画像にフォーカスがあたっているときに、hキーを押すと、フォーカスが消えてしまいます。

ということで、先ほどの関数に「一番左側にフォーカスがあるときは、最も右側の(最後の)要素にselectedクラスを付加する」という処理を加えてやればOKです。

さて、フォーカスが移動する要素が少ない場合は、このような実装方法で問題ないかと思いますが、要素が多くなってくると動作が遅くなる可能性があります。

というのも、$('#hoge img.selected') と書いた場合、jqueryの内部では、getElementsByTagNamesでid="hoge"要素以下のimgタグを全て取得し、ループを回してclass名のチェックを行っているからです。

キーボード操作のように、連続して関数が実行される場合は、ライブラリ内部で実行される処理もなるべくコンパクトになるよう考えた方が良いです。

で、「Amazon ベストセラー ビューア」では、左側のサムネイル(imgタグが100個)のフォーカス移動については、selectedIdというグローバル変数でフォーカスが当たっている要素のid属性を管理しています。

つまり、以下のように書くことで、内部ではgetElementByIdが2回実行され、先ほどよりも早く処理することができます。

$.hotkeys.add('h',function(){
    $('#img_'+selectedId).removeClass('selected');
    selectedId -= 1;
    $('#img_'+selectedId).addClass('selected');
});

jQueryの魅力であるメソッドチェーン風の書き方を崩す形になりますが、こちらの方が快適に動作します。

]]>
http://dev.chrisryu.com/2008/06/dummy_focus_by_jquery.html http://dev.chrisryu.com/2008/06/dummy_focus_by_jquery.html jQuery Mon, 02 Jun 2008 22:34:00 +0900
jQueryでキーバインド 先日のJUIで刺激を受けて、ちょっとしたマッシュアップアプリを作っているのですが、そこでJavaScriptでキーバインドを実装することにしました。

で、jQueryを使っていたので、適当なプラグインがないかと探してみたら、よさげなのを発見。

js-hotkeys - Google Code

$.hotkeys.add('a', fn);

こんな感じでキーバインドできます。クロスブラウザ対応もちゃんとやっていてくれるみたいです。

デモ・テストは↓こちらで。

デモページ

 

]]>
http://dev.chrisryu.com/2008/05/keybind_in_jquery.html http://dev.chrisryu.com/2008/05/keybind_in_jquery.html jQuery Mon, 26 May 2008 23:32:49 +0900
Re:一晩で覚えるjQueryの逆引き基礎サンプル7つ 一晩で覚えるjQueryの逆引き基礎サンプル7つ*ホームページを作る人のネタ帳

jQueryに書くとほってんとり入りできるらしいので便乗。というかリンク先で紹介されているサンプルコードにちょっと意義異議あり。

一個のサンプルは非常に単純な構造になっておりますゆえ、jQueryをすでにやったことがある人にとって必要ないものだということをあらかじめご了承くださいませ。

ということであれば、「jQueryらしい」書き方をした方が良いかなと思います。

で、僕ならこう書くってことで。

全般的に使われている$(document).ready(fn)は、$(fn)でショートカットできます。

$(document).ready(function(){alert('hoge');})

は、

$(function(){alert('hoge');})

こう書けると。

まあ、これはどうでもいいや。短く書けるってだけなので。初心者向けに$(document).ready(fn)で説明した方が、「ドキュメントが準備完了になったら」というニュアンスが伝わるのかも。

次に、HTMLとJavaScriptの分離ってことで、サンプルでは、

<input name="btn22" type="button" value="ローディング" onClick="bt01()">
<div id="load1"></div>

と、HTMLのonclickに関数を書いていますが、id属性をつけてJavaScriptのコードで

$('#hoge').click(bt01)

と書くほうがjQueryっぽいのでは。

次に、「閉じる、開くボタンを同一の場所で交互にしたい」というtoggleの処理。サンプルでは、ローディングするHTMLにボタンを書いちゃってますが、これだとメンテナンス性が落ちちゃうんじゃないかなー。

ってことで、

<div id="load1"><input name="btn22" type="button" value="ローディング" onClick="bt01()"></div>

は、

<input name="btn22" type="button" value="ローディング" onClick="bt01()"><div id="load1"></div>

こんな感じにローディングする部分の外にボタンは出しちゃいましょう。あとは、JavaScriptで

$('input[name=btn22]').toggle(
function(){
$("#load1").load("./load.html");//HTMLをロードする処理
$(this).attr('value','閉じる')//自分自身のvalueを"ローディング"から"閉じる"に変える。
}
,function(){
$("#load1").html("");//HTMLを消す処理
$(this).attr('value','ローディング')//自分自身のvalueを"閉じる"から"ローディング"に変える。
}
);

こんな感じかな。長くなって分かりにくくなっちゃったかもね。

あと、jQueryのselectorは,区切りで複数指定できるので、

$(document).ready(function(){
$("#ls1").keyup(function () {
var value1 = $("#ls1").val();
var value2 = $("#ls2").val();
$("#ls3").val(value1 * value2);
}).keyup();

$("#ls2").keyup(function () {
var value1 = $("#ls1").val();
var value2 = $("#ls2").val();
$("#ls3").val(value1 * value2);
}).keyup();
});

は、

$(document).ready(function(){
var calc = function(){
var value1 = $("#ls1").val();
var value2 = $("#ls2").val();
$("#ls3").val(value1 * value2);
}
$("#ls1,#ls2").keyup(calc).keyup();
});

こう書いた方がすっきりするし、同様に

function del(){
$("#ls1").val("");
$("#ls2").val("");
$("#ls3").val("");
}

は、

function del(){
$("#ls1,#ls2,#ls3").val("");
}

と書いた方がかっこゆすだと思います。

jQueryを使ったことない人向けってことだったのだけど、HTMLとJavaScriptを分離できるってところが魅力の一つだし、なるべく短くコードが書けるってところもアピールできたらと思って書いてみました。

別にこれが「正解」ってつもりで書いてないので、あしからず。あくまで僕ならこう書くってことで。

2008/4/18 12:20 追記:

本当にページ中のテキスト入力フォームをすべて空にしたいのであれば、

$('input:text').val('')

でいけます。

あと、jQueryとは直接関係ないかもしれませんが、最後のサンプルで、aタグをcodeタグで囲って、さらにクリックしたときにcodeタグのtitle1,2,3属性とかを持ってくるというのは止めた方が良いですよね。

var clickFunc = function(txt1,txt2,txt3){
  $('#ls1').val(txt1);
  $('#ls2').val(txt2);
  $('#ls3').val(txt3);
}

こんな関数を定義して、各aタグに、

$('a:eq(0)').click(function(){clickFunc('北海道','飛行機','2000')});

とイベントを定義していくかなぁ。まあ、この辺はもっと上手い書き方で来ますね。

]]>
http://dev.chrisryu.com/2008/04/re_jquery_sample.html http://dev.chrisryu.com/2008/04/re_jquery_sample.html jQuery Fri, 18 Apr 2008 06:35:25 +0900
jQueryでBASIC認証のAjax通信 最近AIRアプリ(HTML + Ajaxの方)でTwitterクライアントを作ろうと思って色々やっていて、発言を投稿するとかその辺の認証が必要なところはBASIC認証での認証が必要なことが分かりました。

通常のHTMLページであれば、Twitter以外のドメインのページからTwitterのドメインに対してHTTPXmlRequestでAjaxでの通信を試みても、クロスドメインの制約にひっかかってしまうわけです。

ところが、AIRアプリであればこのクロスドメインの制約がなくなるので、通信は成功するはずだったんです。

で、HTTPXmlRequestでBASIC認証するには2通りの方法があって、1つはopenメソッドの引数にユーザIDとパスワードを渡す方法で、もう一つはユーザIDとパスワードをJavaScriptでBase64エンコードを行いAuthorizationヘッダに格納する方法。

JavaScriptのBase64エンコードがちょっと面倒だったので、jQueryの$.ajaxメソッドでBASIC認証の通信ができないものかとjQuery1.2.3のソースを見ていたら、2761行目に、

xml.open(s.type, s.url, s.async, s.username, s.password);

って書いてありました。1.2.1のソースにはs.usernameとs.passwordがなかったので、最近追加されたんですかね。

やったやったと喜んで、これで実装してみたんですが、動かず。

なんでだろ・・・。AIR内蔵のブラウザがこの機能をサポートしてないのかな。うーん。

]]>
http://dev.chrisryu.com/2008/04/basic_auth_ajax_by_jquery.html http://dev.chrisryu.com/2008/04/basic_auth_ajax_by_jquery.html jQuery Wed, 02 Apr 2008 22:26:12 +0900
jQuery plugin --- selectbox-utils 0.2.0 Release 以前作ったjQueryのプラグインを更新しました。

selectbox-utils.js download

このプラグインを利用すると、jQueryオブジェクトで以下の3つのメソッドを利用することができます。

  • numericOptions(option)
  • datePulldown(yearObj,monthObj)
  • options(Array)

今回のバージョンアップでは、numericOptionsに渡せるオプションの種類と、optionsメソッドを追加しました。

追加したオプションの種類

・labels

numericOptionsメソッドは連続した数値のプルダウンを生成するメソッドですが、プルダウンの値は数値でも見た目(ラベル)は文字にしたい場合があるという要望があったので、ラベル用の文字列を渡せるようにしました。

・exclude

連続した数値の中で、プルダウンに含めたくない値を配列で渡すことができます。

・startLabel

プルダウンの最初の値に「値を選択してください」のような文字列の選択肢を渡すことができます。渡す値は、長さ2の配列で、最初に値、そしてラベルを設定してください。

 

optionsメソッド

引数なしで実行すると、そのjQueryオブジェクト以下のoptionタグのjQueryオブジェクトが取得できます。

引数に数値を指定すると、その数値番目のoptionタグのjQueryオブジェクトを取得できます。

引数に配列の配列を指定すると、オプションタグを生成してappendします。

 

デモはこちらで確認することができます。各「execute code」を押下するとコードが実行されます。

 

プロジェクトホームページ:jquery-selectbox-utils - Google Code

]]>
http://dev.chrisryu.com/2008/03/selectbox-utils_020_release.html http://dev.chrisryu.com/2008/03/selectbox-utils_020_release.html jQuery Sat, 29 Mar 2008 21:05:14 +0900
jQueryの$(function)がwindow.onload後に効かない問題 病み上がり職場復帰のリハビリ代わりに、下記jQueryの$(function)の挙動をソースから追っかけてみました。

で、amachangの

jQuery.event.special.ready.setup()
/* または */
$.event.special.ready.setup()

は、たしかjQuery1.2.2から実装されたイベントAPIの一種なので、それ以前のバージョンのjQueryでは使えないので使うときはバージョンを要チェックです(ちがってたらゴメンナサイ)。

川崎さんが困っている、

具体的には、DOM 構築完了後に、script 要素を DOM ツリーに追加して、
そのソース中で $(function) した場合とかに、C の状態が発生する。

という現象は、そもそも普通に実行しちゃだめなのかなぁと思うのですが、どうなんだろう。

hoge()を$(hoge)と書かなければいけない理由が作られているアプリにあるのかな。

 

ソースを見ていて、

(C) DOM 構築完了前に実行される JavaScript 中で $(function) を呼び出さないまま
  DOM 構築後に初めて $(function) を呼び出す
    →スルーされる

こうなっちゃうのは、jQuery.ready()が実行されていないからで、強引に、

$.ready()

とかやっちゃえば使えるようになるんだけど、これもいまいちかな。

$(function)をDOM構築前に実行すると、以下のbindReady()が実行されて、最後にwindowがloadするタイミングでjQuery.ready()が実行されるようになっているから間違っちゃいないとは思うんだけども。うーむ。

function bindReady(){
 if ( readyBound ) return;
 readyBound = true;
 // If Mozilla is used
 if ( jQuery.browser.mozilla || jQuery.browser.opera )
  // Use the handy event callback
  document.addEventListener( "DOMContentLoaded", jQuery.ready, false ); 
 // If Safari or IE is used
 // Continually check to see if the document is ready
 else (function(){
  try {
   // If IE is used, use the trick by Diego Perini
   // http://javascript.nwbox.com/IEContentLoaded/
   if ( jQuery.browser.msie || document.readyState != "loaded" && document.readyState != "complete" )
    document.documentElement.doScroll("left");
  } catch( error ) {
   return setTimeout( arguments.callee, 0 );
  }
  // and execute any waiting functions
  jQuery.ready();
 })();
 // A fallback to window.onload, that will always work
 jQuery.event.add( window, "load", jQuery.ready );
}

 

]]>
http://dev.chrisryu.com/2008/01/jquery_init_function_problem.html http://dev.chrisryu.com/2008/01/jquery_init_function_problem.html jQuery Thu, 31 Jan 2008 22:29:33 +0900
jQuery1.2.2 Release 今日はjQueryの2才の誕生日。それに合わせてか、jQuery 1.2.2がリリースされました。

jQueryブログで紹介されているImportant Changesの内容をかいつまんで紹介します。

$(DOMElement) の速度の改善(300%)

$(this)のように、頻繁に使われている$(DOMElement)を改善して、かなりの速度改善が得られたようです。(といっても、もともと0.0x ms オーダーの処理なので、ループ処理の中で大量の$(DOMElement)を呼び出していなければ、効果のほどは感じられないかもしれません)

.ready() の見直し

IEでのメモリリークの問題が色々と解決しているみたいです。

$(document).ready(fn) も、$(document).bind("ready",fn)のように書けるようになりました。 

.bind("mouseenter") / .bind("mouseleave") の追加

新たに"mouseenter","mouseleave"というイベントが加わり、これまでの.hover(fn1,fn2)が別の書き方ができるようになりました。

$("li").hover(function(){
  $(this).addClass("hover");
}, function(){
  $(this).removeClass("hover");
});$("li").bind("mouseenter", function(){
  $(this).addClass("hover");
}).bind("mouseleave", function(){
  $(this).removeClass("hover");
}); 

独自のイベントを追加できるようになった

独自のイベントを追加できる plugin API が追加されました。

これで"mousewheel"のようなイベントをpluginの形で追加 できるようになっています。

セレクタ :not() の追加
:not()というセレクタが追加され、より複雑な処理を行えるようになりました。

$(".hover:not(li.active)")
$("li:not(.active,.hover,:contains(test))")

その他、合計120個のBugも修正されています。

ダウンロードは↓こちらから。

ソース読み込まないと。 

]]>
http://dev.chrisryu.com/2008/01/jquery_1_2_2_release.html http://dev.chrisryu.com/2008/01/jquery_1_2_2_release.html jQuery Tue, 15 Jan 2008 22:19:27 +0900
jQueryのcheatsheet 壁紙 このサイトで紹介されているprototype.jsの壁紙を使っていたんですが、最近は何かとjQueryづいているので、jQueryの壁紙にしたいなぁと思って探してみたんですが、壁紙として使えそうなのがありませんでした。

jQuery Cheat Sheet - jQuery.info

Google ドキュメント - JQuery Cheat Sheet

じゃあ自分で作ってみるかってことで、ちまちま作業して完成。

とりあえず 1280x960 版を作ってみました。

サイズとか色とかフォントとか内容について希望がありましたらご連絡ください。善処します。 

1280x960 blue

1280x960 black (2008.1.9 追加)

]]>
http://dev.chrisryu.com/2008/01/jquery_cheatsheet_wallpaper.html http://dev.chrisryu.com/2008/01/jquery_cheatsheet_wallpaper.html jQuery Tue, 08 Jan 2008 23:01:58 +0900
jQuery in Action を買ってみた manningのサイトで"jQuery in Action"を購入してみました。

Early Access Edition とのことで、PDF形式の本です。洋書なんで英語。2、3年前にTapestry in Actionを買ったのを思い出しましたよ。

ぱらぱらと見た感じ、大体知っていることが載っていそうでしたが、英語の勉強も兼ねて読んでみようかと思います。

PSPでPDFが見られたら良いのになぁ。

せっかくの大画面なんだから、そういう書籍Viewerとしても活躍して欲しいですわ。

 

Jquery in Action
Jquery in Action
posted with amazlet on 08.01.07
Bear Bibeault Yehuda Katz
Manning Pubns Co (2008/10)
売り上げランキング: 28798
]]>
http://dev.chrisryu.com/2008/01/jquery_in_action.html http://dev.chrisryu.com/2008/01/jquery_in_action.html jQuery Sun, 06 Jan 2008 23:30:36 +0900
jQueryの素敵なところ 軽量で簡単にプログラミングできることで注目されているjQueryの素敵だなぁと思うところをメモ。

 

グローバルに定義される変数が少ないのが素敵。

 :jQuery と $ だけ(かな)。prototype.jsと比べると全然少ないです。

$関数の衝突に気をつかっているのが素敵。

 :jQuery.noConflict();で、$関数をjQuery関数で代用できます。さらにj$ = jQuery;ってやるのが定番なのかな。

Nativeなクラスを汚染しないのが素敵。

 :Object クラスとか Array クラスのprototypeを拡張してないので、手組みの部分で想定外の動きをすることがありません。

プラグインのインターフェースが提供されているのが素敵。

 :簡単にプラグインの関数とかを作れちゃいます。ちゃんと引数、引数のデフォルト値も簡単に定義できるのが良い感じ。

 

↓今こんな本出てるんですね、洋書ですが。ManningのサイトでPDF版買ってみようかな。

Jquery in Action
Jquery in Action
posted with amazlet on 08.01.05
Bear Bibeault Yehuda Katz
Manning Pubns Co (2008/10)
売り上げランキング: 26737

]]>
http://dev.chrisryu.com/2008/01/good_points_of_jquery.html http://dev.chrisryu.com/2008/01/good_points_of_jquery.html jQuery Sat, 05 Jan 2008 23:30:38 +0900
jQuery plugin --- selectbox-utils 0.1.1 Release 日付のセレクトプルダウンを動的に作る jQuery plugin を作った」でリリースした、数値のoptionタグを動的に生成するプラグインですが、Opera でバグがあったので修正しました。

バグの内容は、Optionタグを動的に生成した後、下記コードで選択されている箇所を指定すると、

this.selectedIndex = settings.selectedIndex;

以下の図ような状態になってしまうというもの。

opera_option.png

以下のOperaのフォーラムで指摘されているとおり、

OperaでのJavascriptで、おかしい所がある - 日本語 - 日本語

Operaの場合だけ、下記のコードで指定するようにしました。

this.options[settings.selectedIndex].defaultSelected = true;

Operaかどうかの判定は、jQueryの下記変数を利用しています。

jQuery.browser.opera

確認は以下のページで。

jQuery plugin --- selectbox-utils Demo page

ダウンロードは以下からどうぞ。

jquery.selectboxutils-0.1.1.js

]]>
http://dev.chrisryu.com/2007/12/jquery_plugin_selectbox_utils_011.html http://dev.chrisryu.com/2007/12/jquery_plugin_selectbox_utils_011.html jQuery Wed, 19 Dec 2007 22:08:49 +0900
jQuery で select タグの option タグを増減させるときの注意点 昨日のエントリ「日付のセレクトプルダウンを動的に作る jQuery plugin を作った」で、select タグに対してoptionタグを削除したり、追加したりしたんですが、その中でちょっとだけはまったことをメモ。

option タグを select タグに append するとき、最初↓こんな風に書いてました。

this.append('<option value="1">1</option>');

this はselect のjQueryオブジェクトです。上記のappendをfor文でぐるぐる回す感じ。

で、

<select id="year"></select>
<select id="month"></select>
<select id="date"></select>

↑こういうoptionがないタグに対して、ページ表示時に、

$(function(){
$('#year').numericOptions({from:2007,to:2011});
$('#month').numericOptions({from:1,to:12,selectedIndex:5,namePadding:2});
$('#date').numericOptions({valuePadding:2});
});

こんな感じで実行してやると、IE のときに、年と日のプルダウンの横幅が正常に表示されないんですね。

というわけで、↓Option オブジェクトを new して、options のオブジェクトに入れる形にしました。

this.options[j] = new Option(padfunc(i,settings.namePadding),padfunc(i,settings.valuePadding));
//padfung は0詰め用の関数

IE6には、select タグに optionタグを innerHTMLで差し込むことが出来なって言う地味なバグがあるので(BUG: Internet Explorer は、オブジェクト選択の innerHTML プロパティを設定するのに失敗します。)、そこはjQueryのオブジェクトに頼らない方が良いのかなと。もしかしたらOptionタグを設定するメソッドを僕がしらないだけかもしれませんが。


ついでに、IEのDOM に関連するバグで、table を動的にcreateElement してappend する場合、TBODY タグがないと表示されないってバグがあるんですが、これはjQueryは上手くクロスブラウズ対応してくれています。

$('body').append('<table><tr><td>a</td></tr></table>');

↑このコードで生成されるHTMLは、ちゃんと

<table><tbody><tr><td>a</td></tr></tbody></table>

になってるんですね。

]]>
http://dev.chrisryu.com/2007/12/jquery_tips_about_add_option_to_selectbox.html http://dev.chrisryu.com/2007/12/jquery_tips_about_add_option_to_selectbox.html jQuery Sat, 15 Dec 2007 23:41:08 +0900
でぃべろっぱーず・さいど: アーカイブ

アーカイブ

/* Base Weblog (base-weblog.css) */ /* basic elements */ html { margin: 0; /* setting border: 0 hoses ie6 win window inner well border */ padding: 0; } body { margin: 0; /* setting border: 0 hoses ie5 win window inner well border */ padding: 0; font-family: verdana, 'trebuchet ms', sans-serif; font-size: 12px; } form { margin: 0; padding: 0; } a { text-decoration: underline; } a img { border: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote { margin-top: 10px; margin-bottom: 10px; } /* standard helper classes */ .clr { clear: both; overflow: hidden; width: 1px; height: 1px; margin: 0 -1px -1px 0; border: 0; padding: 0; font-size: 0; line-height: 0; } /* .pkg class wraps enclosing block element around inner floated elements */ .pkg:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .pkg { display: inline-block; } /* no ie mac \*/ * html .pkg { height: 1%; } .pkg { display: block; } /* */ /* page layout */ body { text-align: center; } /* center on ie */ #container { position: relative; margin: 0 auto; /* center on everything else */ width: 720px; text-align: left; } #container-inner { position: static; width: auto; } #banner { position: relative; } #banner-inner { position: static; } #pagebody { position: relative; width: 100%; } #pagebody-inner { position: static; width: 100%; } #alpha, #beta, #gamma, #delta { display: inline; /* ie win bugfix */ position: relative; float: left; min-height: 1px; } #delta { float: right; } #alpha-inner, #beta-inner, #gamma-inner, #delta-inner { position: static; } /* banner user/photo */ .banner-user { float: left; overflow: hidden; width: 64px; margin: 0 15px 0 0; border: 0; padding: 0; text-align: center; } .banner-user-photo { display: block; margin: 0 0 2px 0; border: 0; padding: 0; background-position: center center; background-repeat: no-repeat; text-decoration: none !important; } .banner-user-photo img { width: 64px; height: auto; margin: 0; border: 0; padding: 0; } /* content */ .content-nav { margin: 10px; text-align: center; } .date-header, .entry-content { position: static; clear: both; } .entry, .trackbacks, .comments, .archive { position: static; overflow: hidden; clear: both; width: 100%; margin-bottom: 20px; } .entry-content, .trackbacks-info, .trackback-content, .comment-content, .comments-open-content, .comments-closed { clear: both; } .entry-excerpt, .entry-body, .entry-more-link, .entry-more { clear: both; } .entry-footer, .trackback-footer, .comment-footer, .comments-open-footer, .archive-content { clear: both; margin: 5px 10px 20px 10px; } .comments-open label { display: block; } #comment-author, #comment-email, #comment-url, #comment-text { width: 240px; } #comment-bake-cookie { margin-left: 0; vertical-align: middle; } .comments-open-header { clear: both; } #comment-post { font-weight: bold; } img.image-full { width: 100%; } .image-thumbnail { float: left; width: 115px; margin: 0 10px 10px 0; } .image-thumbnail img { width: 115px; height: 115px; margin: 0 0 2px 0; } /* modules */ .module { position: relative; overflow: hidden; width: 100%; } .module-content { position: relative; margin: 5px 10px 20px 10px; } .module-list, .archive-list { margin: 0; padding: 0; list-style: none; } .module-list-item { margin-top: 5px; margin-bottom: 5px; } .module-presence img { vertical-align: middle; } .module-powered .module-content { margin-bottom: 10px; } .module-photo .module-content { text-align: center; } .module-wishlist .module-content { text-align: center; } .module-calendar .module-content table { border-collapse: collapse; } .module-calendar .module-content th, .module-calendar .module-content td { width: 14%; text-align: center; } .typelist-thumbnailed { margin: 0 0 20px 0; } .typelist-thumbnailed .module-list-item { display: block; clear: both; margin: 0; } /* positioniseverything.net/easyclearing.html */ .typelist-thumbnailed .module-list-item:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .typelist-thumbnailed .module-list-item { display: inline-block; } /* no ie mac \*/ * html .typelist-thumbnailed .module-list-item { height: 1%; } .typelist-thumbnailed .module-list-item { display: block; } /* */ .typelist-thumbnail { float: left; min-width: 60px; width: 60px; /* no ie mac \*/width: auto;/* */ margin: 0 5px 0 0; text-align: center; vertical-align: middle; } .typelist-thumbnail img { margin: 5px; } .module-galleries .typelist-thumbnail img { width: 50px; } .typelist-description { margin: 0; padding: 5px; } .module-featured-photo .module-content, .module-photo .module-content { margin: 0; } .module-featured-photo img { width: 100%; } .module-recent-photos { margin: 0 0 15px 0; } .module-recent-photos .module-content { margin: 0; } .module-recent-photos .module-list { display: block; height: 1%; margin: 0; border: 0; padding: 0; list-style: none; } /* positioniseverything.net/easyclearing.html */ .module-recent-photos .module-list:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .module-recent-photos .module-list { display: inline-block; } /* no ie mac \*/ * html .module-recent-photos .module-list { height: 1%; } .module-recent-photos .module-list { display: block; } /* */ .module-recent-photos .module-list-item { display: block; float: left; /* ie win fix \*/ height: 1%; /**/ margin: 0; border: 0; padding: 0; } .module-recent-photos .module-list-item a { display: block; margin: 0; border: 0; padding: 0; } .module-recent-photos .module-list-item img { width: 60px; height: 60px; margin: 0; padding: 0; } /* mmt calendar */ .module-mmt-calendar { margin-bottom: 15px; } .module-mmt-calendar .module-content { margin: 0; } .module-mmt-calendar .module-header { margin: 0; } .module-mmt-calendar .module-header a { text-decoration: none; } .module-mmt-calendar table { width: 100%; } .module-mmt-calendar th { text-align: left; } .module-mmt-calendar td { width: 14%; height: 75px; text-align: left; vertical-align: top; } .day-photo { width: 54px; height: 54px; } .day-photo a { display: block; } .day-photo a img { width: 50px; height: 50px; } /* Vicksburg II (theme-vicksburg.css) */ /* basic page elements */ body { font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif; font-size: 12px; } a { color: #666666; text-decoration: underline; } a:hover { color: #66cc33; } #banner a { color: #fff; text-decoration: none; } #banner a:hover { color: #fff; } .module-content a { color: #666666; } .module-content a:hover { color: #66cc33; } h1, h2, h3, h4, h5, h6 { font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif; } .module-header, .trackbacks-header, .comments-header, .comments-open-header, .archive-header { color: #000000; font-family: 'Trebuchet MS', Verdana, sans-serif; font-size: x-small; border-bottom: 1px dashed #999999; text-align: left; font-weight: bold; text-transform: uppercase; padding: 3px; letter-spacing: .3em; } .module-header a, .module-header a:hover, .trackbacks-header a, .trackbacks-header a:hover, .comments-header a, .comments-header a:hover, .comments-open-header a, .comments-open-header a:hover .archive-header a, .archive-header a:hover { color: #fff; } .entry-more-link, .entry-footer, .comment-footer, .trackback-footer, .typelist-thumbnailed { font-size: 11px; } .commenter-profile img { vertical-align: middle; } /* page layout */ body { min-width: 720px; color: #333; background: #FFFFFF; } #container { width: 720px; margin-bottom: 20px; background: #fff; } #container-inner { border-width: 0 5px 5px 5px; border-style: solid; border-color: #FFFFFF; } #banner { width: 710px; /* necessary for ie win */ background: #66cc33; } #banner-inner { padding: 15px 13px; border-width: 0px 0px 0 0px; border-style: solid; border-color: #fff; } .banner-user { width: 70px; margin-top: 5px; font-size: 10px; } .banner-user-photo { border: 1px solid #fff; } #banner-header { margin: 0; color: #fff; font-size: 30px; font-weight: bold; line-height: 1; text-shadow: #666666 0 2px 3px; } #banner-description { margin-top: 5px; margin-bottom: 0; color: #fff; background: none; font-size: 12px; line-height: 1.125; text-shadow: #666666 0 1px 2px; } #alpha { margin: 15px 15px 0 15px; width: 480px; } #beta { width: 200px; background: #e6ecf2; } #gamma, #delta { width: 180px; background: #dddddd; } #beta-inner, #gamma-inner, #delta-inner { padding: 10px 10px 0 10px; border-width: 0px 0px 0px 0; border-style: solid; border-color: #fff; } .date-header { margin-top: 0; font-size: 11px; font-weight: bold; text-transform: uppercase; } .entry-header { margin-top: 0; border-left: 5px solid #66CC33; padding: 0 0 0 10px; color: #000000; font-size: 18px; font-weight: bold; } .entry-content, .comment-content, .trackback-content { margin: 0; line-height: 1.5; } .entry-tags { margin: 0 0 10px 10px; } .entry-tags-header, .entry-tags-list, .entry-tag { display: inline; } .entry-tags-list { list-style:none; padding: 0px; } .entry-footer, .comment-footer, .trackback-footer { margin: 0 0 20px 0; border-top: 1px solid #DDDDDD; padding-top: 3px; color: #666; font-size: 10px; text-align: right; } .comment-content, .trackback-content, .comment-footer, .trackback-footer { margin-left: 10px; } .content-nav { margin-top: 0; } #trackbacks-info { margin: 10px 0; border: 1px dashed #66cc33; padding: 0 10px; color: #292e33; font-size: 11px; text-align: center; background: #dddddd; } .comments-open-footer { margin: 10px 0; } /* modules */ .module { margin: 0 0 10px 0; border-bottom: 1px solid #f3f6f9; background: #DDDDDD; } .module-content { margin: 0 0 10px 0; padding: 10px 10px 0 10px; font-size: 10px; line-height: 1.2; } .module-search input { font-size: 10px; } .module-search #search { width: 100px; } .module-mmt-calendar .module-content table, .module-calendar .module-content table { font-size: 10px; } .module-powered { border-width: 0; } .module-powered .module-content { margin-bottom: 0; border: 1px dashed #66cc33; padding-bottom: 10px; color: #292e33; background: #fff; } .module-photo { background: none; } .module-photo img { border: solid 1px #fff; } .module-list { margin: 0 15px 10px 15px; list-style: disc; } .module-list .module-list { margin: 5px 0 0 0; padding-left: 15px; list-style: circle; } .module-list-item { margin-top: 0; color: #666; line-height: 1.2; } .typelist-thumbnailed .module-list { margin: 0 0 10px 0; list-style: none; } .typelist-thumbnailed .module-list-item { margin: 1px 0; padding: 0; background: #f3f6f9; } .typelist-thumbnail { background: #fff; } .module-photo img { border: 1px solid #fff; } .module-featured-photo { width: 398px; } .module-featured-photo .module-content { margin: 0; border-width: 0; padding: 0; } .module-featured-photo img { width: 398px; } .module-recent-photos .module-content { padding: 10px 0 0 19px; } .module-recent-photos .module-list { margin: 0; } .module-recent-photos .module-list-item { width: 64px; /* mac ie fix */ margin: 0 10px 10px 0; padding: 0; background: none; } .module-recent-photos .module-list-item a { border: #cfd4d9 1px solid; padding: 1px; background: #fff; } .module-recent-photos .module-list-item a:hover { border-color: #666666; background: #fff; } .module-tagcloud .module-list {text-align: center; } .module-tagcloud .module-list { list-style: none; } .module-tagcloud .module-list-item { display: inline; } .module-tagcloud li.taglevel1 { font-size: 19px; } .module-tagcloud li.taglevel2 { font-size: 17px; } .module-tagcloud li.taglevel3 { font-size: 15px; } .module-tagcloud li.taglevel4 { font-size: 13px; } .module-tagcloud li.taglevel5 { font-size: 11px; } .module-tagcloud li.taglevel6 { font-size: 9px; } /* calendar tweaks */ .layout-calendar #alpha { width: 260px; } .layout-calendar #beta { width: 420px; } .layout-calendar #gamma, .layout-calendar #delta { width: 190px; } .layout-calendar #gamma-inner, .layout-calendar #delta-inner { border: 0; padding: 0; } .module-mmt-calendar { width: 398px; } .module-mmt-calendar .module-content { margin: 0; border-width: 0; padding: 10px; } .module-mmt-calendar table { width: 378px; background: #66cc33; } .module-mmt-calendar th { color: #fff; border-top: 1px solid #fff; border-right: 1px solid #f3f6f9; border-bottom: 1px solid #cfd4d9; padding: 2px; text-align: right; font-weight: bold; } .module-mmt-calendar td { border-top: 1px solid #fff; border-right: 1px solid #f3f6f9; border-bottom: 1px solid #cfd4d9; padding: 2px; text-align: right; font-weight: normal; background: #dddddd; } th.weekday-7, td.day-7, td.day-14, td.day-21, td.day-28, td.day-35, td.day-42 { border-right: none; } .module-mmt-calendar td { height: 70px; } .day-photo { width: 49px; height: 49px; } .day-photo a { border: #cfd4d9 1px solid; padding: 1px; background: #fff; } .day-photo a:hover { border-color: #666666; background: #fff; } .day-photo a img { width: 45px; height: 45px; } /* artistic tweaks */ .layout-artistic #alpha { width: 260px; } .layout-artistic #beta { width: 420px; } .layout-artistic #gamma, .layout-artistic #delta { width: 190px; } .layout-artistic #gamma-inner, .layout-artistic #delta-inner { border: 0; padding: 0; } /* moblog1 tweaks */ .layout-moblog1 #alpha { margin: 0; width: 180px; background: #dddddd; } .layout-moblog1 #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-moblog1 #beta { margin: 15px 15px 0 15px; width: 320px; background: none; } .layout-moblog1 #beta-inner { padding: 0; border-width: 0; } .layout-moblog1 .module-recent-photos .module-content { padding: 10px 0 0 10px; } /* moblog2 tweaks */ .layout-moblog2 #alpha { margin: 0; width: 86px; background: #dddddd; } .layout-moblog2 #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-moblog2 #beta { margin: 15px 15px 0 15px; width: 260px; background: none; } .layout-moblog2 #beta-inner { padding: 0; border-width: 0; } .layout-moblog2 #delta { width: 154px; } .layout-moblog2 .module-recent-photos { border: 0; background: none; } .layout-moblog2 .module-recent-photos .module-content { padding: 0; border: 0; } .layout-moblog2 .module-recent-photos .module-list-item { margin: 0 0 10px 0; } /* timeline tweaks */ .layout-timeline #alpha { width: 260px; } .layout-timeline #beta { width: 420px; } .layout-timeline #gamma, .layout-timeline #delta { width: 190px; } .layout-timeline #gamma-inner, .layout-timeline #delta-inner { border: 0; padding: 0; } /* one-column tweaks */ .layout-one-column body { min-width: 520px; } .layout-one-column #container { width: 520px; } .layout-one-column #banner { width: 510px; } /* necessary for ie win */ /* two-column-left tweaks */ .layout-two-column-left #alpha { margin: 0; width: 200px; background: #dddddd; } .layout-two-column-left #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-two-column-left #beta { margin: 15px 15px 0 15px; width: 480px; background: none; } .layout-two-column-left #beta-inner { padding: 0; border-width: 0; } /* three-column tweaks */ .layout-three-column #alpha { margin: 0; width: 180px; background: #DDDDDD; } .layout-three-column #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-three-column #beta { margin: 15px 15px 0 15px; width: 320px; background: none; } .layout-three-column #beta-inner { padding: 0; border-width: 0; } /* * Preliminary styles added by Jay for Vicksburg II * for review by Luke/Walt and rest of team */ /* All or multiple templates Suppress underlines on linked entry titles */ .entry-header a { text-decoration: none; } /* Suppress the prev/next nav */ .content-nav { margin: 0px; display: none; } /* Search results templates */ .mt-search-results .search-results-header { border: 2px solid #669; background-color: #666666; color: #eee; padding: 5px; } .mt-search-results .search-results-container { margin-left:10px; } .mt-search-results form#search-form { width: 400px; margin: 0px auto 20px auto; } .mt-search-results form#search-form input#search { width: 80%; } .mt-search-results form#search-form p#search-options { text-align:center; } /* Entry tag display */ div.entry-tags { margin:0 0 10px 10px; } ul.entry-tags-list { list-style:none; padding: 0px; } h4.entry-tags-header, ul.entry-tags-list, li.entry-tag { display: inline; } /* Main index styles Suppress date header on main index */ .main-index .date-header { display: none; } /* Comment preview and individual entry Widen the comment form */ form textarea#comment-text { width:400px; } /* All archive templates Informational "where am I?" module at top of sidebar */ .module-welcome p { font-size: 12px; } .module-content p.first { margin-top:0px; } /* Date-based and category archives Archive title banner at top of page, below blog banner */ .master-archive-index #archive-title, .individual-entry-archive #archive-title, .date-based-archive #archive-title, .category-archive #archive-title { /* ie win (5, 5.5, 6) bugfix */ p\osition: relative; width: 100%; w\idth: auto; margin: 0; border-left: 10px solid #66cc33; padding: 5px; color: #fff; background: #666666; } /* Experimental comment styles Not currently in use anywhere in default templates For testing only... */ #comments-experimental .comment, #comments-experimental .comment .comment-inner { width:36em; } #comments-experimental .comment { padding: 0px; margin: 10px 15px; background-color:#eef; border:2px solid #bbb; } #comments-experimental .comment .comment-inner { position:relative; margin:-5px 0 0 -3px; background:#f3f3ff; border:1px solid #003; } #comments-experimental .comment:hover .comment-inner { border:1px solid #000; background-color: #fff; } #comments-experimental .comment a { text-decoration: none; border-bottom: 1px dotted #666666; } #comments-experimental .comment:hover a { color: #333; border-bottom: 1px solid #666; } #comments-experimental .comment .comment-footer, #comments-experimental .comment .comment-content { margin-right: 25px; margin-left: 25px; margin-bottom: 15px; } #comments-experimental .comment .comment-header { font-size: 16px; margin: 5px auto 5px 10px; text-shadow: #99A 2px 2px 1px #66F; color: #666; } #comments .comment-header { display: none; } #comments .comment-footer-experimental { display: none; } #comments-experimental .comment-footer { display: none; } でぃべろっぱーず・さいど: コメントの保留

コメントを受け付けました。

コメントを受け付けました。受け付けたコメントは、ブログの管理者の承認のため保留されています。

エントリーのページに戻る