0

我有两个问题。

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

1 回答 1

1

我的事情我理解你的问题。当 jQuery Mobile 初始化时，只有第一个 HTML 页面被完全加载。当 jQuery Mobile 加载其他页面时，它将仅加载页面 div (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 -->

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

于 2013-07-24T22:13:41.350 回答