- - PR -
menuコントロールでのタブ型メニュー
1
投稿者 | 投稿内容 | ||||
---|---|---|---|---|---|
|
投稿日時: 2008-05-09 22:40
いつもお世話になってます。
VS2008のC#でWEBアプリを作ってます。 menuコントロールで http://mlb.yahoo.co.jp/ のようなタブ型メニューを作成したいと思うのですが、 各メニューアイテムのImageUrlプロパティで画像を割り当てると、 Textプロパティの文字の左側に表示されてしまいます。 そしてTextを消してみると、今度はValueプロパティの文字が表示されてしまいます。 Value値は、ポストバック時の処理のケース分けに使っているので消せません。。。 (ちなみにTreeViewコントロールも同じ動きでした・・・) menuコントロールでのタブ型メニューはどのように作成するものなのでしょうか? リストタグで実装するしかないのでしょうか? ご存知でしたら教えてください。 よろしくお願いします。 | ||||
|
投稿日時: 2008-05-10 04:24
http://allabout.co.jp/internet/javascript/closeup/CU20070215A/
たぶんコレ。 | ||||
|
投稿日時: 2008-05-11 06:35
タブ型メニューは、AJAX Control Toolkitの
TabContainerを利用すると便利です。 スタイルシートを利用するとこんな風にカスタマイズできます。 http://asp35.com/samples/080430VB-1.aspx?it=demo [View Code]ボタンをクリックするとソースコードが表示されます。 _________________ ASP.NET+Ajaxサンプル集 | JavaScript+Ajaxサンプル集 | ||||
|
投稿日時: 2008-05-12 17:40
>ぴあちゃんさん
回答ありがとうございます。 参考URL、確認させて頂いたのですが、探し方が悪いのか、 タブ型メニューの情報が見つかりませんでした・・・ >Accessさん 回答ありがとうございます。 既存のプログラムがmenuコントロールで作成されており、 それに修正を加えようとしている為、実現方法探していたのですが、 WEB上では例がみつかりませんでした。 教えて頂いたAjaxのコントロールを使って試してみます。 | ||||
|
投稿日時: 2008-05-13 07:59
ASP.NET AJAX Control Toolkitが利用できないときは JavaScriptだけで実装する方法もあります。 jQuery UI Tabライブデモ: http://jsajax.com/jQueryUITabsArticle930.aspx Ajax Tabライブデモ(Ajax対応のTabです) http://jsajax.com/jQueryUITabsAjaxArticle931.aspx ※ライブデモが表示されたら[コード]を選択するとソースコードが表示されます。 _________________ ASP.NET+Ajaxサンプル集 | JavaScript+Ajaxサンプル集 | ||||
|
投稿日時: 2008-05-14 14:00
>Accessさん
ありがとうございます。 TabContainerではタブ間でのコントロール共用ができなかった為、断念しました。 続いて教えて頂いた、「jQuery UI Tab」を試しましたが、 起動時に「オブジェクトでサポートされていないプロパティまたはメソッドです。」と エラーが出てしまいます。 (デバッグ実行したのですがエラー範囲があまりにも広く特定できませんでした・・・) jsファイルのバージョンもあわせているつもりなのですが。。 何か環境的な制約などあるのでしょうか? ここまで聞いて良いのか分かりませんが、何か助言ありましたら、お願いします。 以下ソース========================= <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>無題のページ</title> <link href="js/jQuery/ui.tabs.css" rel="stylesheet" type="text/css" /> <script src="js/jQuery/jquery-1.2.3.js" type="text/javascript"></script> <script src="js/jQuery/ui.tabs.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('#tabs > ul').tabs(); // Simple tabs }); </script> <script type="text/javascript"> function pageLoad() { } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> </div> <div id="tabs"> <ul> <li><a href="#tab1"><span>tab1</span></a></li> <li><a href="#tab2"><span>tab2</span></a></li> <li><a href="#tab3"><span>tab3</span></a></li> </ul> <div id="tab1"> tab1 </div> <div id="tab2"> tab2 </div> <div id="tab3"> tab3 </div> </div> </form> </body> </html> | ||||
|
投稿日時: 2008-05-15 07:22
ライブデモは、ASP.NET 3.5/Windows 2008の環境で運用しています。
下記サイトからサンプルがダウンロードできますので試してみてください。 http://stilbuero.de/jquery/tabs_3/ui.tabs.zip _________________ ASP.NET+Ajaxサンプル集 | JavaScript+Ajaxサンプル集 |
1