Question

我确实有一个网站可以进行某种管理。在那里我使用JQuery Tab作为结构并使用AJAX调用所有面板。我根据我在某个地方找到的帖子使用JQuery Address作为书签

我有两个问题

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>

Answer 1

使用$('selector').delegate()它会监视“选择器”的DOM并且不推荐使用.live()。

使用它来观察你的元素并启动彩盒启动。这样，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);
});

这基本上可以解决您的问题并且经过浏览器测试。委托闭包中的a [rel ='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(){}

带有书签选项的jQuery嵌套选项卡

1 个答案: