Question

当用户点击某些链接时，我试图从XML文件中将内容加载到DIV中。我能够通过匹配通过由函数调用的函数传递的参数从xml将正确的内容加载到DIV中。 onClick.Now我试图使用ThickBox显示来自DIV的内容，我没有成功。我认为在内容加载到div myContent之前弹出厚盒子，因此我显示的是一个空白框.I知道我做错了，请提出任何建议/解决方法。

XML

<?xml version="1.0" encoding="UTF-8"?>
<books>

    <book>
        <title>
            Designing with Web standards
        </title>
        <description>
            Discusses how to use Web standards to create sophisticated Web sites efficiently, 
            covering topics such as quality assurance, functionality, and accessibility guidelines.     
        </description>
    </book>

    <book>
        <title>
            Professional JavaScript for Web Developers
        </title>
        <description>
            This book is aimed at three groups of readers: Experienced developers familiar with 
            object-oriented programming who are looking to learn JavaScript as it relates to traditional 
            OO languages such as Java and C++Web application developers         
        </description>
    </book>

</books>

HTML＆amp;的JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Books</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/thickbox.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="bookDescription"></div>
<div class="booksList"></div>

    <script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/thickbox.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">

    function parseXml(xml) {  

            if (jQuery.browser.msie) {  
                var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  
                xmlDoc.loadXML(xml);  
                xml = xmlDoc;  
            }  
            return xml;  
        }  

    function fnLoadContent(bookTitle){

        $('#bookDescription').html('');

        $.ajax({
            type: "GET",
            url: "books.xml",
            dataType: ($.browser.msie) ? "text" : "xml"  ,
            success: function(xml) {

                var newXML = parseXml(xml);

                $(newXML).find('title').each(function(i){

                    if($.trim($(this).text().replace(/ /g,''))==bookTitle){
                        $('#bookDescription').append('<p>'+$.trim($(this).parent().children('description').text())+'</p>');
                    }

                });

            }
        });


    }

    $.ajax({
            type: "GET",
            url: "books.xml",
            dataType: ($.browser.msie) ? "text" : "xml"  ,
            success: function(xml) {

                var newXML = parseXml(xml);
                var ul_newsList=document.createElement('ul');

                $(newXML).find('books').children().each(function(i){
                     $('<li><a title="'+$.trim($(this).children('title').text())+'" onclick=fnLoadContent("'+$.trim($(this).children('title').text()).replace(/ /g,'')+'") href="#TB_inline?height=155&width=300&inlineId=bookDescription" class="thickbox">'+$.trim($(this).children('title').text())+'</a></li>').appendTo(ul_newsList);  
                });

                $('.booksList').append(ul_newsList);

            }
        });
    </script>

</body>
</html>

我认为我需要在将内容注入div bookDescription之后立即调用thickbox.js中的tb_show（caption，url，imageGroup）。不确定如何

Answer 1

最后通过在创建链接并插入

时取出

title="'+$.trim($(this).children('title').text())+'" href="#TB_inline?height=155&width=300&inlineId=bookDescription" class="thickbox"

来使其工作

tb_show($.trim($(this).text()),'#TB_inline?height=155&width=300&inlineId=bookDescription');

单击链接时ajax调用成功。

使用ThickBox从XML文件加载内容

1 个答案: