- Mastering jQuery UI
- Vijay Joshi
- 1347字
- 2021-07-23 20:33:37
Designing the home page
Let's assume our imaginary company is called Cats and Dogs Store and it sells goods for cats and dogs. For this company, we will design a page that will contain a header with a logo on the left and some links on the right. There will be a two-column layout underneath it. The left column will be a menu with several links and the right column will have an accordion and a "shopping cart" box. Each link or section where we want to display a step of the tour will be given an ID. These IDs will be used in JavaScript to make the tour functional. After the page is designed, it will look like the this:
Writing markup for the page
Now that we have a basic idea about what the home page should look like, let's start writing some markup now. Using Notepad++ or your favorite text editor, write the following HTML markup in the index.html file:
<html>
<head>
<meta charset="utf-8">
<title>Creating a Website Tour</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
</head>
<body>
<div id="dialog"></div>
<div class="container">
</div>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/tour.js" type="text/javascript"></script>
</body>
</html>
The preceding code creates the skeleton of our page. In the head section, we linked the HTML page to the jQuery UI CSS file and just before closing the body tag, we included the jQuery source file, the jQuery UI JavaScript file, and the tour.js file.
Inside the body section, we defined an empty div with id dialog. This div element will be converted to dialog box using jQuery UI's dialog component to display the steps of the tour.
Next, we have a div with the container class that will wrap all the elements of the page. Inside the container class, we will first create the page header with the following HTML code:
<div class="header">
<div id="logo">Cats and Dogs Store</div>
<ul class="topLinks">
<li>Home</li>
<li>About Us</li>
<li id="contact">Contact Us</li>
<li id="startTour" title="Click to start Tour">Take a Tour</a></li>
</ul>
</div>
<div class="clear"> </div>
The header has two elements inside it. The first element is a div with an id logo and the second element is an unordered list ul with the class toplinks. This unordered list has four items inside it. The third list item has the id value contact. This list item will be used to show a tooltip with some contact details when the mouse hovers over it. The last list item with the id value startTour will act as a trigger button for starting the tour. After the header, there is an empty div with the class clear to clear the floats.
Now, we need to create two more div elements, one each for left and right columns, respectively. Write the following code after you have defined the header, as explained previously:
<div class="leftCol">
<ul id="menu">
<li>Home</li>
<li><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde magnam illum tempore eum a minima quisquam sunt sequi facere maxime in vel voluptates ea veritatis repellat at est natus quod.</small></li>
<li id="orders">Orders
<ul class="submenu">
<li><a>All Orders</a></li>
<li><a>Track Order</a></li>
<li><a>Another item</a></li>
</ul>
</li>
<li><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde magnam illum tempore eum a minima quisquam sunt sequi facere maxime in vel voluptates ea veritatis repellat at est natus quod.</small></li>
<li id="profile">Profile</li>
<li><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde magnam illum tempore eum a minima quisquam sunt sequi facere maxime in vel voluptates ea veritatis repellat at est natus quod.</small></li>
<li id="help">Help</li>
<li class="empty"><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde magnam illum tempore eum a minima quisquam sunt sequi facere maxime in vel voluptates ea veritatis repellat at est natus quod.</small></li>
<li id="lastLink">Last Link</li>
</ul>
</div>
<div class="rightCol">
<div id="accordion">
<h3 id="section1">Cat Posters</h3>
<div>
<p>
Cat posters available in different categories.<br>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
<ul>
<li>Cat 1</li>
<li>Cat 1</li>
<li>Cat 1</li>
</ul>
</p>
</div>
<h3 id="section2">Dog Posters</h3>
<div>
<p>
Dog posters available in different categories.<br>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
<ul>
<li>Cat 1</li>
<li>Cat 1</li>
<li>Cat 1</li>
</ul>
</p>
</div>
<h3 id="section3">Videos</h3>
<div>
<p>
Videos available in different categories.<br>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin
viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
<ul>
<li>Cat 1</li>
<li>Cat 1</li>
<li>Cat 1</li>
</ul>
</p>
</div>
</div>
<div id="cart">2 items</div>
</div>
<div class="clear"> </div>
First we created a div with class leftCol. We created an unordered list ul inside it that will act as a menu. This ul has some list items that will act as menu items but some are only placeholders with random text to make the page longer. Also, note that we assigned id values to some elements.
After leftCol, we created another div with the class rightCol. Inside it, there is yet another div with the id accordion. This div holds the markup that is required to create a jQuery UI accordion. Each panel of accordion consists of an h3 element and a div element. h3 will act as a header for that panel and div will become the body for that panel. Next to the accordion markup, there is another div that has the id cart.
This completes our HTML markup for the page and we are ready to assign CSS styling to the elements to make the page presentable.
Styling elements
Without any CSS styling to elements, HTML markup alone would make the page useless. To spice up the page, let's apply some CSS rules to decorate the page. In the head section, create a <style> block and write the following CSS rules for the different elements:
<style type="text/css">
body
{
font-family:arial,verdana;
font-size:12px;
margin: 0px auto;
width: 900px;
}
div.container
{
border: 1px solid #000;
float:left;
margin:10px auto 0;
padding:10px;
width: 100%;
}
.header
{
height: 100px; border: 1px solid;
}
#logo
{
border: 1px solid #000000;
float: left;
font-weight: bold;
height: 57px;
margin: 5px;
padding-top: 30px;
text-align: center;
width: 100px;
}
ul.topLinks
{
float: right;
list-style: none outside none;
margin: 20px 20px 0 0;
padding: 0;
text-align: right;
width: 70%;
}
ul.topLinks li
{
display: inline-block;
margin: 0;
padding: 0;
text-decoration: underline;
width: 15%;
cursor:pointer;
}
#startTour
{
color: #ff0000;
}
.leftCol
{
border: 1px solid #000;
float:left;
min-height:500px;
width:25%;
}
.rightCol
{
border: 1px solid #000;
float: right;
min-height:690px;
width: 75%;
}
ul#menu {
list-style:none;
margin:0;
padding:0;
}
ul#menu > li
{
padding:10px 5px 10px 10px;
border-top: 1px solid #000;
cursor:pointer;
font-weight:bold;
}
ul#menu > li:last-child
{
border-bottom: 1px solid #000;
}
#accordion
{
width:80%;
float:left;
padding:10px 5px;
}
#cart
{
border: 1px solid #000000;
float: right;
font-weight: bold;
height: 65px;
margin-right: 5px;
margin-top: 12px;
padding-top: 35px;
text-align: center;
width: 100px;
}
a
{
text-decoration:none;
}
.submenu li
{
padding:5px;
}
small
{
font-weight:normal;
}
.empty
{
height:150px;
}
footer
{
border: 1px solid;
padding: 10px 0px;
}
#dialog
{
display:none;
}
.clear
{
clear:both;
}
</style>
The preceding CSS rules will change the layout and look of the elements in the page. The div with the id logo will become a box and will be placed left in the header. The ul list with the class topLinks will be floated to the right. Inside it, the li with id tourStart has been set to a red color so that it could stand out as an indicator to start the tour.
The div with the classes leftCol and rightCol has been made 25% and 75% wide, respectively, and a border has been applied to both of them. Similarly, all the li elements inside the ul list, the leftCol div has been padded and border has been applied to them. For elements inside rightCol, we floated the div with id accordion and cart to the left and right, respectively. We have not written any CSS for the accordion because its styling will be taken care of by jQuery UI's theme after the accordion is initialized.
After all the markup has been applied, run the index.html file in your local web server. You will see a home page similar to the following one:
- Spring 5.0 By Example
- What's New in TensorFlow 2.0
- OpenShift開發指南（原書第2版）
- 少年輕松趣編程：用Scratch創作自己的小游戲
- Git高手之路
- Data Analysis with IBM SPSS Statistics
- INSTANT CakePHP Starter
- PLC編程及應用實戰
- 編程數學
- C語言課程設計
- C語言程序設計
- 精通Spring：Java Web開發與Spring Boot高級功能
- 編程的原則：改善代碼質量的101個方法
- JBoss AS 7 Development
- Manage Your SAP Projects with SAP Activate