グラデーション

Sample帖

2008-01-07 グラデーション

以下のphpのコードを使って、主なブロックタグに、グラデーションが適用できるかどうかをチェックした。

グラデーションを描く方法は、2/2 jQueryプラグインGradientでグラデーション [Javascript] All Aboutを読ませていただき、自分なりにやってみた。


<!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>

以下のような書き方もできるらしく

ネタ元： pools.jp | RailsでThickBox(JQuery)を使う

その中で使われる $ はローカルスコープなので

ということだったので、マンマやってみたら、動いた。

<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);

ちんぷんかんぷんだ。

トラックバック - http://d.hatena.ne.jp/banzan/20080107/p1

ｊQuery メモ帳 - グラデーション