gpt4 book ai didi

jquery - css 不适用于 jquery mobile 中动态加载的头文件

转载 作者:太空宇宙 更新时间:2023-11-04 04:21:57 25 4
gpt4 key购买 nike

我正在开发 jquery 移动单页应用程序,所以我的所有页面都在具有不同 ID 的 index.php 中。我的问题是,当我尝试为所有页面创建一个 header ,然后将该 header 文件添加到所有页面中时header 的 css 不工作。我在 index.html 的第一页中使用了该 header ,它工作正常,但是当我从外部调用它时,它无法正常工作。

这是我的头文件 namd 为 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 相结合的不同页面:

<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 中的所有页面中调用它的方式:

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

slider 在 index.html 中使用时工作正常,但作为单独的文件调用时它不工作。

另一个问题是如何让这个标题面板滑动,因为我的所有页面都有不同的 id。我只是让它在我的一个有 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 中调用我的其他页面。

最佳答案

尝试替换

$("#"+ event.target.id).trigger("create");

$("#"+ event.target.id).trigger("pagecreate");

关于jquery - css 不适用于 jquery mobile 中动态加载的头文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18910015/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com