Response title
This is preview!
I am trying to do vertical tabs
in Using jQuery
•
9 years ago
Please look at this link. I trying to get this effect with vertical tabs.
This is dynamic with ajax and c# to and
<div id="bookContainer">
<div id="book"></book>
</div>
$("#BookContainer").append(ContentMenu);
function GetContents(BookID) {
$.ajax({
type: "POST", // AJAX type post
url: "tabletbook.aspx/GetContentsMenu",
data: '{"BookID": "' + BookID + '"}',
contentType: "application/json; charset=utf-8", //This is
dataType: "json", //We need to specifiy JSON as to have the
success: function (msg) { // The msg that comes back has in
ContentMenu = msg.d; //Lets copy the links to a global array
}
});
}
C#
- [WebMethod(true)]
- public static string GetContentsMenu(int BookID)
- {
- var BDC = new BookDC();
- var fb = BDC.GetBook(BookID);
- var sb = new StringBuilder();
- List<spGetChaptersResult> chaps = BDC.DataContext.spGetChapters(BookID).ToList();
- List<string> ChapsString = new List<string>();
- foreach (spGetChaptersResult chptr in chaps)
- {
- ChapsString.Add(chptr.PageNumber.ToString() + " " + " " + chptr.ChapterTitle);
- }
- string[] SortedChapterPages = ChapsString.ToArray();
- Array.Sort(SortedChapterPages, new Common.NaturalComparer());
- sb.Append("<div class='tabs-right'>");
- foreach (string scp in SortedChapterPages)
- {
- string outp = scp.Replace("'", "");
- sb.AppendLine("<ul>");
- sb.AppendLine("<li>");
- sb.AppendLine("<a href='#' id='pgNum'>");
- sb.AppendLine(" ");
- sb.AppendLine(outp);
- sb.AppendLine(" ");
- sb.AppendLine("</a>");
- sb.AppendLine("</li>");
- sb.AppendLine("</ul>");
- }
- sb.AppendLine("</div>");
- string cpret = sb.ToString();
- return cpret;
- }
css code:
- .tabs-right
- {
- height: 100%;
- font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
- -moz-transform: scale(0.7) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
- -webkit-transform: scale(0.7) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
- -o-transform: scale(0.7) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
- -ms-transform: scale(0.7) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
- transform: scale(0.7) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
- -webkit-border-radius: 50px;
- border-radius: 50px;
- }
- .tabs-right >ul {
- float: left;
- width:250px;
- top:0;
- display: block;
- border: 1px solid #DDD;
- padding:0;
- -webkit-border-radius: 50px;
- border-radius: 50px;
- }
- .tabs-right >ul >li {
- width: 250px;
- height:15px;
- list-style-type: none;
- display: block;
- font-size: 1.11em;
- border-right-width: 0;
- border: 1px solid #000;
- margin: auto;
- padding: 10px 15px !important;
- background: whiteSmoke; /* Old browsers */
- background: -moz-linear-gradient(top, #000000 0%, #f2f2f2 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #f2f2f2)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #000000 0%, #f2f2f2 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #000000 0%, #f2f2f2 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #000000 0%, #f2f2f2 100%); /* IE10+ */
- background: linear-gradient(top, #000000 0%, #f2f2f2 100%); /* W3C */
- -webkit-border-radius: 50px;
- border-radius: 50px;
- }
- .tabs-right >ul >li >a
- {
- color:white;
- width:100%;
- }
- .tabs-right > div {
- height: 35em;
- }
1