<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>TabStrip Plugin - Explorer</title>
<link href="raxan/ui/css/master.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]><link rel="stylesheet" href="raxan/ui/css/master.ie.css" type="text/css"><![endif]-->
<link href="raxan/ui/css/default/theme.css" rel="stylesheet" type="text/css" />
<script src="raxan/startup.js" type="text/javascript"></script>
<script type="text/javascript" src="views/scripts/css-tabstrip-explorer.js"></script>
<style type="text/css">
/**
* nicetab - tabstrip theme
*/
ul.rax-tabstrip.nicetab {
border:none;
background:url("views/images/tab_bg.gif") repeat-x left bottom;
}
ul.rax-tabstrip.nicetab li {
border:none; padding:0 0 0 9px;
background:url("views/images/tab_off.png") no-repeat left top;
}
ul.rax-tabstrip.nicetab a {
color:#765; border:none;
padding:5px 15px 4px 6px;
background:url("views/images/tab_off.png") no-repeat right top;
}
ul.rax-tabstrip.nicetab a:hover { color:#333; }
ul.rax-tabstrip.nicetab .selected-tab {
cursor:default;
background:url("views/images/tab_on.png") no-repeat left top;
}
ul.rax-tabstrip.nicetab .selected-tab a {
color:#333; padding-bottom:5px; border:none;
background:url("views/images/tab_on.png") no-repeat right top;
}
/**
* bluetab - tabstrip theme
*/
ul.rax-tabstrip.bluetab {
border:none;
background:url("views/images/tab_blue_bg.gif") repeat-x left bottom;
}
ul.rax-tabstrip.bluetab li {
border:none; padding:0 0 0 9px;
background:url("views/images/tab_blue_off.png") no-repeat left top;
}
ul.rax-tabstrip.bluetab a {
color:#D6E8F6; border:none;
padding:5px 15px 4px 6px;
background:url("views/images/tab_blue_off.png") no-repeat right top;
}
ul.rax-tabstrip.bluetab a:hover { color:#93BBD6; }
ul.rax-tabstrip.bluetab .selected-tab {
cursor:default;
background:url("views/images/tab_blue_on.png") no-repeat left top;
}
ul.rax-tabstrip.bluetab .selected-tab a {
color:#003D69; padding-bottom:5px; border:none;
background:url("views/images/tab_blue_on.png") no-repeat right top;
}
/**
* fancytab - tabstrip theme
*/
ul.rax-tabstrip.fancytab {
border:none;
background:url("views/images/tab_fancy_bg.gif") repeat-x left bottom;
}
ul.rax-tabstrip.fancytab li {
border:none; margin-right:7px;padding:0 0 0 9px;
background:url("views/images/tab_fancy_off.gif") no-repeat left top;
}
ul.rax-tabstrip.fancytab a {
color:#6A99B9; border:none;
padding:5px 15px 4px 6px;
background:url("views/images/tab_fancy_off.gif") no-repeat right top;
}
ul.rax-tabstrip.fancytab a:hover { color:#93BBD6; }
ul.rax-tabstrip.fancytab .selected-tab {
cursor:default;
background:url("views/images/tab_fancy_on.gif") no-repeat left top;
}
ul.rax-tabstrip.fancytab .selected-tab a {
color:#003D69; padding-bottom:5px; border:none;
background:url("views/images/tab_fancy_on.gif") no-repeat right top;
}
/**
* Blue ZigZag - tabstrip theme - combination fo fancy and blue themes
*/
ul.rax-tabstrip.bzig {
border:none;
background:url("views/images/tab_blue_bg.gif") repeat-x left bottom;
}
ul.rax-tabstrip.bzig li {
border:none; margin-right:7px;padding:0 0 0 9px;
background:url("views/images/tab_fancy_off.gif") no-repeat left top;
}
ul.rax-tabstrip.bzig a {
color:#D6E8F6; border:none;
padding:5px 15px 4px 6px;
background:url("views/images/tab_blue_off.png") no-repeat right top;
}
ul.rax-tabstrip.bzig a:hover { color:#93BBD6; }
ul.rax-tabstrip.bzig .selected-tab {
cursor:default;
background:url("views/images/tab_fancy_on.gif") no-repeat left top;
}
ul.rax-tabstrip.bzig .selected-tab a {
color:#003D69; padding-bottom:5px; border:none;
background:url("views/images/tab_blue_on.png") no-repeat right top;
}
</style>
</head>
<body>
<div class="container c39 tpm">
<!-- Panel -->
<div class="rax-backdrop column c10 append1">
<div class="rax-content-pal hlf-pad">
<h5>Settings</h5>
<div class="pad">
<form id="frmSettings" name="frmSettings">
<label class="c6 left">Theme:</label><br />
<select id="lstTheme" class="e100">
<option value="">Default</option>
<option value="bluetab">Blue Tabs</option>
<option value="bzig">Blue ZigZag</option>
<option value="fancytab">Fancy Tabs</option>
<option value="nicetab">Nice Tabs</option>
</select><br />
<label class="c6 left">Animation:</label><br />
<select id="lstAnimate" class="e100">
<option value="">None</option>
<option value="default" selected="selected">Default</option>
<option value="bounce_back">Bounce Back</option>
<option value="page_scroll">Page Scroll</option>
<option value="push_back">Push Back</option>
<option value="roll_up">Roll Up</option>
<option value="slide_in">Slide In</option>
</select>
<hr class="space" />
<strong>Autopilot:</strong><br />
<hr />
<label class="c6 left">Enabled: </label><input id="chkAuto" type="checkbox" value="1" /> <br />
<label class="c6 left">Randomize: </label><input id="chkRandom" type="checkbox" value="1" /> <br />
<label class="c6 left">Delay (ms):</label><input id="txtDelay" class="textbox" type="text" size="2" value="3500"/> <br />
<hr />
<span id="pnlText"> </span>
</form>
</div>
</div>
</div>
<div class="column c27">
<ul id="tab1" class="rax-tabstrip">
<li><a href="#home">Home</a></li>
<li class="selected-tab"><a href="#news">News</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="css-remote.html#ajax">Ajax Remote</a></li>
</ul>
<div id="home" class="pad">
<h2 class="bottom">Home Tab</h2>
<p><img class="right ltm hlf-pad border" src="views/images/flower.jpg" />
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer bibendum rutrum nunc. Aliquam erat volutpat. Nam porta. Nunc vulputate, arcu vel dictum sollicitudin, nibh arcu cursus metus, venenatis tempor neque dui ornare lectus. Etiam non eros quis urna tristique convallis. Donec lacinia turpis ac quam. Sed quam ante, dictum in, congue placerat, faucibus bibendum, urna. </p>
</div>
<div id="news" class="pad">
<h2 class="bottom">Online News Tab</h2>
<p>Aenean scelerisque hendrerit leo. Nam mollis mi non turpis. Aliquam nec augue non augue euismod aliquam. Proin auctor ultricies urna. Quisque sollicitudin. Ut consequat varius augue. Etiam orci tellus, cursus vitae, sollicitudin nec, condimentum ut, ante. Mauris sed ipsum a lectus fermentum semper. Donec tempus mi quis lorem. Integer luctus massa. Ut purus nisi, rutrum in, tempor vitae, scelerisque nec, justo. In hac habitasse platea dictumst. Mauris est. Sed molestie. Quisque congue consequat ligula. Suspendisse potenti. Maecenas in velit sed lorem lacinia cursus. Pellentesque vel urna. Morbi eleifend nulla non enim. </p>
</div>
<div id="products" class="pad">
<h2 class="bottom">Product Tab</h2>
<p>Fusce pretium, dui id varius pulvinar, sem diam pellentesque nunc, in venenatis arcu enim ut orci. Suspendisse potenti. Vivamus vitae massa. Fusce tempor, massa vel lobortis auctor, nunc justo ullamcorper orci, nec sollicitudin nibh pede nec dui. Cras rhoncus neque eu nisi. Nam vulputate felis ut erat. Nulla pretium lectus sed quam. Quisque vulputate, metus sit amet semper tincidunt, dolor mauris blandit urna, quis imperdiet ante odio sed urna. Quisque vitae lacus vel risus suscipit dapibus. Maecenas imperdiet tincidunt leo. Aliquam laoreet, massa et volutpat aliquet, orci mauris venenatis quam, sit amet luctus ipsum odio semper odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus pede. Vivamus a ante. </p>
</div>
<div id="about" class="pad">
<h2 class="bottom">About Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent facilisis lectus a lectus lacinia bibendum. Nam eget eros. Pellentesque tincidunt dignissim sapien. Quisque vestibulum tristique justo. Nullam id metus vitae enim dignissim pharetra. Nunc ante est, egestas in, tempus eget, accumsan ac, est. Nam in elit et diam vestibulum malesuada. Sed justo tortor, iaculis at, vestibulum non, convallis et, ante. Sed sapien neque, facilisis in, ultrices eget, molestie ac, tellus.</p>
</div>
<div id="contact" class="pad">
<h2 class="bottom">Contact Tab</h2>
<p>Nulla pretium lectus sed quam. Quisque vulputate, metus sit amet semper tincidunt, dolor mauris blandit urna, quis imperdiet ante odio sed urna. Quisque vitae lacus vel risus suscipit dapibus. Maecenas imperdiet tincidunt leo. Aliquam laoreet, massa et volutpat aliquet, orci mauris venenatis quam, sit amet luctus ipsum odio semper odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus pede. Vivamus a ante. </p>
</div>
<div id="ajax" class="pad">
<h3>Loading...</h3>
</div>
</div>
</div>
</body>
</html>/**
* TabStrip Explorer Code-Behind file.
*/
// include main scripts
Raxan.include('jquery');
Raxan.include('jquery-ui-interactions');
Raxan.include('raxan-ui');
// main ready function
Raxan.ready(function(){
// update tab when form change
$('#lstTheme, #lstAnimate, #txtDelay').change(updateTab);
$('#chkAuto, #chkRandom').click(updateTab);
updateTab();
})
/* Custom animations */
var currentTab = null;
var ani = {
"default":true,
"bounce_back": function(i,a,b){
currentTab = i;
b.hide('slide',{direction:'down'},'',function(){
if (currentTab == i)
a.show('slide',{direction:'down'});
})
},
"roll_up": function(i,a,b){
currentTab = i;
b.hide('slide',{direction:'up'},'',function(){
if (currentTab == i)
a.show('slide',{direction:'down',easing: "easeInOutBack"});
})
},
"slide_in": function(i,a,b) {
currentTab = i;
b.hide('slide',{direction:'left'},'',function(){
if (currentTab == i)
a.show('slide',{direction:'right'});
})
},
"push_back": function(i,a,b) {
currentTab = i;
b.hide('slide',{direction:'left'},'',function(){
if (currentTab == i)
a.show('slide',{direction:'left'});
})
},
"page_scroll": function(i,a,b) {
currentTab = i;
if (self.oldindex>i) {
b.hide('slide',{direction:'right'},'',function(){
if (currentTab == i)
a.show('slide',{direction:'left'});
})
}
else {
b.hide('slide',{direction:'left'},'',function(){
if (currentTab == i)
a.show('slide',{direction:'right'});
})
}
self.oldindex = i;
}
}
// update tabstrip
function updateTab() {
var theme = $('#lstTheme').val();
var animate = $('#lstAnimate').val();
var o = {
theme: theme,
animate: ani[animate] ? ani[animate] : false,
tabclick: function(e){
var i = e.data.index;
$('#pnlText').text('You have selected tab #'+(i+1));
}
}
$('#tab1').removeClass().raxTabStrip(o);
if ($('#chkAuto').attr('checked')) {
var d = $('#txtDelay').val();
var r = $('#chkRandom').attr('checked') ? $('#chkRandom').val() : false;
if (d<1000) d = 1000;
$('#tab1').raxTabStrip('autopilot',d,r)
}
else {
$('#tab1').raxTabStrip('autopilot',false);
}
}