<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DragonFlight</title>
<link href="css/SearchFlight.css" rel="stylesheet"type="text/css">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/SearchFlight.js"></script>
<style type="text/css">
.*{
margin:0;
padding:0;
}
/* banner begin*/
.banner{
width:100%;
height:80px;
line-height: 65px;
text-align: left;
margin-left:65px;
padding-left: 160px;
font-family: arial bold;
font-size: 40px;
background: url(http://www.websbook.com/upimg/litimg/080214/03203011303.jpg) no-repeat left center;
}/* banner end*/
/* main-navigation begin */
.main-navigation {
width: 100%;
height:50px;
text-align: center;
display: inline-block;
background: #3b3c3b;
}
.main-navigation ul {
display: block;
list-style-type: none;
width:80%;
height:44px;
margin:3px auto;
}
.main-navigation ul li {
float: left;
display: inline-block;
height:44px;
padding: 0px 10px;
}
.main-navigation ul li a {
float: left;
display: inline-block;
height:45%;
line-height: 70%;
padding: 13px 5px;
font: bold 12px/12px Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.main-navigation ul li a:hover {
background-color: #fff;
color: #000;
border-radius:2px;
}/* main-navigation end */
/* base_top begin */
.base_top{
background: url(http://image.so.com/v?ie=utf-8&src=hao_360so&q=travel&fromurl=http%3A%2F%2Fmy.pclady.com.cn%2Fp%2F1238671.html#ie=utf-8&src=hao_360so&q=travel&fromurl=http%3A%2F%2Fmy.pclady.com.cn%2Fp%2F1238671.html&lightboxindex=5&id=8dcafcdf5f48fd304bce18a6751a231d&multiple=0&itemindex=0&dataindex=30) no-repeat center center;
}
#search_box {
width: 50%;
margin: 5px auto;
z-index: 10;
border-radius: 6px;
color: #000;
font-size: 14px;
font-family: Tahoma, Arial, ‘Hiragino Sans GB‘, "Microsoft Yahei", \5b8b\4f53, sans-serif;
padding: 5px;
background-color: #3498db;
}
.search-title .flight-tit {
width: 228px;
}
.search-title h3 {
margin-top: 4px;
line-height: 45px;
text-align: center;
color: #fff;
font-size: 25px;
font-family: "Microsoft Yahei",arial,sans-serif;
font-weight: 300;
border: solid #3498db;
border-width: 1px 1px 0;
border-radius: 6px;
}
.form_group {
margin: 0 0 15px;
position: relative;
line-height: 30px;
}
.search_filter,.search_filter form {
display: block;
margin-top: 0em;
}
.search_form {
position: relative;
overflow: hidden;
margin: 0 auto;
padding:10px 28px;
border-radius: 5px;
background-color: #fff;
color: #333;
font-size: 14px;
}
.search_form .form_group .form_fields label input{
width:50px;
display:inline-block;
margin:0;
padding:0;
}
.form_title{
float:left;
padding-right:5px;
}
/* .search_form .ico_info {
display: inline-block;
vertical-align: middle;
vertical-align: middle;
_vertical-align: -4px;
width: 12px;
height: 12px;
background-position: -210px -114px;
} */
.form_fields {
margin-left: 70px;
}
.input_radio{
margin-left: 23px;
padding-right: 10px;
}
.input_txt {
width: 322px;
}
.input_txt {
padding: 4px 0 4px 3px;
outline: medium none;
border-width: 1px;
border-style: solid;
border-color: #BBB #DDD #DDD #BBB;
box-shadow: 1px 1px 1px #DDD inset;
font-size: 14px;
font-family: Tahoma, Arial, ‘Hiragino Sans GB‘, "Microsoft Yahei", \5b8b\4f53, sans-serif;
height: 20px;
line-height: 20px;
}
.watermark, .inputSel {
color: #999 !important;
}
.clearfix, .clearfix .form_group {
display: inline-block;
}
.search-traveler-types .form_title {
width: 61px;
top: 5px;
}
.multi_search_content .multiTitle{
width:40px;
}
.search-traveler-types .form_group .form_fields {
margin-left: 3px;
height:35px;
}
.search_form select {
padding: 2px;
_padding: 0;
height:25px;
width: 105px;
border: 1px solid #D7D7D7;
font-family: Arial, ‘Hiragino Sans GB‘, "microsoft yahei",sans-serif;
}
option {
font-weight: normal;
display: block;
padding: 0px 2px 1px;
min-height: 1.2em;
}
.flight_direct{
float:left;
}
.Nonstop{
display: inline-block;
width:150px;
height:18px;
line-height: 18px;
text-align: center;
margin-left:45px;
}
.multi_form_group{
margin: 15px 10px;
position: relative;
line-height: 30px;
width:100%;
overflow: hidden;
}
.multi_label{
display: inline-block;
height:40px;
line-height: 40px;
margin: 0 auto;
text-align: center;
}
.multi_form_group .multi_form_content{
width:130px;
padding: 4px 0 4px 3px;
outline: medium none;
border: 1px solid;
border-color: #BBB #DDD #DDD #BBB;
box-shadow: 1px 1px 1px #DDD inset;
font-size: 14px;
font-family: Tahoma, Arial, ‘Hiragino Sans GB‘, "Microsoft Yahei", \5b8b\4f53, sans-serif;
height: 20px;
line-height: 20px;
}
.form_group .add_trip{
display:block;
width:98%;
border:1px dashed #111;
text-decoration: none;
text-align: center;
}
#multform_last a:hover{
border:2px dashed #3498db;
}
.search_flight{
display: line-block;
width:150px;
height:40px;
line-height: 40px;
text-align: center;
background-color:#3498db;
border-radius: 5px;
font-family: arial;
float:right;
}
.search_flight a{
color:#fff;
text-decoration: none;
font-size:20px;
}
/* base_top end */
/* SelectCity board style begin*/
#menu1 a:link{
color:#2c3e50;
text-decoration:none;
font-family: Roboto light,regular,medium bold;
}
#menu1 a:visited {
color: #00F;
text-decoration:none;
}
#menu1 a:hover {
color: #c00;
font-family: Roboto light,regular,medium bold;
}
#select ul{
list-style:none;
}
.main{
clear:both;
padding:8px;
text-align:center;
}
#select{
text-align:left;
width:550px;
background-color: #ecf0f1;
}
.areas{
position:relative;
overflow:hidden;
height:22px;
width:545px;
text-align:left;
}
#menu1{
position:absolute;
top:0;
left:0;
z-index:1;
}
#menu1 li{
float:left;
display:block;
cursor:pointer;
width:72px;
text-align:center;
line-height:21px;
height:21px;
}
#menu1 li.hover{
background:#ecf0f1;
border-left:1px solid #acb5c9;
border-top:1px solid #acb5c9;
border-right:1px solid #acb5c9;
border-radius: 1px;
}
.cities{
clear:both;
margin-top:-1px;
border:1px solid #acb5c9;
height:150px;
width:543px;
}
#main1 ul{
display: none;
}
#main1 ul.block{
display: block;
}
.city{
width:60px;
height:20px;
line-height: 20px;
margin:2px 2px;
float:left;
font-family: arial;
font-size: 15px;
}
/* SelectCity board style end*/
</style>
</head>
<body>
<div class="banner">DragonFlight</div>
<div class="nav_wrapper">
<div class="main-navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Flights</a></li>
<li><a href="#">Vacations</a></li>
<li><a href="#">Hotels</a></li>
<li><a href="#">Cars</a></li>
<li><a href="#">Insurance</a></li>
<li><a href="#">Destinations</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
<div class="base_top"><!-- base_top begin -->
<div class="search_box search_goback" id="search_box"><!-- search_box begin -->
<div class="search-title"><h3 class="flight-tit">Search Flights</h3></div>
<div class="search_content"><!-- search_content begin -->
<!-- <div class="left">hhh</div> -->
<div class="middle">
<form action="" id="fmHomePage" method="">
<div class="search_form"><!-- search_form begin -->
<div class="form_group search_type"><!-- form_group begin -->
<label class="form_title"style="display:block;width:40px;">Type</label>
<div class="flight_type" id="search_type"><!-- form_fields begin -->
<label><input type="radio" id="oneway"class="input_radio" value="S" name="FlightWay" checked="checked" onclick="onewayClick()" />One Way</label>
<label><input type="radio" id="return"class="input_radio" value="D" name="FlightWay" onclick="returnClick()" />Return Trip</label>
<label><input type="radio" id="multi"class="input_radio" value="M" name="FlightWay"onclick="multiClick()" />Multi City</label>
</div><!-- form_fields end -->
</div><!-- form_group end -->
<div class="search_baseform"><!-- search_baseform begin -->
<div class="form_group">
<label class="form_title">From</label>
<div class="form_fields">
<input type="text" class="input_txt" id="homeCity" name="homecity_name"placeholder="Enter a name of City / Airport" onchange="RecordCityOrAirport()"/>
</div>
</div>
<div class="form_group">
<label class="form_title">To</label>
<div class="form_fields">
<input type="text" class="input_txt" id="destCity" name="destcity1_name" placeholder="Enter a name of City / Airport"onchange="RecordCityOrAirport()"/>
</div>
</div>
<div class="form_group">
<label class="form_title">Depart</label>
<div class="form_fields">
<input type="datetime-local" class="input_txt" id="DDate" name="DDatePeriod1" />
</div>
</div>
<div class="form_group item2">
<label class="form_title">Return</label>
<div class="form_fields">
<input type="datetime-local" class="input_txt" id="ADate" name="ADatePeriod1" disabled="true"/>
</div>
</div>
<div id="search_traveler_types">
<div class="search-traveler-types">
<div class="clearfix">
<label class="form_title">People</label>
<div class="form_group item-first">
<div class="form_fields">
<select id="Quantity" name="Quantity">
<option value="Adult1">Adult 1(12+)</option>
<option value="Adult2">Adult 2</option>
<option value="Adult3">Adult 3</option>
<option value="Adult4">Adult 4</option>
<option value="Adult5">Adult 5</option>
<option value="Adult6">Adult 6</option>
<option value="Adult7">Adult 7</option>
<option value="Adult8">Adult 8</option>
<option value="Adult9">Adult 9</option>
</select>
</div>
</div>
<div class="form_group">
<div class="form_fields">
<select id="ChildQuantity" name="ChildQuantity">
<option value="Child0">Child 0(2:11)</option>
<option value="Child1">Child 1</option>
<option value="Child2">Child 2</option>
<option value="Child3">Child 3</option>
<option value="Child4">Child 4</option>
<option value="Child5">Child 5</option>
<option value="Child6">Child 6</option>
<option value="Child7">Child 7</option>
<option value="Child8">Child 8</option>
<option value="Child9">Child 9</option>
</select>
</div>
</div>
<div class="form_group">
<div class="form_fields">
<select id="InfantQuantity" name="InfantQuantity">
<option value="Infant0">Infant 0(2-)</option>
<option value="Infant1">Infant 1</option>
<option value="Infant2">Infant 2</option>
<option value="Infant3">Infant 3</option>
<option value="Infant4">Infant 4</option>
<option value="Infant5">Infant 5</option>
<option value="Infant6">Infant 6</option>
<option value="Infant7">Infant 7</option>
<option value="Infant8">Infant 8</option>
<option value="Infant9">Infant 9</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="search_advform" id="search_advform"><!-- search_advform begin -->
<div class="form_group" id="SubClass">
<div class="form_title">Class</div>
<div class="form_fields">
<select id="drpSubClass" name="drpSubClass">
<option>Economy</option>
<option>Business</option>
<option>First</option>
</select>
</div>
</div>
</div><!-- search_advform end -->
<div class="form_group non_stop">
<div class="Nonstop">
<label ><input type="checkbox" class="input_checkbox" id="flight_direct" name="flight_direct" value="1"/><span>Non-stop Only</span></label>
</div>
</div>
</div><!-- search_baseform end -->
<div class="search_flight">
<a href="#"class="search">Search a Flight</a>
</div>
</div><!-- search_form end -->
</form>
</div>
<div class="multi_search_content" style="display:none;"><!-- multi_search begin -->
<div class="search_form">
<div class="form_group search_type"><!-- form_group begin -->
<label class="form_title"style="display:block;width:40px;">Type</label>
<div class="flight_type" id="search_type"><!-- form_fields begin -->
<label><input type="radio" id="hide_oneway"class="input_radio" value="S" name="FlightWay"onclick="hide_onewayClick()"/>One Way</label>
<label><input type="radio" id="hide_return"class="input_radio" value="D" name="FlightWay" onclick="hide_returnClick()"/>Return Trip</label>
<label><input type="radio" id="hide_multi"class="input_radio" value="M" name="FlightWay" checked="checked"onclick="hide_multiClick()"/>Multi City</label>
</div><!-- form_fields end -->
</div><!-- form_group end -->
<div class="search_content" id="multi_search_content"><!-- multi_form begin -->
<div class="1">
<div class="multi_form_group">
<span>Flight 1:</span>
<label class="multi_label">Depart</label>
<input type="datetime-local" class="multi_form_content" id="homeCity" name="homecity_name"/>
<label class="multi_label">From</label>
<input type="text" class="multi_form_content" id="multi_homeCity" name="homecity_name"placeholder="Enter City / Airport" onchange="Multi_RecordCityOrAirport()"/>
<label class="multi_label">To</label>
<input type="text" class="multi_form_content" id="multi_destCity" name="destCity_name"placeholder="Enter City / Airport"onchange="Multi_RecordCityOrAirport()"/>
</div>
</div>
<div class="2">
<div class="multi_form_group">
<span>Flight 2:</span>
<label class="multi_label">Depart</label>
<input type="datetime-local" class="multi_form_content" id="homeCity" name="homecity_name"/>
<label class="multi_label">From</label>
<input type="text" class="multi_form_content" id="homeCity" name="homecity_name"placeholder="Enter City / Airport"/>
<label class="multi_label">To</label>
<input type="text" class="multi_form_content" id="destCity" name="destCity_name"placeholder="Enter City / Airport"/>
</div>
</div>
<div class="3">
<div class="multi_form_group">
<span>Flight 3:</span>
<label class="multi_label">Depart</label>
<input type="datetime-local" class="multi_form_content" id="homeCity" name="homecity_name"/>
<label class="multi_label">From</label>
<input type="text" class="multi_form_content" id="homeCity" name="homecity_name"placeholder="Enter City / Airport"/>
<label class="multi_label">To</label>
<input type="text" class="multi_form_content" id="destCity" name="destCity_name"placeholder="Enter City / Airport"/>
</div>
</div>
</div><!-- multi_form end -->
<div class="search_multiform" id="search_multi"><!-- search_multiform begin -->
<div id="flight_multiple"></div>
<div class="form_group" id="multform_last">
<a href="javascript:void()" class="add_trip" id="addTrip"onclick="addFrom()"><h2 style="display:inline-block;margin:0;padding:0;" >+</h2>AddForm</a>
</div>
<div id="flight_multiple_traveler_types"></div>
</div><!-- search_multiform end -->
<div class="addition"><!-- addition begin -->
<div id="search_traveler_types">
<div class="search-traveler-types"><!-- search-traveler-types begin -->
<div class="clearfix"><!-- clearfix begin -->
<label class="form_title multiTitle">People</label>
<div class="form_group item-first"><!-- form_group begin -->
<div class="form_fields">
<select id="Quantity" name="Quantity">
<option value="Adult1">Adult 1(12+)</option>
<option value="Adult2">Adult 2</option>
<option value="Adult3">Adult 3</option>
<option value="Adult4">Adult 4</option>
<option value="Adult5">Adult 5</option>
<option value="Adult6">Adult 6</option>
<option value="Adult7">Adult 7</option>
<option value="Adult8">Adult 8</option>
<option value="Adult9">Adult 9</option>
</select>
</div>
</div><!-- form_group end -->
<div class="form_group"><!-- form_group begin -->
<div class="form_fields">
<select id="ChildQuantity" name="ChildQuantity">
<option value="Child0">Child 0(2:11)</option>
<option value="Child1">Child 1</option>
<option value="Child2">Child 2</option>
<option value="Child3">Child 3</option>
<option value="Child4">Child 4</option>
<option value="Child5">Child 5</option>
<option value="Child6">Child 6</option>
<option value="Child7">Child 7</option>
<option value="Child8">Child 8</option>
<option value="Child9">Child 9</option>
</select>
</div>
</div><!-- form_group end -->
<div class="form_group"><!-- form_group begin -->
<div class="form_fields">
<select id="InfantQuantity" name="InfantQuantity">
<option value="Infant0">Infant 0(2-)</option>
<option value="Infant1">Infant 1</option>
<option value="Infant2">Infant 2</option>
<option value="Infant3">Infant 3</option>
<option value="Infant4">Infant 4</option>
<option value="Infant5">Infant 5</option>
<option value="Infant6">Infant 6</option>
<option value="Infant7">Infant 7</option>
<option value="Infant8">Infant 8</option>
<option value="Infant9">Infant 9</option>
</select>
</div>
</div><!-- form_group end -->
<div class="form_fields"style="display:inline-block;"><!-- form_fields begin -->
<div class="form_title multiTitle">Class</div>
<select id="drpSubClass" name="drpSubClass">
<option>Economy</option>
<option>Business</option>
<option>First</option>
</select>
</div><!-- form_fields end -->
</div><!-- clearfix end -->
</div><!-- search-traveler-types end -->
</div>
</div><!-- addition end -->
<div class="search_flight">
<a href="#"class="search">Search a Flight</a>
</div>
</div>
</div><!-- multi_search end -->
</div><!-- search_content end -->
</div><!-- search_box end -->
</div><!-- base_top end -->
<textarea id="rn01" name="textarea" rows="100%" cols="100%"></textarea> <br />
<input style="cursor: hand" onclick="runEx(‘rn01‘)" type="button" value="Run">
<script type="text/javascript">
function runEx(cod1) {
cod=document.all(cod1)
var code=cod.value;
if (code!=""){
var newwin=window.open(‘‘,‘‘,‘‘); //open a new window newwin。
newwin.opener = null
newwin.document.write(code); //output code in new window
newwin.document.close();
}
}
//respond for choice of didfferent type flight
function onewayClick() {
$("#ADate").attr(‘disabled‘, true);
$("#return").removeAttr("checked");
$("#multi").removeAttr("checked");
$("#oneway").attr("checked", "checked");
$("#oneway").click();
}
function returnClick() {
$("#ADate").attr(‘disabled‘, false);
$("#oneway").removeAttr("checked");
$("#multi").removeAttr("checked");
$("#return").attr("checked", "checked");
$("#return").click();
}
function multiClick() {
$(".middle").hide();
$(".multi_search_content").show();
$("#hide_oneway").removeAttr("checked");
$("#hide_multi").removeAttr("checked");
$("#hide_multi").attr("checked", "checked");
$("#hide_multi").click();
}
function hide_onewayClick() {
$(".multi_search_content").hide();
$(".middle").show();
$("#ADate").attr("disabled",true);
$("#return").removeAttr("checked");
$("#multi").removeAttr("checked");
$("#oneway").attr("checked", "checked");
$("#oneway").click();
}
function hide_returnClick() {
$(".multi_search_content").hide();
$(".middle").show();
$("#ADate").attr(‘disabled‘, false);
$("#oneway").removeAttr("checked");
$("#multi").removeAttr("checked");
$("#return").attr("checked", "checked");
$("#return").click();
}
/*keep input ‘homeCity‘ and ‘multi_homeCity‘、‘destCity‘ and ‘multi_destCity‘ the same when value changed*/
function RecordCityOrAirport(){
var homeCity_value=$("#homeCity").value;
var destCity_value=$("#destCity").value;
$("#multi_homeCity").value=homeCity_value;
$("#multi_destCity").value=destCity_value;
}
function Multi_RecordCityOrAirport(){
var multi_homeCity_value=$("#multi_homeCity").value;
var multi_destCity_value=$("#multi_destCity").value;
$("#homeCity").value=multi_homeCity_value;
$("#destCity").value=multi_destCity_value;
}
/*insert a new form*/
function addFrom(){
var element=document.getElementById("multi_search_content");
var topdiv=document.createElement("div");
var newForm=document.createElement("div");
newForm.className="multi_form_group";
var len=element.getElementsByClassName(‘multi_form_group‘).length+1;
var newSpan=document.createElement("span");
var spanNode=document.createTextNode("Flight "+len+": ");
newSpan.appendChild(spanNode);
newForm.appendChild(newSpan);
var newLabel=document.createElement("Label");
var labelNode=document.createTextNode(" Depart ");
newLabel.appendChild(labelNode);
newForm.appendChild(newLabel);
var newInput=document.createElement("input");
newInput.className=‘multi_form_content‘;
newInput.type=‘datetime-local‘;
newInput.placeholder=‘Enter City / Airport‘;
newForm.appendChild(newInput);
var newLabel=document.createElement("Label");
var labelNode=document.createTextNode(" From ");
newLabel.appendChild(labelNode);
newForm.appendChild(newLabel);
var newInput=document.createElement("input");
newInput.className=‘multi_form_content‘;
newInput.type=‘text‘;
newInput.placeholder=‘Enter City / Airport‘;
newForm.appendChild(newInput);
var newLabel=document.createElement("Label");
var labelNode=document.createTextNode(" To ");
newLabel.appendChild(labelNode);
newForm.appendChild(newLabel);
var newInput=document.createElement("input");
newInput.className=‘multi_form_content‘;
newInput.type=‘text‘;
newInput.placeholder=‘Enter City / Airport‘;
newForm.appendChild(newInput);
var newLabel=document.createElement("a");
var labelNode=document.createTextNode(" X ");
topdiv.className=len;
topdiv.appendChild(newForm);
element.appendChild(topdiv);
/*method 2: cloneNode
var sourceNode = document.getElementById("div-0"); // get a node object
var clonedNode = sourceNode.cloneNode(true); // clone node
clonedNode.setAttribute("id", "div-" + i); // correct id，avoid repeating
sourceNode.parentNode.appendChild(clonedNode); // insert from parentNode
*/
}
</script>
</body>
</html>
时间： 2024-10-10 15:50:27