グラデーション
以下のphpのコードを使って、主なブロックタグに、グラデーションが適用できるかどうかをチェックした。
グラデーションを描く方法は、http://allabout.co.jp/internet/javascript/closeup/CU20071225A/index2.htm#2を読ませていただき、自分なりにやってみた。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>ジオコーディング</title> <script src="/find/jquery.js" type="text/javascript"></script> <script src="/js/jquery.dimensions.js" type="text/javascript"></script> <script src="/js/jquery.gradient.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('.test').gradient({ from: 'cccccc', to: 'ffffff', direction: 'horizontal' }) }); </script> <style type="text/css"> .test{ width:200px; height:20px; border:1px solid #000; font-size:12px; } </style> </head> <body> <?php $tags_block = array("P","H1","H2","H3","h4","H5","H6","UL","OL","DIR","MENU","PRE", "DL","DIV","CENTER","NOSCRIPT","NOFRAMES","BLOCKQUOTE","FORM","FIELDSET","ADDRESS",); foreach($tags_block as $tag){ echo "<$tag class=\"test\">$tag element</$tag>\n"; } ?> </body> </html>
上のコードを実行すると、(tableタグは、ひどかったので上のコードからは、割愛していますが)
【firefox2】
table tr td 共に背景位置のグラデーションは描画されないで、bodyに指定したようにグラデーションが描かれた
table tr td fieldset はきちんと動作確認したほうがいいかもしれない。
【IE6】
未知の実行時エラー というエラーが発生した。
IE6は、不安定で、上記のコードではグラデーションがかからないのに、
スタティックな、<div class="test">div element</div>なら動くという感じだった。
何が悪いのか、(たぶん自分のやり方だろうけど、)はっきりするまでは、グラデーションをかけるタグを決めて
取り掛かるのが吉か
【全体的には、】
どうしても使う時には、divがよさそう。tdなどの内側なら、divを置いてやると、グラデーションがかかる。
【なんだかよくわからなかった事】
このような記述なら動いた。
<script src="/find/jquery.js" type="text/javascript"></script> <script src="/js/jquery.dimensions.js" type="text/javascript"></script> <script src="/js/jquery.gradient.js" type="text/javascript"></script> <script> jQuery.noConflict; // jQueryのコンフリクトを避ける機能をオンにする。 </script> <script type="text/javascript"> jQuery(function() { jQuery('.test').gradient({ from: 'cccccc', to: 'ffffff', direction: 'horizontal' }) }); </script> <style type="text/css"> .test{ width:200px; height:50px; border:1px solid #000; } </style> </head> <body> <div class="test">div element</div>
以下のような書き方もできるらしく
ネタ元:dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
その中で使われる $ はローカルスコープなのでということだったので、マンマやってみたら、動いた。
<script type="text/javascript"> (function ($){ $(function() { $('#map').gradient({ from: 'cccccc', to: 'ffffff', direction: 'horizontal' }) }); })(jQuery); </script> </head> <body> <div id="map" style="width: 600px; height: 300px;border:1px solid #aaa;">now loading</div>
いろんな動くやり方を、知ることが出来たが、
$j=jQuery.noConflict(); //他のライブラリとの衝突を回避します
この記述をすると
jQuery is not a function というエラーが出た。
ADD 20080108 こんな記述見つけた。if you want the convenience of the $ function for jQuery without colliding with some other use of the global $ function, the jQuery documentation suggests the following idiom: (function($) { // Within this block, $ is a reference to jQuery // Neat, huh? })(jQuery);
ちんぷんかんぷんだ。