jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>In this sample, jqxNavigationBar's width and height properties are set to "100%" so the widget will fit to its container element.</title> <style type="text/css"> .bookContainer { width: 500px; } .book { width: 105px; height: 215px; float: left; margin-left: 5px; } </style> <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="../../../scripts/demos.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxnavigationbar.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxsplitter.js"></script> <script type="text/javascript"> $(document).ready(function () { // content for different pages var Tolkien = '<div class="bookContainer"><div class="book"><img style="float: left" src="../../../images/books/The Hobbit.JPG" /><i>The Hobbit</i></div><div class="book"><img src="../../../images/books/The Lord of the Rings.jpg" /><i>The Lord of the Rings</i></div><div class="book"><img src="../../../images/books/The Silmarillion.JPG" /><i>The Silmarillion</i></div></div>'; var Brooks = '<div class="bookContainer"><div class="book"><img src="../../../images/books/The Sword of Shannara.jpg" /><i>The Sword of Shannara</i></div><div class="book"><img src="../../../images/books/The Elfstones of Shannara.jpg" /><i>The Elfstones of Shannara</i></div><div class="book"><img src="../../../images/books/The Wishsong of Shannara.jpg" /><i>The Wishsong of Shannara</i></div><div class="book"><img src="../../../images/books/Running with the Demon.jpg" /><i>Running with the Demon</i></div><div class="book"><img src="../../../images/books/A Knight of the Word.jpg" /><i>A Knight of the Word</i></div><div class="book"><img src="../../../images/books/Angel Fire East.jpg" /><i>Angel Fire East</i></div></div>'; var Rowling = '<div class="bookContainer"><div class="book"><img src="../../../images/books/Harry Potter and the Philosopher's Stone.jpg" /><i>Harry Potter and the Philosopher's Stone</i></div><div class="book"><img src="../../../images/books/Harry Potter and the Chamber of Secrets.jpg" /><i>Harry Potter and the Chamber of Secrets</i></div><div class="book"><img src="../../../images/books/Harry Potter and the Prisoner of Azkaban.jpg" /><i>Harry Potter and the Prisoner of Azkaban</i></div><div class="book"><img src="../../../images/books/Harry Potter and the Goblet of Fire.jpg" /><i>Harry Potter and the Goblet of Fire</i></div><div class="book"><img src="../../../images/books/Harry Potter and the Order of the Phoenix.jpg" /><i>Harry Potter and the Order of the Phoenix</i></div><div class="book"><img src="../../../images/books/Harry Potter and the Half-Blood Prince.jpg" /><i>Harry Potter and the Half-Blood Prince</i></div><div class="book"><img src="../../../images/books/Harry Potter and the Deathly Hallows.jpg" /><i>Harry Potter and the Deathly Hallows</i></div></div>'; var Wells = '<div class="bookContainer"><div class="book"><img src="../../../images/books/The Time Machine.JPG" /><i>The Time Machine</i></div><div class="book"><img src="../../../images/books/The War of the Worlds.jpg" /><i>The War of the Worlds</i></div></div>'; var Green = '<div class="bookContainer"><div class="book"><img src="../../../images/books/Deathstalker.jpg" /><i>Deathstalker</i></div><div class="book"><img src="../../../images/books/Deathstalker Rebellion.jpg" /><i>Deathstalker Rebellion</i></div><div class="book"><img src="../../../images/books/Deathstalker War.jpg" /><i>Deathstalker War</i></div><div class="book"><img src="../../../images/books/Deathstalker Honor.jpg" /><i>Deathstalker Honor</i></div><div class="book"><img src="../../../images/books/Deathstalker Destiny.jpg" /><i>Deathstalker Destiny</i></div></div>'; var Lovecraft = '<div class="bookContainer"><div class="book"><img src="../../../images/books/The Call of Cthulhu.jpg" /><i>The Call of Cthulhu</i></div><div class="book"><img src="../../../images/books/At the Mountains of Madness.jpg" /><i>At the Mountains of Madness</i></div></div>'; var King = '<div class="bookContainer"><div class="book"><img src="../../../images/books/Carrie.jpg" /><i>Carrie</i></div><div class="book"><img src="../../../images/books/Night Shift.jpg" /><i>Night Shift</i></div><div class="book"><img src="../../../images/books/It.jpg" /><i>It</i></div><div class="book"><img src="../../../images/books/The Dark Half.jpg" /><i>The Dark Half</i></div></div>'; $("#jqxNavigationBar").jqxNavigationBar({ height: "100%", width: "100%", expandMode: "singleFitHeight" }); var themeClass = "jqx-widget-header" + theme; $("#header").addClass(themeClass); var booksNum = 0; var liElements = $("#jqxNavigationBar li"); $(liElements).css({ "cursor": "pointer", "text-decoration": "underline" }); $("#bookShelf").html(Tolkien); $(".book img").css("cursor", "pointer"); $(".book img").click(function () { booksNum += 1; $("#text").html("Added " + booksNum + (booksNum == 1 ? " book" : " books") + " to shopping cart."); }); $.each(liElements, function (index, value) { $("#jqxNavigationBar li:eq(" + index + ")").click(function () { switch (index) { case 0: $("#bookShelf").html(Tolkien); break; case 1: $("#bookShelf").html(Brooks); break; case 2: $("#bookShelf").html(Rowling); break; case 3: $("#bookShelf").html(Wells); break; case 4: $("#bookShelf").html(Green); break; case 5: $("#bookShelf").html(Lovecraft); break; case 6: $("#bookShelf").html(King); break; }; $(".book img").css("cursor", "pointer"); $(".book img").click(function () { booksNum += 1; $("#text").html("Added " + booksNum + (booksNum == 1 ? " book" : " books") + " to shopping cart."); }); }); }); }); </script> </head> <body> <div style="width: 680px; height: 450px; border: none;"> <div id="leftPanel" style="width: 225px; height: 100%; float: left;"> <div id="jqxNavigationBar"> <div> Fantasy</div> <div> <ul> <li>J. R. R. Tolkien</li> <li>Terry Brooks</li> <li>J. K. Rowling</li> </ul> </div> <div> Science Fiction</div> <div> <ul> <li>H. G. Wells</li> <li>Simon R. Green</li> </ul> </div> <div> Horror</div> <div> <ul> <li>H. P. Lovecraft</li> <li>Stephen King</li> </ul> </div> </div> </div> <div style="width: 450px; height: 100%; float: left;" id="rightPanel"> <div id="rightPanelContent" class="jqx-widget-content"> <div id="bookShelf" style="margin: 5px; width: 444px; height: 425px;"> </div> <div id="shoppingCart" style="float: left; margin-left: 5px;"> <img style="float: left;" width="16" height="16" src="../../../images/shopping_cart.png" /> <div id="text"> Shopping cart is empty. </div> </div> </div> </div> </div> <div style="position: absolute; bottom: 5px; right: 5px;"> <a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a> </div> </body> </html>