- PR -

menuコントロールでのタブ型メニュー

1
投稿者投稿内容
ベテラン
会議室デビュー日: 2006/11/10
投稿数: 64
投稿日時: 2008-05-09 22:40
いつもお世話になってます。

VS2008のC#でWEBアプリを作ってます。

menuコントロールで
http://mlb.yahoo.co.jp/
のようなタブ型メニューを作成したいと思うのですが、
各メニューアイテムのImageUrlプロパティで画像を割り当てると、
Textプロパティの文字の左側に表示されてしまいます。
そしてTextを消してみると、今度はValueプロパティの文字が表示されてしまいます。
Value値は、ポストバック時の処理のケース分けに使っているので消せません。。。
(ちなみにTreeViewコントロールも同じ動きでした・・・)
menuコントロールでのタブ型メニューはどのように作成するものなのでしょうか?
リストタグで実装するしかないのでしょうか?

ご存知でしたら教えてください。
よろしくお願いします。

ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-05-10 04:24
http://allabout.co.jp/internet/javascript/closeup/CU20070215A/
たぶんコレ。
Access
ぬし
会議室デビュー日: 2002/04/08
投稿数: 829
投稿日時: 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サンプル集
ベテラン
会議室デビュー日: 2006/11/10
投稿数: 64
投稿日時: 2008-05-12 17:40
>ぴあちゃんさん
回答ありがとうございます。
参考URL、確認させて頂いたのですが、探し方が悪いのか、
タブ型メニューの情報が見つかりませんでした・・・

>Accessさん
回答ありがとうございます。
既存のプログラムがmenuコントロールで作成されており、
それに修正を加えようとしている為、実現方法探していたのですが、
WEB上では例がみつかりませんでした。
教えて頂いたAjaxのコントロールを使って試してみます。
Access
ぬし
会議室デビュー日: 2002/04/08
投稿数: 829
投稿日時: 2008-05-13 07:59
引用:

教えて頂いたAjaxのコントロールを使って試してみます。


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サンプル集
ベテラン
会議室デビュー日: 2006/11/10
投稿数: 64
投稿日時: 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>
Access
ぬし
会議室デビュー日: 2002/04/08
投稿数: 829
投稿日時: 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

スキルアップ/キャリアアップ(JOB@IT)