jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <meta name="keywords" content="jQuery Tabs, Tabs Widget, TabView" /> <meta name="description" content="The jqxTabs is breaking the content into multiple sections. You can populate it from 'UL' for the tab titles and 'DIV' for it's contents." /> <title id='Description'>This demo shows how to display images in jqxTabs. </title> <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="../../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { //Creating jqxTabs $('#jqxTabs').jqxTabs({ width: getWidth("Tabs"), selectionTracker: true, animationType: 'fade' }); }); </script> <style type="text/css"> .big-image { float: left; margin-right: 15px; margin-bottom: 15px; border: 1px solid #999; background: #fff; padding: 3px; } .small-image { border: 1px solid #ccc; background: #fff; padding: 3px; } .content-container { padding-left: 15px; padding-top: 15px; padding-right: 15px; } .important-text { font-size: 13px; color: #000; } .more-text { color: #444; font-size: 11px; font-style: italic; } </style> </head> <body class='default'> <div id='jqxWidget'> <div style="float: left"> <div id='jqxTabs' class='jqx-rc-all'> <ul style="margin-left: 40px;" id="unorderedList"> <li> <div style="height: 40px;"> <img style='float: left;' width='32' height='32' src="../../../images/building_small.jpg" alt="" class="small-image" /> <div style="float: left; margin-left: 6px; text-align: center; margin-top: 5px; font-size: 13px;"> 30 St Mary<br /> Axe</div> </div> </li> <li> <div style="height: 40px;"> <img style='float: left;' width='32' height='32' src="../../../images/building2_small.jpg" alt="" class="small-image" /> <div style="float: left; margin-left: 6px; text-align: center; margin-top: 5px; font-size: 13px;"> Burj Al Arab</div> </div> </li> <li> <div style="height: 40px;"> <img style='float: left;' width='32' height='32' src="../../../images/building3_small.jpg" alt="" class="small-image" /> <div style="float: left; margin-left: 6px; text-align: center; margin-top: 5px; font-size: 13px;"> The Willis <br /> Tower</div> </div> </li> </ul> <div class="content-container"> <div style="height: 400px"> <img src="../../../images/building_big.jpg" alt="" class="big-image" /> <h3> 30 St Mary Axe</h3> <p class="important-text"> the Swiss Re Building (colloquially referred to as the Gherkin), is a skyscraper in London's main financial district, the City of London, completed in December 2003 and opened at the end of May 2004. With 40 floors, the tower is 180 metres (591 ft) tall, and stands on the former site of the Baltic Exchange building, which was severely damaged on 10 April 1992 by the explosion of a bomb placed by the Provisional IRA. </p> <div class="more-text"> The building is on the former site of the Baltic Exchange building, the headquarters of a global marketplace for ship sales and shipping information. On 10 April 1992 the Provisional IRA detonated a bomb close to the Exchange, severely damaging the historic Exchange building and neighbouring structures. The UK government's statutory adviser on the historic environment, English Heritage, and the City of London governing body, the City of London Corporation, were keen that any redevelopment must restore the building's old façade onto St Mary Axe. The Exchange Hall was a celebrated fixture of the ship trading company. </div> </div> </div> <div class="content-container"> <div style="height: 400px"> <img src="../../../images/building2_big.jpg" alt="" class="big-image" /> <h3> Burj Al Arab</h3> <p class="important-text"> is a 5-star luxury hotel located in Dubai, United Arab Emirates. At 321 m (1,053 ft), it is the fourth tallest hotel in the world. Burj Al Arab stands on an artificial island 280 m (920 ft) out from Jumeirah beach, and is connected to the mainland by a private curving bridge. It is an iconic structure whose shape mimics the sail of a ship. </p> <div class="more-text"> The beachfront area where Burj Al Arab and Jumeirah Beach Hotel are located was previously called Chicago Beach. The hotel is located on an island of reclaimed land 280 meters offshore of the beach of the former Chicago Beach Hotel. The locale's name had its origins in the Chicago Bridge & Iron Company which at one time welded giant floating oil storage tankers on the site. The old name persisted after the old Hotel was demolished in 1997. Dubai Chicago Beach Hotel remained as the Public Project Name for the construction phase of Burj Al Arab Hotel until Sheikh Mohammed bin Rashid Al Maktoum announced the new name. </div> </div> </div> <div class="content-container"> <div style="height: 400px"> <img src="../../../images/building3_big.jpg" alt="" class="big-image" /> <h3> The Willis Tower</h3> <p class="important-text"> (formerly named, and still commonly referred to as, the Sears Tower) is a 108-story, 1,451-foot (442 m) skyscraper in Chicago, Illinois. At the time of its completion in 1973, it was the tallest building in the world, surpassing the World Trade Center towers in New York, and it held this rank for nearly 25 years. The Willis Tower is the tallest building in the United States and the fifth-tallest freestanding structure in the world, as well as the fifth-tallest building in the world to the roof. </p> <div class="more-text"> Although Sears's naming rights expired in 2003, the building continued to be called the Sears Tower for several years. In March 2009, London-based insurance broker Willis Group Holdings agreed to lease a portion of the building, and obtained the building's naming rights. On July 16, 2009, the building was officially renamed the Willis Tower. </div> </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>