mirror of
https://github.com/adnexus/shuttle-select.git
synced 2026-07-27 06:13:01 +00:00
86 lines
2.7 KiB
HTML
86 lines
2.7 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Shuttle Select Prototype</title>
|
|
<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
|
|
<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js' type='text/javascript'></script>
|
|
<link charset='utf-8' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css' rel='stylesheet' type='text/css' />
|
|
<link rel="stylesheet" href="/css/master.css" type="text/css" charset="utf-8" />
|
|
</head>
|
|
<body>
|
|
<div id="content-wrap">
|
|
<ul id="tabs"><!-- Just for show -->
|
|
<li>Frequency</li>
|
|
<li class="selected">Geography</li>
|
|
<li>Daypart</li>
|
|
<li>Segment</li>
|
|
<li>Demographic</li>
|
|
<li>Tag</li>
|
|
<li>System</li>
|
|
</ul>
|
|
<div id="geo-targeting" class="panel">
|
|
<div id="UNIQUE-NAME" class="shuttle-select">
|
|
<div class="included-list">
|
|
<h3>Impression must match ALL of the following criteria:</h3>
|
|
<ul></ul>
|
|
</div>
|
|
|
|
<form class="item-search" action="/search" method="get">
|
|
<input type="text" name="query" />
|
|
<button type="button">Search</button>
|
|
</form>
|
|
|
|
<div id="tier-1" class="tier">
|
|
<div class="title-bar">
|
|
<h3><div>All Locations</div></h3>
|
|
</div>
|
|
<div class="content">
|
|
<label for="UNIQUE-NAME-include-all"><input type="checkbox" name="include_all" id="UNIQUE-NAME-include-all" /> Include all</label>
|
|
<ul class="items">
|
|
<li>Africa <span class="arrows">>></span></li>
|
|
<li>Asia & Middle East <span class="arrows">>></span></li>
|
|
<li>Canada & United States <span class="arrows">>></span></li>
|
|
<li>Europe <span class="arrows">>></span></li>
|
|
<li>Latin America <span class="arrows">>></span></li>
|
|
<li>Oceania <span class="arrows">>></span></li>
|
|
<li>South America <span class="arrows">>></span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tier-2" class="tier">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" charset="utf-8">
|
|
(function(){
|
|
var ShuttleSelect = function(element) {
|
|
var _$el = null;
|
|
|
|
var formatVerticalText = function() {
|
|
var title = _$el.find('.title-bar h3');
|
|
title.css({
|
|
left: -title.width() / 2 + 9 + 'px',
|
|
top: title.width() / 2 + 'px'
|
|
});
|
|
}
|
|
|
|
this.init = function(element) {
|
|
_$el = $(element);
|
|
|
|
formatVerticalText();
|
|
}
|
|
}
|
|
|
|
$(function(){
|
|
var oShuttleSelect = new ShuttleSelect();
|
|
oShuttleSelect.init('#UNIQUE-NAME');
|
|
});
|
|
})();
|
|
</script>
|
|
</html>
|