- - PR -
Ajaxタブの見出し部分の高さ設定
| 投稿者 | 投稿内容 | ||||
|---|---|---|---|---|---|
|
投稿日時: 2008-02-24 12:33
詳しく説明していただき、ありがとうございます。
情報が足りず申し訳ございません。「…」の部分は以下になります。 タブ見出し部分のソースの判断が不安だったため、全て載せました。 <div> <input type="hidden" name="ctl00_ContentPlaceHolder1_TabContainer1_ClientState" id="ctl00_ContentPlaceHolder1_TabContainer1_ClientState" value="{"ActiveTabIndex":0,"TabState":[true,true]}" /> <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTQ0NjMzMTA3MWQYAgUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tle V9fFgEFJ2N0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkVGFiQ29udGFpbmVyMQUnY3RsMDAkQ29 udGVudFBsYWNlSG9sZGVyMSRUYWJDb250YWluZXIxDw9kZmQit7D7Y8/R6cYV6Iio9XcumfY6lQ==" /> </div> <script type="text/javascript"> <!-- var theForm = document.forms['aspnetForm']; if (!theForm) { theForm = document.aspnetForm; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } // --> </script> <script src="/AJAXEnabledWebSite4/WebResource.axd? d=inYdAh2kD5qJznvMMDi4Eg2&t=633202949792105024" type="text/javascript"></script> <script src="/AJAXEnabledWebSite4/ScriptResource.axd?d=CxVk0i-X_OVSO8WZ2IA1SMhIeb6e1TqshxJiXPs5G3uYhmUTBQR22CybM2xGGNxqCRdn 68BoJNYJWrubz7IS3Kd6G6hw3pNYS16iZczIzUY1&t=633309986089523952" type="text/javascript"></script> <script src="/AJAXEnabledWebSite4/ScriptResource.axd?d=CxVk0i-X_OVSO8WZ2IA1SMhIeb6e1TqshxJiXPs5G3uYhmUTBQR22CybM2xGGNxqCRdn 68BoJNYJWrubz7IS3Kv8u27sxbG1KhFOxguK1egBLQNPgFvCDVvn8zGtn_BG0&t= 633309986089523952" type="text/javascript"></script> <script src="/AJAXEnabledWebSite4/ScriptResource.axd? d=c8dG2xq3cyamv8-5RAgb0SCIBF2aEgcmmp8DOhw88nq5pYyZxla82AQjMZAd-ylFgS21pFvj5WdEPCuUsuamDA2&t=633310672220000000" type="text/javascript"></script> <script src="/AJAXEnabledWebSite4/ScriptResource.axd? d=c8dG2xq3cyamv8-5RAgb0SCIBF2aEgcmmp8DOhw88no69c1rVxD APWsRD_yZNIity6xB2TyE-GING4K-5__1sdxlTmQNq249AWr-e4WTvp01&t=633310672220000000" type="text/javascript"></script> <script src="/AJAXEnabledWebSite4/ScriptResource.axd? d=c8dG2xq3cyamv8-5RAgb0SCIBF2aEgcmmp8DOhw88nqKoz-BT4l O5KuTjQor-Q5bRc3GTwAuILHN-02r8-ld8w2&t=633310672220000000" type="text/javascript"></script> <script src="/AJAXEnabledWebSite4/ScriptResource.axd? d=c8dG2xq3cyamv8-5RAgb0SCIBF2aEgcmmp8DOhw88noh_JnFdrwm7Pt5u7Krtn3VOEadHQn9S2RFWFmJE5RZ-kqeDXYovDQlQK_TiFxa6T3cQov2v7NOF19NYRpUDSf10&t=633310672220000000" type="text/javascript"></script> <div> <div class="ajax__tab_xp" id="ctl00_ContentPlaceHolder1_TabContainer1" style="visibility:hidden;"> <div id="ctl00_ContentPlaceHolder1_TabContainer1_header"> <span id="__tab_ctl00_ContentPlaceHolder1_TabContainer1_TabPanel1">TabPanel1</span><span id="__tab_ctl00_ContentPlaceHolder1_TabContainer1_TabPanel2">TabPanel2</span> </div><div id="ctl00_ContentPlaceHolder1_TabContainer1_body"> <div id="ctl00_ContentPlaceHolder1_TabContainer1_TabPanel1" style="display:none;visibility:hidden;"> </div><div id="ctl00_ContentPlaceHolder1_TabContainer1_TabPanel2" style="display:none;visibility:hidden;"> </div> </div> </div> <script type="text/javascript"> //<![CDATA[ Sys.WebForms.PageRequestManager._initialize('ctl00$ContentPlaceHolder1$ScriptManager1', document.getElementById('aspnetForm')); Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90); //]]> </script> </div> <script type="text/javascript"> <!-- Sys.Application.add_init(function() { $create(AjaxControlToolkit.TabPanel, {"headerTab":$get("__tab_ctl00_ContentPlaceHolder1_TabContainer1_TabPanel1")}, null, {"owner":"ctl00_ContentPlaceHolder1_TabContainer1"}, $get("ctl00_ContentPlaceHolder1_TabContainer1_TabPanel1")); }); Sys.Application.add_init(function() { $create(AjaxControlToolkit.TabPanel, {"headerTab":$get("__tab_ctl00_ContentPlaceHolder1_TabContainer1_TabPanel2")}, null, {"owner":"ctl00_ContentPlaceHolder1_TabContainer1"}, $get("ctl00_ContentPlaceHolder1_TabContainer1_TabPanel2")); }); Sys.Application.add_init(function() { $create(AjaxControlToolkit.TabContainer, {"activeTabIndex":0,"clientStateField":$get("ctl00_ContentPlaceHolder1_TabContainer1_ClientState")}, null, null, $get("ctl00_ContentPlaceHolder1_TabContainer1")); }); Sys.Application.initialize(); // --> </script> >スタイルシートもこれだけじゃないですよね？ >もっと一杯あるはず。 スタイルシートがどのように設定されているか調べているのですが まだ分かっておらず、分かり次第書込みさせていただきます。 度々申し訳ございません。よろしくお願いいたします。 | ||||
|
投稿日時: 2008-02-25 00:34
<span id="__tab_ctl00_ContentPlaceHolder1_TabContainer1_TabPanel1">
TabPanel1</span> <span id="__tab_ctl00_ContentPlaceHolder1_TabContainer1_TabPanel2"> TabPanel2</span> なんか怪しいですね。 とりあえず、TabPanel1 と TabPanel2 っていう２つのタブが表示されるので すか？ この２つのタブIDを決め打ちでその上に向かってCSSをいじってあげたら うまく行きそうな気配です。 onload で、タブIDを検索して、その１つ上の div タグの高さをいじってあげる のかなぁ。。。。 <div class="ajax__tab_xp" id="ctl00_ContentPlaceHolder1_TabContainer1" style="visibility:hidden;"> この div の visibility:hidden ってのはロード完了時、この上の方で幾つか 読み込んでいるスクリプト中のタブイベントを登録するメソッド群が設定完了 した時点で visibility:visible ってやって、画面に表示されるのでしょうね。 だから、 ctl00_ContentPlaceHolder1_TabContainer1 のオブジェクトを取得して、 その要素中の ID が TabPanel* で終わるIDを持つ span タグを抽出して、 最初に見つけた span タグの直上の タグに対して、height:32px; とか 設定してあげる、 あとわかんないですけど、試された方が「画像の伸縮が・・・」とか書いていた ので画像があれば、そいつの高さも変える必要があるのかもしれません。 表示完了したときの、ctl00_ContentPlaceHolder1_TabContainer1の配下の DOM ツリーと設定されているスタイルがどーなってんのか見てみたいです。 見えるHTMLは数行しかないので、全てスクリプトで追加されているのだと 思うのですが、 指定したID配下の DOM ツリーのダンプは、 function DumpDOMTree(id) { var o = document.getElementById(id); alert(o.innerHTML); } こーです。 この alert() の内容をテキストエリアかなんかに表示させるように してあげて、それをコピペして整形してあげたら、解決の糸口が見つかり そうな気がします。 <script> function DumpDOMTree(id) { var o = document.getElementById(id); alert(o.innerHTML); } window.onload = function() { var o = document.getElementById("ok"); var div = document.createElement("div"); div.innerText = "hahyo-n"; div.style.border = "inset 4px blue"; o.appendChild(div); DumpDOMTree("ok"); } </script> <body> <div id="ok"> <div style="border:solid 1px red;"> ああああ </div> </div> </body> スクリプトで動的に追加したものであっても innerHTML すれば全ての タグに設定値が丸見えです。 とりあえずここらへんから当たって見たらどーでしょう？ | ||||
|
投稿日時: 2008-02-25 08:22
このサンプルが参考になるかと・・・
http://asp35.maximumaspbeta.com/Goto.aspx?aid=080225VB-1 ソースコードにスタイルシートが宣言されていますので お好みのスタイルにカスタマイズしてください。 _________________ ASP.NET+Ajaxサンプル集 | JavaScript+Ajaxサンプル集 | ||||
|
投稿日時: 2008-02-25 21:09
やっぱり画像を作ることになりますよねー。 僕は途中で心折れてしまいました。 _________________ かるあ のメモ と スニペット | ||||
スキルアップ／キャリアアップ（JOB@IT）
Copyright © ITmedia, Inc. All Rights Reserved.
著作権はアイティメディア株式会社またはその記事の筆者に属します。
当サイトに掲載されている記事や画像などの無断転載を禁止します。
著作権はアイティメディア株式会社またはその記事の筆者に属します。
当サイトに掲載されている記事や画像などの無断転載を禁止します。