jQuery Вложенная вкладка с опцией закладки - PullRequest
Новая
       0

jQuery Вложенная вкладка с опцией закладки

0 голосов
/ 29 июля 2011

У меня есть сайт, который занимается управлением. Там я использовал JQuery Tab для структуры и вызывал все панели, используя AJAX. Я также использую JQuery-адрес для закладок согласно сообщению, которое я нашел где-то

У меня 2 проблемы

1) Хотя все это отлично работает с FF, я не могу заставить его работать в IE (ну, просто закладка) 2) Мой JavaScript выглядит ужасно (и я не вижу, как его упростить)

Не могли бы вы помочь здесь?

Спасибо

Вот код: 

<!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>

1 Ответ

0 голосов
/ 24 января 2012

Используйте $('selector').delegate(), это наблюдает за DOM 'селектора', а .live() устарело.

Используйте это, чтобы посмотреть ваши элементы И запустить инициализацию colorbox.Таким образом, colorbox не зависит от элемента DOM, а наоборот.

Заменить: 

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

На: 

$("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);
});

Это должно в основном решитьВаша проблема и кросс-браузерная проверка.[Rel = 'colorbox'] в закрытии делегата является ссылкой на любую ссылку, по которой вы щелкаете, чтобы запустить colorbox, независимо от того, была ли она загружена с исходным DOM или с помощью запроса AJAX и добавлена ​​в DOMв прямом эфире.то есть: любой тег, подобный этому: 

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

Теперь вы также можете удалить каждый экземпляр: 

$(".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); }});

из каждого success: function(){}

...