当前位置: 代码迷 >> Web前端 >> TabPanel成效,比较有用,收藏先
  详细解决方案

TabPanel成效,比较有用,收藏先

热度:103   发布时间:2012-11-22 00:16:41.0
TabPanel效果,比较有用,收藏先。

本东东是转载过来的,JQ插件来的,比较好理解。

本作品的作者博客:http://www.cnblogs.com/fromearth,以表示本人对他劳动成果的尊重!

<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')
??????????????????????? }
??????????????????? }).showLoader().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);
??????????????????????? }
??????????????????? }],
??????????????????? activeTabIndex: 0,
??????????????????? 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 - 250, 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();
??????? })
??? </script>

1 楼 CL315917525 2010-10-25  
不知道是否实现了刷新