css不能在jquery mobile中处理动态加载的头文件 [英] css is not working on dynamicaly loaded header file in jquery mobile

问题描述

我正在研究jquery移动单页面应用程序，所以我的所有页面都在index.php中，具有不同的id.my问题是当我尝试为所有页面制作单个标题然后将该头文件添加到所有页面标头的CSS不起作用。
i在index.html的第一页中使用了那个标题，但是当我从外面调用它时它运行不正常。

i'm working on jquery mobile single page application so all my page are in index.php with different id's.my problem is that when i tried to make a single header to all pages then on adding that header file into all pages the css of header is not working. i have used that header in my first page in index.html thats working fine but when i called it from outside its not working properly.

这是我的标题file namd as appheader.html：

Here is my Header file namd as appheader.html:

<div data-role="header" data-theme="p" data-position="fixed">
        <h1></h1>
        <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-role="button">Menu</a>
    </div>

<a data-theme="d" data-corners="false" data-role="button" href="#"> <img src="images/pearl-logo.png" alt="rss" style="display: block; margin: 1.5em auto;"></a>

<div data-role="panel" id="left-panel"  data-position="left" data-display="push" data-dismissible="true" data-theme="c">
<ul data-role="listview" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="docs" class="jqm-list">
            <li data-role="list-divider">LINKS</li>
            <li><a href="#home">Home</a></li>
            <li><a href="#20years">20 Years</a></li>
            <li><a href="#courses">Courses</a></li>
            <li><a href="#events">Fun @ Pearl</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#noida">Noida</a></li>
            <li><a href="#jaipur">Jaipur</a></li>
            <li><a href="#delhi">Delhi</a></li>
            <li><img src="images/pearl-logo.png"></li>
</ul>       
</div>

这是jquery在我的index.html中添加此页面，其中不同的页面与id的组合：

Here is jquery to add this page in my index.html having differnt pages combined with id's:

<script>
$(document).ready(function(e) {

        $('[data-role=page]').one('pagebeforeshow', function (event, ui) {
       $("#" + event.target.id).find("[data-role=appheader]").load("appheader.html", function(){
         //$("#" + event.target.id).find("[data-role=panel]").trigger("pagecreate");
         // refresh the page again
        //   alert('ok');
         $("#" + event.target.id).trigger("create"); 
           });
        }); 

});

</script>

以下是我在index.html中的所有页面中调用它的方式：

Here is how i call it in my all pages inside index.html:

<div data-role="page" id="20years" data-title="20years" data-url="20years"> 
<div data-role="appheader"></div>
  <div data-role="content">
</div>
</div>

当在index.html中使用时，滑块工作正常，但当作为单独的文件调用时，它不会被调用。

The slider working fine when used in index.html but when called as a seperate file its not woking.

另一个qustion是如何让这个标题面板滑动，因为我的所有页面都有不同的id..i只是让它在我的一个页面上有id home：

another qustion is how can i make this header panel swipe as my all pages having different id's.i just make it work on one of my page having id home :

<script type="text/javascript">
$( document ).on( "pageinit", "#home", function() {
    $( document ).on( "swipeleft swiperight", "#home", function( e ) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft"  ) {
                $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#left-panel" ).panel( "open" );
            }
        }
    });
});

</script>

如何在此jquery中调用我的其他页面。

how can i call my another pages in this jquery.

推荐答案

尝试替换

$（＃+ event.target.id） .trigger（create）;

with

$（＃+ event.target.id）.trigger（pagecreate）;

这篇关于css不能在jquery mobile中处理动态加载的头文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！