- ベストアンサー
bgiframeとdatepickerの共存
- IE6での<input>要素のz-indexバグを解決するために、bgiframeを使用
- jQueryのdatepickerを使いたいが、bgiframeとの共存がうまくいかない
- bgiframeを外すことで、両方の機能を導入することができる
- charlie432
- お礼率100% (53/53)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
どこから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>
お礼
ありがとうございます！ うまくできました。 実は、原因はjsにあったのではなく、cssで「overflow:hidden」となっていたのが原因でした。 ありがとうございます。