- boot.closet.1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Boot Closet™에 오신 것을 환영합니다.</title>
<link rel="stylesheet" type="text/css" href="css/boot.closet.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#styleDropdown')
.change(function(){
var styleValue = $(this).val();
$('#detailsDisplay').load(
'getDetails.jsp',
{ style: styleValue }
);
})
.change();
});
</script>
</head>
<body id="bootCloset1">
<img id="banner" src="img/boot.closet.branding.png"/>
<form action="" id="orderForm">
<div id="detailFormContainer">
<h1>부츠를 선택해 주세요.</h1>
<div>
<label>스타일을 선택해 주세요.</label><br/>
<select id="styleDropdown">
<option value="">부츠의 스타일을 선택해 주세요.</option>
<option value="7177382">Caterpillar Tradesman Work Boot</option>
<option value="7269643">Caterpillar Logger Boot</option>
<option value="7141832">Chippewa 17" Engineer Boot</option>
<option value="7141833">Chippewa 17" Snakeproof Boot</option>
<option value="7173656">Chippewa 11" Engineer Boot</option>
<option value="7141922">Chippewa Harness Boot</option>
<option value="7141730">Danner Foreman Pro Work Boot</option>
<option value="7257914">Danner Grouse GTX Boot</option>
</select>
</div>
<div id="detailsDisplay"></div>
</div>
</form>
</body>
</html>
- getDetail.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:useBean id="item" class="java.util.HashMap"/>
<c:choose>
<c:when test="${param.style=='7141832'}">
<c:set target="${item}" property="name" value="Chippewa 17-inch Engineer Boot"/>
<c:set target="${item}" property="sku" value="7141832"/>
<c:set target="${item}" property="height" value="17 inches"/>
<c:set target="${item}" property="lining" value="Leather"/>
<c:set target="${item}" property="colors" value="Black <abbr>Oil-tanned</abbr>, Black Polishable"/>
<c:set target="${item}" property="price" value="$187.00"/>
<c:set target="${item}" property="features" value="<abbr>Oil-tanned</abbr> or polishable <abbr>full-grain</abbr> leather uppers. <abbr>Vibram</abbr> sole. <abbr>Goodyear welt</abbr>. Padded insole. Steel safety toe."/>
</c:when>
<c:when test="${param.style=='7173656'}">
<c:set target="${item}" property="name" value="Chippewa 11-inch Engineer Boot"/>
<c:set target="${item}" property="sku" value="7173656"/>
<c:set target="${item}" property="height" value="11 inches"/>
<c:set target="${item}" property="lining" value="None"/>
<c:set target="${item}" property="colors" value="Black, Crazy Horse"/>
<c:set target="${item}" property="price" value="$167.00"/>
<c:set target="${item}" property="features" value="<abbr>Oil-tanned</abbr> <abbr>full-grain</abbr> leather uppers. <abbr>Vibram</abbr> sole. <abbr>Goodyear welt</abbr>. Padded insole. Steel safety toe. Texon® insole."/>
</c:when>
<c:when test="${param.style=='7141922'}">
<c:set target="${item}" property="name" value="Chippewa Harness Boot"/>
<c:set target="${item}" property="sku" value="7141922"/>
<c:set target="${item}" property="height" value="13 inches"/>
<c:set target="${item}" property="lining" value="Leather"/>
<c:set target="${item}" property="colors" value="Black, Crazy Horse"/>
<c:set target="${item}" property="price" value="$187.00"/>
<c:set target="${item}" property="features" value="<abbr>Full-grain</abbr> leather uppers. Leather lining. <abbr>Vibram</abbr> sole. <abbr>Goodyear welt</abbr>."/>
</c:when>
<c:when test="${param.style=='7177382'}">
<c:set target="${item}" property="name" value="Caterpillar Tradesman Work Boot"/>
<c:set target="${item}" property="sku" value="7177382"/>
<c:set target="${item}" property="height" value="6 inches"/>
<c:set target="${item}" property="lining" value="Leather"/>
<c:set target="${item}" property="colors" value="Honey, Peanut"/>
<c:set target="${item}" property="price" value="$87.00"/>
<c:set target="${item}" property="features" value="<abbr>Full-grain</abbr> <abbr>oil-tanned</abbr> leather. Nylon mesh lining. Ortholite sock liner. EVA midsole. T84V Rubberlon outsole."/>
</c:when>
<c:when test="${param.style=='7141730'}">
<c:set target="${item}" property="name" value="Danner Foreman Pro Work Boot"/>
<c:set target="${item}" property="sku" value="7141730"/>
<c:set target="${item}" property="height" value="10 inches"/>
<c:set target="${item}" property="lining" value="Leather"/>
<c:set target="${item}" property="colors" value="Honey, Brown"/>
<c:set target="${item}" property="price" value="$287.00"/>
<c:set target="${item}" property="features" value="Alkali-resistant <abbr>full-grain</abbr> leather. <abbr>Cambrelle</abbr> nylon lining. Fiberglass shank. <abbr>Vibram</abbr> 4014 Cristy sole. <abbr>Stitch-down</abbr> construction."/>
</c:when>
<c:when test="${param.style=='7141833'}">
<c:set target="${item}" property="name" value="Chippewa 17-inch Snakeproof Boot"/>
<c:set target="${item}" property="sku" value="7141833"/>
<c:set target="${item}" property="height" value="17 inches"/>
<c:set target="${item}" property="lining" value="Leather"/>
<c:set target="${item}" property="colors" value="Russet"/>
<c:set target="${item}" property="price" value="$147.00"/>
<c:set target="${item}" property="features" value="<abbr>Full-grain</abbr> leather foot. 1000 Denier <abbr>Cordura</abbr> Viper cloth shaft. <abbr>Goodyear welt</abbr>. Leather Lining. Body Cushion Insole. <abbr>Vibram</abbr> Robinson Outsole."/>
</c:when>
<c:when test="${param.style=='7257914'}">
<c:set target="${item}" property="name" value="Danner Grouse GTX Boot"/>
<c:set target="${item}" property="sku" value="7257914"/>
<c:set target="${item}" property="height" value="8 inches"/>
<c:set target="${item}" property="lining" value="<abbr>Gore-Tex</abbr>"/>
<c:set target="${item}" property="colors" value="Brown"/>
<c:set target="${item}" property="price" value="$207.00"/>
<c:set target="${item}" property="features" value="<abbr>Full-grain</abbr> leather foot. 1000 Denier <abbr>Cordura</abbr> Viper cloth shaft. <abbr>Gore-Tex</abbr> lining. Stich-down construction."/>
</c:when>
<c:when test="${param.style=='7269643'}">
<c:set target="${item}" property="name" value="Caterpillar Logger Boot"/>
<c:set target="${item}" property="sku" value="7269643"/>
<c:set target="${item}" property="height" value="8 inches"/>
<c:set target="${item}" property="lining" value="<abbr>Cambrelle</abbr>"/>
<c:set target="${item}" property="colors" value="Black"/>
<c:set target="${item}" property="price" value="$157.00"/>
<c:set target="${item}" property="features" value="<abbr>Full-grain</abbr> leather. <abbr>Cambrelle</abbr>® lining. Steel safety toe. Electrical hazard protection. Poliyou® cushion insole. Rubber lug outsole."/>
</c:when>
<c:otherwise>
<c:set target="${item}" property="name" value="---"/>
<c:set target="${item}" property="sku" value="---"/>
<c:set target="${item}" property="height" value="---"/>
<c:set target="${item}" property="lining" value="---"/>
<c:set target="${item}" property="colors" value="---"/>
<c:set target="${item}" property="price" value="---"/>
<c:set target="${item}" property="features" value="---"/>
</c:otherwise>
</c:choose>
<div>
<label>품명:</label> ${item.name}
</div>
<div>
<label>제품번호:</label> ${item.sku}
</div>
<div>
<label>높이:</label> ${item.height}
</div>
<div>
<label>색상:</label> ${item.colors}
</div>
<div>
<label>안감:</label> ${item.lining}
</div>
<div>
<label>오늘의 가격:</label> ${item.price}
</div>
<div>
<label>특징:</label> ${item.features}
</div>
<div align="center">
<c:if test="${item.sku != '---'}">
<img id="itemPhoto" src="photos/${item.sku}.png"/>
</c:if>
</div>
'jQuery' 카테고리의 다른 글
| jQuery In Action chapter 1-2 (0) | 2009.12.19 |
|---|---|
| jQuery In Action chapter1-1 (0) | 2009.12.19 |
| 객체지향 자바스크립트 2-1 (0) | 2009.12.14 |
| jQuery 유용한 사이트 (퍼옴) (0) | 2009.09.26 |
| jQuery 5 (0) | 2009.09.26 |