bgiframeとdatepickerの共存

解決済

質問者：charlie432
質問日時：2011/03/08 17:59
回答数：1件

IE６対策について。

IE6では<input>がz-indexを無視するというバグがあります。
これは、jQueryのbgiframeを使うことにより解決できました。

（参考）
http://d.hatena.ne.jp/nzm_o/20100614/1276529390

ここで、同じくjQueryのdatepickerを加えて、こんな仕様にしたいと考えております。
http://jsajax.com/Articles/jQueryDatePicker/1144

ところが、うまくいかないので、いろいろ試してみたところ、bgiframeを外したらうまく行きました。

では、両方とも導入したい場合はどうしたらよいのでしょうか。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yyr446
回答日時：2011/03/09 11:11

どこからdatepickerに必要なjsとcssを入手されたか解りませんが、全て配布元本家↓

http://jqueryui.com/demos/datepicker/
http://jqueryui.com/download
http://brandonaaron.net/code/bgiframe/docs
から入手して、検証してみました。全てデフォルトのままの設定でも同時に使用可能で、もちろんIE6でも正常に効果が出ました。
うまくいったHTML↓

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>gomi</title>
<style type="text/css">
#wrapper { position: relative; width: 100%;}
form { position: absolute; top: 0; left: 0; width: 100%; }
select { position: relative; width: 100%; margin: 0 0 2px; z-index: 1; color: #ccc; }
.box { position: relative; z-index: 2; float: left; margin: 5px; border: 5px solid #666; padding: 5px; width: 250px; height: 100px; color: #000; background-color: #999; }
</style>
<link rel="stylesheet" type="text/css" media="screen" href="/jslib/jqueryUI/css/ui-lightness/jquery-ui-1.8.2.custom.css">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.5");</script>
<script type="text/javascript" src="/jslib/jquery.bgiframe.js"></script>
<script type="text/javascript" src="/jslib/jqueryUI/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="/jslib/jqueryUI/development-bundle/ui/jquery.ui.datepicker-ja.js"></script>
<script type="text/javascript">
$(function(){
$('#day').datepicker();
$('#box').bgiframe();
});
</script>
</head>
<body>
<div id="wrapper">
<form action="#" method="get" accept-charset="utf-8">
<select name="test"><option>Testing Testing</option></select>
<select name="test"><option>Testing Testing</option></select>
<select name="test"><option>Testing Testing</option></select>
<select name="test"><option>Testing Testing</option></select>
<select name="test"><option>Testing Testing</option></select>
<select name="test"><option>Testing Testing</option></select>
<select name="test"><option>Testing Testing</option></select>
</form>
<div id="box" class="box">
<input type="text" id="day">
</div>
</div>
</body>
</html>