2013-01-04 46 views
1

我们有一个手机网站会在一段时间内上线。我们需要在页面的头部添加一个名为[iphone/ipad/mobile]原生应用的页面。 但是,是否有可能推动jQuery的移动页面标题,以显示此通知。当我们点击此条上的关闭按钮时,此通知消失。用jquery mobile在手机网站下载手机应用程序通知

同样的事情我看到target site。试试看Tab/mobile。

回答

0

您可以轻松地使用第二头和隐藏它,当你完成:

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQM Complex Demo</title> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
</head> 
<body> 
    <div data-role="page" id="index"> 
     <div data-theme="a" data-role="header" id="custom_header"> 
      <h3> 
       Nothing prevents you to create a custom header 
      </h3> 
     </div>   
     <div data-theme="a" data-role="header"> 
      <h3> 
       First Page 
      </h3> 
      <a href="#second" class="ui-btn-right">Next</a> 
     </div> 

     <div data-role="content"> 
      <a href="#" data-role="button" id="test-button">Test button</a> 
     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 

     </div> 
    </div> 
</body> 
</html>  

该解决方案还需要自定义CSS:

#custom_header { 
    background: #000 !important; 
} 

这将隐藏它:

$('#index').live('pagebeforeshow',function(e,data){  
    $('#close-custom-header').live('click', function(e) { 
     $('#custom_header').toggle(); 
    });  
}); 

例如:http://jsfiddle.net/Gajotres/w6vBK/