开发者

jQuery Nested tab with bookmark option

开发者 https://www.devze.com 2023-03-24 06:09 出处：网络
I do have a site that does some kind of management. There I used JQuery Tab for the structure and call all panel using AJAX. I Use also JQuery Address for the bookmarking as per a post I found somewhe
相关专题：bookmarksjquerynestedtabs

I do have a site that does some kind of management. There I used JQuery Tab for the structure and call all panel using AJAX. I Use also JQuery Address for the bookmarking as per a post I found somewhere

I've got 2 problems

1) While this all works fine with FF, I can't make it work in IE (well, just the bookmarking stuff) 2) My javascript looks horrible (and I can't see how to simplify it)

Could you be of any help here ?

Thanks

Here is the code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>title</title>
<link type="text/css" href="Style/style.css" rel="stylesheet"/>
<link href="Style/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="Style/colorbox.css" rel="stylesheet" type="text/css"/>
<script src="JS/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="JS/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>

<script src="JS/jquery.address-1.3.1.min.js" type="text/javascript"></script>
<script src="JS/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("a[rel='colorBox']").colorbox();
        $(".tabs1").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                },  
success: function() 
                {          
                    $(".tabs1").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                            {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                            },  
success: function() 
                            {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                                $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                                $(".ajaxColorBoxLabel").colorbox();         
                                $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                                $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                                $('ul li a').bind('click', function() 
                                {         
                                    var value = $(this).attr('href').substring(1);          $.address.value(value);      
                                }); 
                            }  
                        } } );          
                    $(".tabs2").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                            {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                            },  
success: function() 
                            {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                                $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                                $(".ajaxColorBoxLabel").colorbox();         
                                $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                                $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                                $('ul li a').bind('click', function() 
                                {         
                                    var value = $(this).attr('href').substring(1);          $.address.value(value);      
                                }); 
                            }  
                        } } );          
                    $(".tabs3").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                            {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                            },  
success: function() 
                            {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                                $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                                $(".ajaxColorBoxLabel").colorbox();         
                                $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                                $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                                $('ul li a').bind('click', function() 
                                {         
                                    var value = $(this).attr('href').substring(1);          $.address.value(value);      
                                }); 
                            }  
                        } } ); 
                    $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                    $(".ajaxColorBoxLabel").colorbox();         
                    $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                    $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                    $('ul li a').bind('click', function() 
                    {         
                        var value = $(this).attr('href').substring(1);          $.address.value(value);      
                    }); 
                }  
            } } ); 
        $(".tabs2").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                },  
success: function() 
                {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 开发者_高级运维
                    $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                    $(".ajaxColorBoxLabel").colorbox();         
                    $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                    $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                    $('ul li a').bind('click', function() 
                    {         
                        var value = $(this).attr('href').substring(1);          $.address.value(value);      
                    }); 
                }  
            } } ); 
        $(".tabs3").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                },  
success: function() 
                {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                    $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                    $(".ajaxColorBoxLabel").colorbox();         
                    $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                    $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                    $('ul li a').bind('click', function() 
                    {         
                        var value = $(this).attr('href').substring(1);          $.address.value(value);      
                    }); 
                }  
            } } ); 
}); 


$(function(){
    var title = 'title';
    $('head title').text(title);


    // jQuery Address
    $.address.strict(0);
    $.address.tracker(0);
    if ($.address.value() == '') {
        $(".tabs1").tabs("select", "#index");
        //$(".tabs2").tabs("select", "#list");
        $.address.value('index');
    }
    $.address.init(function(event) {
        $(".tabs1").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                },  
success: function() 
                {          
                    $(".tabs1").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                            {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                            },  
success: function() 
                            {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                                $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                                $(".ajaxColorBoxLabel").colorbox();         
                                $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                                $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                                $('ul li a').bind('click', function() 
                                {         
                                    var value = $(this).attr('href').substring(1);          $.address.value(value);      
                                }); 
                            }  
                        } } );          
                    $(".tabs2").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                            {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                            },  
success: function() 
                            {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                                $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                                $(".ajaxColorBoxLabel").colorbox();         
                                $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                                $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                                $('ul li a').bind('click', function() 
                                {         
                                    var value = $(this).attr('href').substring(1);          $.address.value(value);      
                                }); 
                            }  
                        } } );          
                    $(".tabs3").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                            {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                            },  
success: function() 
                            {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                                $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                                $(".ajaxColorBoxLabel").colorbox();         
                                $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                                $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                                $('ul li a').bind('click', function() 
                                {         
                                    var value = $(this).attr('href').substring(1);          $.address.value(value);      
                                }); 
                            }  
                        } } ); 
                    $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                    $(".ajaxColorBoxLabel").colorbox();         
                    $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                    $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                    $('ul li a').bind('click', function() 
                    {         
                        var value = $(this).attr('href').substring(1);          $.address.value(value);      
                    }); 
                }  
            } } ); 
        $(".tabs2").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                },  
success: function() 
                {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                    $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                    $(".ajaxColorBoxLabel").colorbox();         
                    $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                    $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                    $('ul li a').bind('click', function() 
                    {         
                        var value = $(this).attr('href').substring(1);          $.address.value(value);      
                    }); 
                }  
            } } ); 
        $(".tabs3").tabs( { 
ajaxOptions: {  
error: function( xhr, status, index, anchor ) 
                {  $( anchor.hash ).html("Couldn\'t load this tab. We\'ll try to fix this as soon as possible. ");  
                },  
success: function() 
                {          $(".tabs1").tabs();          $(".tabs2").tabs();          $(".tabs3").tabs(); 
                    $(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
                    $(".ajaxColorBoxLabel").colorbox();         
                    $(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
                    $(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});         
                    $('ul li a').bind('click', function() 
                    {         
                        var value = $(this).attr('href').substring(1);          $.address.value(value);      
                    }); 
                }  
            } } ); 

    });
    $.address.change(function(event) {
        var value = $.address.value();
        $.address.title(title + ' @ #' + value);
    });
    $.address.externalChange(function(event) {
        var value = $.address.value();
        var value_array = value.split('-');
        $(".tabs1").tabs("select", value_array[0]);
        $(".tabs2").tabs("select", value_array[1]);
        $(".tabs3").tabs("select", value_array[2]);
        $.address.value(value);
    });
    $.address.history(true);

    $('ul li a').bind('click', function() {
        var value = $(this).attr('href').substring(1);
        $.address.value(value);
    });    
});
</script>
</head>
<body>


<div class="tabs1">

<ul>

<li><a href="indexTab.php" title="index"><span>Home</span></a></li>
<li><a href="memberTab.php" title="member"><span>Données membre</span></a></li>
<li><a href="clubTab.php" title="club"><span>Club</span></a></li>
<li><a href="gestionTab.php" title="gestion"><span>Gestion</span></a></li>
<li><a href="toolsTab.php" title="tools"><span>Outils</span></a></li>

</ul>

<div id="index" class="ui-tabs-hide"></div>
<div id="member" class="ui-tabs-hide"></div>
<div id="club" class="ui-tabs-hide"></div>
<div id="gestion" class="ui-tabs-hide"></div>
<div id="tools" class="ui-tabs-hide"></div>
</div>






</body>
</html>

Use $('selector').delegate() it watches the DOM of 'selector' and .live() is deprecated.

Use this to watch your elements AND fire the colorbox initilization. This way the colorbox is not dependent on the DOM element, but the other way around.

Replace: 

$("a[rel='colorBox']").colorbox();

With: 

$("body").delegate("a[rel='colorBox']", "click", function (event) {
                event.preventDefault();
                var props = {href:$(this).attr("href")}
                if($(this).hasClass("ajaxColorBox"))
                    props['width'] = "75%";
                    props['height'] = "75%";
                }else if($(this).hasClass("ajaxColorBoxForm")){
                    props['width'] = "75%";
                    props['height'] = "75%";
                    props['inline'] = true;
                    props['href'] = "#inline_form";     
                }else if($(this).hasClass("ajaxColorBoxiFrame")){   
                    props['width'] = "75%";
                    props['height'] = "75%";
                    props['iframe'] = true;
                    props['onClosed'] = function(){ location.reload(true); }
                }
                $.colorbox(props);
});

This should basically solve your problem and is cross browser tested. The a[rel='colorbox'] in the delegate closure is the reference to what ever link you're clicking to fire the colorbox, whether it has been loaded with the initial DOM or with an AJAX request and has been added to the DOM in a live fashion. ie: any tag like this:

<a rel='colorbox' href="http://some.website.com">Launch Colorbox</a>

You can also now remove every instance of:

$(".ajaxColorBox").colorbox({width:"75%", height:"75%"});       
$(".ajaxColorBoxLabel").colorbox();         
$(".ajaxColorBoxForm").colorbox({width:"75%", height:"75%",inline:true, href:"#inline_form"});          
$(".ajaxColorBoxiFrame").colorbox({width:"75%", height:"75%",iframe:true,onClosed:function(){ location.reload(true); }});

from every single success: function(){}

0

上一篇:

:下一篇

更多 问答 相关资讯：

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

    关注公众号

    热门标签

    图文推荐

    Delphi - Custom drawing a message list

    Delphi - Custom drawing a message list
    C++ header-only include pattern

    C++ header-only include pattern
    IE7 Margin Collapses Into Padding

    IE7 Margin Collapses Into Padding
    in CoffeeScript, how can I use a variable as a key in a hash?

    in CoffeeScript, how can I use a variable as a key in a hash?
    Interactive visualization of a graph in python [closed]

    Interactive visualization of a graph in python [closed]
    How to customise PHP MYSQL tables?

    How to customise PHP MYSQL tables?
    High quality, simple random password generator

    High quality, simple random password generator
    Image Recognition ApI in android

    Image Recognition ApI in android

    开发者开发者网给大家分享系统运维,大数据运维,云计算,编程开发技巧,路由交换,运维和开发相关的资讯及技术文章，同时StackOverflow中文社区，知识经验交流分享。

    法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。邮箱：devze@qq.com

    Copyright © 2018-2020 开发者. All rights reserved. Powered by 开发者ICP备案号: 京ICP备10032868号-9