1

我的移动网站动态添加标题栏以减少代码冗余。

但是，我坚持使用 jquery 移动页面的样式标题部分。

当我看到生成的 HTML 标签时，它看起来还不错，

但它的元素没有被 jQuery Mobile 修饰。

添加内容后，我调用了

$(pageId).trigger('create');

你有什么想法？

4

2 回答 2

1

这对我有用：http: //jsfiddle.net/emBxx/2/

HTML：

<script type="text/javascript" src="js/main.js"></script>

...

<div data-role="page" data-theme="b">
    <header></header>
    <div data-role="content">
        <div class="content-primary">
            <br />
            <ul data-role="listview" data-filter="true">
                <li><a href="index.html">Some</a></li>
                <li><a href="index.html">random</a></li>
                <li><a href="index.html">searchable</a></li>
                <li><a href="index.html">content</a></li>
                <li><a href="index.html">(list!)</a></li>
            </ul>
        </div><!--/content-primary -->  
    </div>
    <footer></footer>
</div><!-- page end-->
<script>      
    appendJQMHeader('Injected header !'); 
    appendJQMFooter('—Injected ftr!', 'JQM 1.3.1Beta');
</script>

JS，在 js/main.js 中：

function appendJQMHeader(pageTitle) {
    $('header').replaceWith(
        '<header data-role="header" data-theme="f">'+
        '<h1>'+pageTitle+'</h1>'+
        '<a href="index.html"  data-transition="slide" data-rel="back" data-icon="home" data-iconpos="notext" data-ajax="true">Home</a>'+
        '</header><!-- /header -->');
}

function appendJQMFooter(left, right) {
    $('footer').replaceWith('<footer data-role="footer" data-theme="f" class="jqm-footer"><p>&copy;'+left+'!</p><p class="jqm-version">—'+right+'</p></footer>');
}

注意：对于 JSfiddle，它需要 ' Framework & extension> No wrap - in <head>'
对于独立版本，它可以与包含 JS 的 html 头调用 js/main.js 一起正常工作。然后 html 正文与appendJQMHeader()& appendJQMFooter()。看小提琴:)

于 2013-04-25T20:13:10.020 回答
0

我没有调用触发方法，而是执行了以下命令，它运行良好。

$('#pageHome').closest(":jqmData(role='page')").trigger('pagecreate');
于 2013-04-09T17:39:04.920 回答