174 lines
8.3 KiB
HTML
174 lines
8.3 KiB
HTML
<!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>
|
|
<title>Jericho TabPanel</title>
|
|
<style type="text/css">
|
|
body,html{font-size:12px;font-family:Calibri;padding:0;margin:0;background:#7d9edb;} a img{border:0px;}
|
|
.functree{margin:0;padding:0;} .functree ul,.functree li{list-style-type:none;margin:0;padding:0;}
|
|
.functree li{padding-left:14px;line-height:18px;} .functree span.modules{cursor:pointer;color:#783432;}
|
|
.divTop span{padding-left:20px;line-height:70px;font-size:16px;} .divMain{float:left;clear:both;}
|
|
.divLeft,.divRight{display:none;float:left;background-color:White;border:double 4px #eee;padding:5px;}
|
|
#divMainLoader{position:absolute;top:15px;right:15px;z-index:100;width:80px;height:20px;line-height:20px;background:#EEF3F7 url(../images/smallloader.gif) no-repeat 8px center;border:1px solid #A5B6C8;padding-left:30px;font-family:10px;display:none;}
|
|
</style>
|
|
<link rel="Stylesheet" href="css/jquery.jerichotab.css" />
|
|
<script type="text/javascript" src="../jquery/jquery-1.8.3.min.js"></script>
|
|
<script type="text/javascript" src="js/jquery.jerichotab.js"></script>
|
|
<script type="text/javascript">
|
|
var jericho = {
|
|
showLoader: function() {
|
|
$('#divMainLoader').css('display', 'block');
|
|
},
|
|
removeLoader: function() {
|
|
$('#divMainLoader').css('display', 'none');
|
|
},
|
|
buildTree: function() {/*
|
|
$('.functree li').each(function() {
|
|
if ($(this).is(':has(ul)'))
|
|
$(this).addClass('collapse');
|
|
if ($(this).next().is('li') || $(this).next().is('ul'))
|
|
$(this).css({ borderLeft: 'dashed 1px #dedede' });
|
|
})
|
|
$('li.collapse>span').click(function() {
|
|
$(this).next('ul').slideToggle('fast', function() {
|
|
if ($(this).parent().hasClass('collapse'))
|
|
$(this).parent().removeClass('collapse').addClass('expand');
|
|
else
|
|
$(this).parent().removeClass('expand').addClass('collapse');
|
|
})
|
|
})*/
|
|
|
|
$('span.func').css({ 'cursor': 'pointer' }).hover(function() {
|
|
$(this).css({ 'color': '#3de', 'text-decoration': 'underline' });
|
|
}, function() {
|
|
$(this).css({ 'color': '#000', 'text-decoration': 'none' });
|
|
}).click(function() {
|
|
$.fn.jerichoTab.addTab({
|
|
tabFirer: $(this),
|
|
title: $(this).text(),
|
|
//closeable: true,
|
|
//iconImg: $(this).attr('iconImg'),
|
|
data: {
|
|
dataType: $(this).attr('dataType'),
|
|
dataLink: $(this).attr('dataLink')
|
|
}
|
|
}).loadData();
|
|
});
|
|
},
|
|
buildTabpanel: function() {
|
|
$.fn.initJerichoTab({
|
|
renderTo: '.divRight',
|
|
uniqueId: 'myJerichoTab',
|
|
contentCss: { 'height': $('.divRight').height() - 50 },
|
|
tabs: [{
|
|
title: 'JeirchoTab',
|
|
closeable: false,
|
|
iconImg: 'images/jerichotab.png',
|
|
data: { dataType: 'formtag', dataLink: '#tbNews' },
|
|
onLoadCompleted: function(h) {
|
|
$('<b style="color:red" />').html('The JerichoTab processed in ' + (new Date().getTime() - d1) + ' milliseconds!').appendTo(h);
|
|
}
|
|
}, {
|
|
title: 'ASPX',
|
|
closeable: false,
|
|
data: { dataType: 'iframe', dataLink: 'a.aspx' }
|
|
}],
|
|
activeTabIndex: 1,
|
|
loadOnce: true
|
|
});
|
|
}
|
|
}
|
|
$().ready(function() {
|
|
d1 = new Date().getTime();
|
|
jericho.showLoader();
|
|
var w = $(document).width();
|
|
var h = $(document).height();
|
|
$('.divLeft').css({ width: 190, height: h - 120, 'display': 'block' });
|
|
$('.divRight').css({ width: w - 260, height: h - 120, 'display': 'block', 'margin-left': 7 });
|
|
$('#firefoxuser').html(($.browser.mozilla ? 'yes, your browser is Firefox' : 'oh, you are not using Firefox?'));
|
|
$('#ieuser').html(($.browser.msie ? 'yes, your browser is Internet Explorer' : 'oh, you are not using Internet Explorer?'));
|
|
jericho.buildTree();
|
|
jericho.buildTabpanel();
|
|
jericho.removeLoader();
|
|
})
|
|
$(window).resize(function() {
|
|
var w = $(document).width();
|
|
$('.divRight').css({ width: w - 250 });
|
|
})
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="divTop">
|
|
<span>Jericho TabPanel</span>
|
|
</div>
|
|
<div class="divMain">
|
|
<div class="divLeft">
|
|
<ul class="functree">
|
|
<li><span class="modules">About</span>
|
|
<ul>
|
|
<li><span class="func" jerichotabindex="0">JerichoTab</span></li>
|
|
</ul>
|
|
</li>
|
|
<li><span class="modules">Products</span>
|
|
<ul>
|
|
<li><span class="modules">IM</span>
|
|
<ul>
|
|
<li><span class="func" dataType='html' dataLink='template/msn.htm' iconImg='images/msn.gif'>MSN</span></li>
|
|
<li><span class="func" dataType='html' dataLink='template/skype.htm' iconImg='images/skype.png'>Skype</span></li>
|
|
</ul>
|
|
</li>
|
|
<li><span class="modules" >Browsers</span>
|
|
<ul>
|
|
<li><span class="func" iconImg='images/firefox.png' dataType='formtag' dataLink='#firefoxuser'>Firefox</span></li>
|
|
<li><span class="func" iconImg='images/ie.png' dataType='formtag' dataLink='#ieuser'>Internet Explorer</span></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><span class="modules">Corporations</span>
|
|
<ul>
|
|
<li><span class="func" dataType='iframe' dataLink='http://www.g.cn'>Google</span></li>
|
|
<li><span class="func" iconImg="images/yahoo.png" dataType="iframe" dataLink="http://www.yahoo.com">Yahoo</span></li>
|
|
<li><span class="func" dataType="iframe" dataLink="handler/dataexchange.ashx?action=microsoft">Microsoft</span></li>
|
|
</ul>
|
|
</li>
|
|
<li><span class="modules">News</span>
|
|
<ul>
|
|
<li><span class="func" iconImg="images/chess.png" dataType="ajax" dataLink="handler/dataexchange.ashx?action=chess">I-go</span></li>
|
|
<li><span class="func" iconImg="images/ent.png" dataType="ajax" dataLink="handler/dataexchange.ashx?action=ent">Entertainment</span></li>
|
|
<li><span class="func" iconImg="images/whether.png" dataType="ajax" dataLink="handler/dataexchange.ashx?action=whether">Whether</span></li>
|
|
</ul>
|
|
</li>
|
|
<li><span class="modules">Testing...</span>
|
|
<ul>
|
|
<li><span class="func" iconImg="images/clock.png" dataType='ajax' dataLink='handler/dataexchange.ashx?action=getdatetime'>Get Ticks(AJAX)</span></li>
|
|
</ul>
|
|
</li>;
|
|
</ul>
|
|
</div>
|
|
<div class="divRight"></div>
|
|
</div>
|
|
<div id="divMainLoader">Loading...</div>
|
|
<b id="firefoxuser" style="display:none"></b>
|
|
<b id="ieuser" style="display:none"></b>
|
|
<div id="tbNews" style="display:none">
|
|
<h4>Wow...just wow!!!</h4>
|
|
<p>This plugin is really amazing!</p>
|
|
<p>it's light-weight but powerful and perfect</p>
|
|
<p>It's easy to use, all the API was opened, you can get them from the remarks that in the head of js file.</p>
|
|
<p>JeirchoTab has supported four types of data:</p>
|
|
<p>
|
|
<ol>
|
|
<li>formtag</li>
|
|
<li>html</li>
|
|
<li>iframe</li>
|
|
<li>ajax</li>
|
|
</ol>
|
|
</p>
|
|
<p>You wanna known '<b>How to use it</b>'?</p>
|
|
<p>See the demo by yourself!</p>
|
|
<p><strong style="color:#7623ee">--jericho</strong><img src="images/china.gif" alt="China" title="China" /></p>
|
|
<p><a href="http://www.ajaxplaza.net" target="_blank">http://www.ajaxplaza.net</a></p>
|
|
</div>
|
|
</body>
|
|
</html>
|