0

2 つの問題があります。

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