Java Reference
In-Depth Information
8.font-size: 12px;
9.font-weight: bold;
10.text-align: center;
11.position: relative;
12.}
13.
14.span.tooltip_message:hover {
15.background-color: #04FF97;
16.}
17.
18.div.message {
19.background-color: #04FF97;
20.color: #000000;
21.position: absolute;
22.left: 18px;
23.top: -18px;
24.z-index: 1000000;
25.text-align: left;
26.width: 280px;
27.}
This CSS and jQuery code in Listing 2-40 and Listing 2-41 are included in leftColumn.jsp ,
as illustrated in Listing 2-42.
Listing 2-42. Accessing CSS and jQuery Files in leftColumn.jsp
1.<link rel="stylesheet" href="css/bookstore.css" type="text/css" />
2.<script src="js/bookstore.js" type="text/javascript"></script>
3.<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
Line 1 : This is the externalized CSS file for the rules illustrated in Listing 2-41
Line 2 : This is the externalized JavaScript file for the jQuery function in
Listing 2-40
Line 3 : Line 3 specifies the jQuery library we are using.
Now we will begin with the search-by-keyword functionality in our web application. Listing 2-43
illustrates the search field markup.
Listing 2-43. Search Field Markup
1.<form class="search">
2.<input type="hidden" name="action" value=" search " /><input id="text"
3.type="text" name="keyWord" size="12" /><span
4.class="tooltip_message">?</span>
5.<p />
6.<input id="submit" type="submit" value="Search" />
7.</form>
Line 2 : This line specifies the action value search .
Line 6 : This line submits the request.
 
Search WWH ::




Custom Search