Question

这是调用上述方法的html文件。单击调用“callAjax”时，我可以显示列表视图。单击这些列表视图时，不会显示导航栏标题。

<body>
    <div data-role="page" >
    <div data-role="header" data-theme="b" >
        <h1>NDUS Directory</h1>
    </div><!-- /header -->

    <div data-role="content" >  
        <div id ="divsearch" class ="LogoImage" >
            <img src="Images/logo.gif" align="middle" />
        </div>
        <p></p>

        <label for="fname">First Name: </label>
        <input type="text" name="fname" id="fname" value=""  />
        <label for="lname">Last Name: </label>
        <input type="text" name="lname" id="lname" value=""  />
        <p></p>   

        <input id="callAjax" type="button" value="Search" data-theme="b" />

        <!--  TO SHOW PEOCESSING LAG INFORMATION -->

        <span id="sp" class = "spanRed"></span> 
            <div id="resultLog">

            </div>
            <div id="ajaxBusy" class ="busyAJAX">
                <p>
                    <img src="Images/progress.gif">
                </p>
            </div>


            <span id="placeholder"></span>

            <ul id = "idul" data-role="listview" data-theme="b" data-inset="true">
            </ul>
        </div><!-- /content -->
</div><!-- /page -->
</body>
</html>

enter image description here 这是一个动态生成列表视图的示例ajax调用。代码完成它的工作..但是显示列表视图详细信息的窗口（单击时）没有获得导航栏的任何标题。在code..it中需要显示txt.firstname和txt.lastname。

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "DirectoryData.asmx/TestSearch",
    data: argument,
    dataType: "json",
    beforeSend: function () {
        $("#resultLog").html("Loading" + '<img src="Images/progress.gif" />');
    },
    success: function (msg) {
        var items = [];

        $("#unfinshed").remove();

        var public_tweets = JSON.parse(msg.d);

        if (public_tweets.length > 0) {
            // remove older values
            $("#placeholder").after('<ol id="unfinshed" data-role="listview" data-theme="b" data-inset="true" data-dividertheme="c"></ol>');
            $('<li data-role="list-divider">Records found: ' + public_tweets.length + '</li>').appendTo("#unfinshed");

            // $('#unfinshed').empty();
            for (var x = 0; x < public_tweets.length; x++) {
                var txt = public_tweets[x];
                var imageName;

                if (txt.type == "Faculty") {
                    imageName = "Images/BusinessPerson.png";
                } else {
                    imageName = "Images/StudentPerson.png";
                }
                //<img src="images/gf.png" alt="France" class="ui-li-icon">

                $('<li><img src="' + imageName + '" class="ui-li-icon">
                    <a href="#" >' + txt.firstname + ' ' + txt.lastname + '
                    </a><p></p><p>' + txt.title + '</p>' +
                    '<ul data-theme="c" data-inset="true">' +
                    '<li><span class="dirHeaderFont">' + 'Institution:</span><p></p>
                    <span class="footerTextFont">' + txt.institution + '</span></li>' +
                    '<li><span class="dirHeaderFont">' + 'Department:</span><p></p>
                    <span class="footerTextFont">' + txt.department + '</span></li>' +
                    '<li><span class="dirHeaderFont">' + 'Title:</span><p></p>
                    <span class="footerTextFont">' + txt.title + '</span></li>' +
                    '<li data-icon="grid"><span class="dirHeaderFont">' + 
                    'Phone:</span><p></p><span class="footerTextFont">
                    <a href="tel:' + txt.phonenumber + '">' + txt.phonenumber + 
                    '</a></span></li>' +
                    '<li data-icon="search"><span class="dirHeaderFont">' + 
                    'Email:</span><p></p><span class="footerTextFont">
                    <a href="mailto:' + txt.email + '">' + txt.email + 
                    '</a></span></li>' +
                    '<li><span class="dirHeaderFont">' + 'Active:</span><p>
                    </p><span class="footerTextFont">' + txt.active + 
                    '</span></li>' + '</ul>' +
            '</li>').appendTo("#unfinshed");

            }
            $("#unfinshed").page();

        } else {
            // display no records found
            $("#placeholder").after('<ul id="unfinshed" data-role="listview" data-theme="c" data-inset="true"></ul>');
            $('<li>' + 'No records found' + '</li>').appendTo("#unfinshed");
            $("#unfinshed").page();

        } // end of public_tweets check

        $("#resultLog").html(' '); // remove the loading image

    }
}); // end of ajax


$("#resultLog").ajaxError(function (event, request, settings, exception) {
    $("#resultLog").html("Error connecting to database. Try again later.");
    //$("#resultLog").html("Error connecting to database. Try again later.: " + settings.url + "<br />HTPP Code: " + request.status);
});

Answer 1

您可以尝试添加如下自定义标题：

$("div:jqmData(role='header')").prepend('<h1>Custom Title</h1>');

可能需要稍微修补它但它有效

更新：

直播示例：

http://jsfiddle.net/phillpafford/trdYP/51/

JS：

$("div:jqmData(role='header') > h1").replaceWith('<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">New Title</h1>');

HTML：

<div data-role="page" id="home"> 
    <div data-role="header"> 
        <h1 >Home</h1> 
    </div> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Home Page</li> 
            <li><a href="#page2">Page 2</a></li>  
        </ul> 
    </div>
</div>
<!-- Page 2 -->
<div data-role="page" id="page2"> 
    <div data-role="header"> 
        <h1 >Page 2</h1> 
    </div> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Home Page</li> 
            <li><a href="#home">Home Page</a></li>  
        </ul> 
    </div>
</div>

JqueryMobile导航标题问题

1 个答案: