C1Menu コントロールは、大規模なクライアント側 API を備えています。このトピックでは、ソースビューで、jQuery UI に見られる同じパターンを使用してクライアント側メソッドを呼び出す方法を例示します。
- ソースビューで、次のマークアップを
<cc1:C1Menu>タグの間に追加します。追加するマークアップ
ソースビュー コードのコピー<Items>
<cc1:C1MenuItem Text="MenuItem" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="新着" runat="server">
<Items>
<cc1:C1MenuItem runat="server" Header="true" Text="ヘッダー２">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Separator="true">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="エンタメ">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="政治">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="国際">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="文化">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="社会">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="天気">
</cc1:C1MenuItem>
</Items>
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="エンタメ">
<Items>
<cc1:C1MenuItem runat="server" Text="エンタメトップ">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="舞台">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="映画">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="音楽">
<Items>
<cc1:C1MenuItem runat="server" Text="オルタナティブ">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="カントリー">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="ダンス">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="エレクトロニカ">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="メタル">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="ポップ">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="ロック">
<Items>
<cc1:C1MenuItem runat="server" Text="バンド">
<Items>
<cc1:C1MenuItem runat="server" Text="ドッケン">
</cc1:C1MenuItem>
</Items>
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="ファン クラブ">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="歌曲">
</cc1:C1MenuItem>
</Items>
</cc1:C1MenuItem>
</Items>
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="スライドショー">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="赤い絨毯">
</cc1:C1MenuItem>
</Items>
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="金融" runat="server">
<Items>
<cc1:C1MenuItem Text="個人" runat="server">
<Items>
<cc1:C1MenuItem Text="ローン" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="貯蓄" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="貸付金" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="借金" runat="server">
</cc1:C1MenuItem>
</Items>
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="企業" runat="server">
</cc1:C1MenuItem>
</Items>
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="スポーツ" runat="server">
<Items>
<cc1:C1MenuItem Text="野球" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="サッカー" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="ゴルフ" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="一般" runat="server">
<Items>
<cc1:C1MenuItem Text="テニス" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="水泳" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="ラグビー" runat="server">
</cc1:C1MenuItem>
</Items>
</cc1:C1MenuItem>
</Items>
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="生活" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="ニュース" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="政治" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="スポーツ" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="小説" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="マガジン" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="ブック" runat="server">
</cc1:C1MenuItem>
<cc1:C1MenuItem Text="教育" runat="server">
</cc1:C1MenuItem>
</Items> - 終了タグ
<cc1:C1Menu>の後に、次のマークアップを挿入して、ボタンコントロールを作成します。ソースビュー コードのコピー<p>
<input type="button" value="前へ" />
<input type="button" value="次へ" />
<input type="button" value="前のページ" />
<input type="button" value="次のページ" />
</p> - 次のスクリプトを使用して、クライアント側関数を呼び出します。
ソースビュー コードのコピー<script type="text/javascript">
var count = 0;
$(document).ready(function () {
$("#previous").click(function () {
$("#<%= Menu1.ClientID %>").focus().c1menu("previous");
count++;
});
$("#next").click(function () {
$("#<%= Menu1.ClientID %>").focus().c1menu("next");
count++;
});
$("#previousPage").click(function () {
if (count === 0) {
$("#<%= Menu1.ClientID %>").find(".wijmo-wijmenu-link:first").click();
}
$("#<%= Menu1.ClientID %>").c1menu("previousPage");
count++;
}); $("#nextPage").click(function () {
if (count === 0) {
$("#<%= Menu1.ClientID %>").find(".wijmo-wijmenu-link:first").click();
}
$("#<%= Menu1.ClientID %>").c1menu("nextPage");
count++;
});
});
</script> - ［F5］を押して、プログラムを実行します。メニューは、次の図のようになります。
