The C1Menu control has an extensive client-side API. This topic illustrates how to call the client-side methods using the same patterns you would see in a jQuery UI using the Source View.
- In Source View, add the following markup between the
<cc1:C1Menu>tags.To write code in Source View
<Items><cc1:C1MenuItem Text="MenuItem" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem2" Text="Breaking News" runat="server"><Items><cc1:C1MenuItem runat="server" Header="true" Text="header2"></cc1:C1MenuItem><cc1:C1MenuItem runat="server" Separator="true"></cc1:C1MenuItem><cc1:C1MenuItem runat="server" Text="Entertainment"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem6" runat="server" Text="Politics"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem7" runat="server" Text="A&E"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem8" runat="server" Text="Sports"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem9" runat="server" Text="Local"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem10" runat="server" Text="Health"></cc1:C1MenuItem></Items></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem11" runat="server" Text="Entertainment"><Items><cc1:C1MenuItem ID="C1MenuItem12" runat="server" Text="Celebrity news"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem13" runat="server" Text="Gossip"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem14" runat="server" Text="Movies"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem15" runat="server" Text="Music"><Items><cc1:C1MenuItem ID="C1MenuItem16" runat="server" Text="Alternative"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem17" runat="server" Text="Country"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem18" runat="server" Text="Dance"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem19" runat="server" Text="Electronica"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem20" runat="server" Text="Metal"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem21" runat="server" Text="Pop"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem22" runat="server" Text="Rock"><Items><cc1:C1MenuItem ID="C1MenuItem23" runat="server" Text="Bands"><Items><cc1:C1MenuItem ID="C1MenuItem24" runat="server" Text="Dokken"></cc1:C1MenuItem></Items></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem25" runat="server" Text="Fan Clubs"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem26" runat="server" Text="Songs"></cc1:C1MenuItem></Items></cc1:C1MenuItem></Items></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem27" runat="server" Text="Slide shows"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem28" runat="server" Text="Red carpet"></cc1:C1MenuItem></Items></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem29" Text="Finance" runat="server"><Items><cc1:C1MenuItem ID="C1MenuItem30" Text="Personal" runat="server"><Items><cc1:C1MenuItem ID="C1MenuItem31" Text="Loans" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem32" Text="Savings" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem33" Text="Mortgage" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem34" Text="Debt" runat="server"></cc1:C1MenuItem></Items></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem35" Text="Business" runat="server"></cc1:C1MenuItem></Items></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem36" Text="Food & Cooking" runat="server"><Items><cc1:C1MenuItem ID="C1MenuItem37" Text="Breakfast" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem38" Text="Lunch" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem39" Text="Dinner" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem40" Text="Dessert" runat="server"><Items><cc1:C1MenuItem ID="C1MenuItem41" Text="Dump Cake" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem42" Text="Doritos" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem43" Text="Both please" runat="server"></cc1:C1MenuItem></Items></cc1:C1MenuItem></Items></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem44" Text="Lifestyle" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem45" Text="News" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem46" Text="Politics" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem47" Text="Sports" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem48" Text="Novels" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem49" Text="Magazine" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem50" Text="Books" runat="server"></cc1:C1MenuItem><cc1:C1MenuItem ID="C1MenuItem51" Text="Education" runat="server"></cc1:C1MenuItem></Items> - After the closing
<cc1:C1Menu>tag, insert the following markup to create the button controls.To write code in Source View
<p>
<input type="button" id="previous" value="previous" /><input type="button" id="next" value="next" /><input type="button" id="previousPage" value="previousPage" /><input type="button" id="nextPage" value="nextPage" /></p> - Use the following script to call the client-side functions.
To write code in Source View
<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++;});}); - Press F5 to run your program. The menu should resemble the following image.
