Question

我有两个问题。

1）当我在标题后面包含面板的html代码时，图像不会被应用 2）我有一个点击按钮打开SocialStream.html页面，面板（或滑动事件）在点击按钮时不起作用，仅适用于页面刷新。

这是我的html页面，其中包含用于页面加载的javascript。

<!DOCTYPE html>
<html>
<head>
<title>Social Stream</title>
<meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <link rel="stylesheet" href="http://socialmedia.mobilevelocity.co.uk/CS408/MySocialStream.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script> 
<script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<style>

    #welcomepage{ background: transparent url(../CS408/images/wallpaper.jpg) 0 0 repeat fixed !important;}
    #sslogo{max-height: 80%; max-width: 100%;}

</style>
</head>

<body>

   <div data-role="page" id="welcomepage"> <!--WelcomePage Start-->
    <div data-role="header" data-theme="f"><h5></h5></div>
       <div data-role="panel" id="left-panel" data-theme="b">
        <p>More text</p>
    </div><!-- /panel -->
    <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="c">
        <p>To be added</p>
    </div><!-- /panel -->  
     <div data-role="content">
     <div>
     <img src="/CS408/images/Social-Stream-Effect1.png" id="sslogo">
     </div>
          <a href="fb_feed.html" data-role="button" data-theme="f" data-transition="flip" rel="external" >Just Get Streaming Now! </a>
    </div><!--WelcomeContent End-->     
     <div data-role="footer" data-theme="f" data-position="fixed"><h5></h5></div> <!-- WelcomePage Footer End--> 
   </div> <!--WelcomePage End -->
   <script type="text/javascript">
$(document).on('pagebeforeshow', '#welcomepage', function(){        
    $( document ).on( "swipeleft swiperight", "#welcomepage", function( e ) {
        if ($.mobile.activePage.find('#left-panel').hasClass('ui-panel-closed') && e.type === "swipeleft") {
            $( "#right-panel" ).panel( "open" ); 
        }    

        if ($.mobile.activePage.find('#right-panel').hasClass('ui-panel-closed') &&  e.type === "swiperight") {
            $( "#left-panel" ).panel( "open" );           
        }        
    });
});
   </script>
  </body>
</html>

Answer 1

我理解你的问题。当jQuery Mobile初始化时，只有第一个HTML页面被完全加载。当jQuery Mobile加载其他页面时，它只会加载页面div（data-role =“page”），其他所有内容都将被丢弃。

这是因为ajax用于页面加载。因为初始HTML文件HEAD已经在DOM内部，所以没有必要加载它以用于下载页面。

要解决您的问题，请将您的CSS和javascript移到data-role =“page”div中。像这样：

    <div data-role="page" id="welcomepage"> <!--WelcomePage Start-->
        <style>

            #welcomepage{ background: transparent url(../CS408/images/wallpaper.jpg) 0 0 repeat fixed !important;}
            #sslogo{max-height: 80%; max-width: 100%;}

        </style>            
        <div data-role="header" data-theme="f"><h5></h5></div>
        <div data-role="panel" id="left-panel" data-theme="b">
            <p>More text</p>
        </div><!-- /panel -->
        <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="c">
            <p>To be added</p>
        </div><!-- /panel -->  
        <div data-role="content">
            <div>
                <img src="/CS408/images/Social-Stream-Effect1.png" id="sslogo"/>
            </div>
            <a href="fb_feed.html" data-role="button" data-theme="f" data-transition="flip" rel="external" >Just Get Streaming Now! </a>
        </div><!--WelcomeContent End-->     
        <div data-role="footer" data-theme="f" data-position="fixed"><h5></h5></div> <!-- WelcomePage Footer End--> 
        <script type="text/javascript">
            $(document).on('pagebeforeshow', '#welcomepage', function(){        
            $( document ).on( "swipeleft swiperight", "#welcomepage", function( e ) {
            if ($.mobile.activePage.find('#left-panel').hasClass('ui-panel-closed') && e.type === "swipeleft") {
            $( "#right-panel" ).panel( "open" ); 
            }    

            if ($.mobile.activePage.find('#right-panel').hasClass('ui-panel-closed') &&  e.type === "swiperight") {
            $( "#left-panel" ).panel( "open" );           
            }        
            });
            });
        </script>            
    </div> <!--WelcomePage End -->

如果您不喜欢此解决方案，请查看我的博客 ARTICLE ，其中讨论了此问题。在那里，您将找到更多解决方案和工作示例。

Jquery移动面板无法处理页面重定向和背景图像未应用

1 个答案: