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

我有两个问题。

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>

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

这是因为ajax用于页面加载。因为最初的HTML文件HEAD已经在DOM中了，所以加载它来分解页面是没有意义的。

要解决您的问题，请在data role="page"div中移动CSS和javascript

    <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 -->

如果你不喜欢这个解决方案，可以看看我的博客文章，它讨论了这个问题。在那里你会发现更多的解决方案和工作实例。

相关内容

最新更新

热门标签：