Adding Images to C1Tabs using jQuery

C1Tabs provides a fantastic way to show your content in Tabs and moreover can put in anything as the content of a C1TabPage. This blog provides an easy way to add an Image in the Header of each C1TabPage (apart from the usual text) that gives them an idea of what that tab contains. You can easily accomplish this with just as little as 4-5 lines of code using jQuery.

Adding C1TabPages

First step is to add C1TabPages to C1Tabs. This can be done using the C1Tabs Designer at design time. You can also just drag and drop C1Tabs control from the toolbox and add the following html.

<wijmo:C1Tabs ID="C1Tabs1" runat="server">  
 <Pages>  
      <wijmo:C1TabPage runat="server" Text="Tab1" ID="Tab1">Tab 1 Content </wijmo:C1TabPage>  
      <wijmo:C1TabPage runat="server" Text="Tab2" ID="Tab2">Tab 2 Content </wijmo:C1TabPage>  
 </Pages>  
 </wijmo:C1Tabs>

Adding Images

Now that you've added C1TabPages, it's time to add Images to the headers. The following jQuery code makes this possible so easily.

<script type="text/javascript">  
 $(document).ready(function () {  
 $("#C1Tabs1").find("li").each(function (index, e) {  
 var cnt = index + 1;  
 $(this).prepend("<img src='Images/TabPage" + cnt + ".png' alt='Image' style='margin-left:5px; margin-top:10px; width:20px' />");  
 $(this).find("a").css("float", "right");  
 });  
 });  
 </script>

Simple! Isn't it! You can download the sample for the complete implementation. Download Sample