Javascript 不同页面之间的共享页脚（在JQuery中使用数据角色=“页面”时）_Javascript_Jquery_Css

Javascript 不同页面之间的共享页脚（在JQuery中使用数据角色=“页面”时）

javascript jquery css

Javascript 不同页面之间的共享页脚（在JQuery中使用数据角色=“页面”时）,javascript,jquery,css,Javascript,Jquery,Css,我有一个共享的div页脚，他的所有内部元素在两个页面上都必须相同 <div id="page1" data-role="page"> </div> <div id="page2" data-role="page"> </div> <div id="bar" data-role="footer" class="sharedSlideBar"> </div> 稍后，我将使用$.mobile.nav

我有一个共享的div页脚，他的所有内部元素在两个页面上都必须相同

 <div id="page1"  data-role="page">

 </div>

 <div id="page2"  data-role="page">

 </div>

 <div id="bar" data-role="footer" class="sharedSlideBar">

 </div>

稍后，我将使用$.mobile.navigate（“#page2”）更改页面1，我不想保留它共享div页脚（#bar）页面的功能和样式

怎么可能呢？

jQuery mobile有两个页面模板

一个是将每个页面放在一个HTML文件中，就像您的例子一样。它也称为多页模板

第二个每个HTML文件有一个页面。它被称为多HTML模板

了解更多关于他们的信息

您需要的是一个多HTML模板。下面是一个工作示例：

HTML 1-index.HTML：


$（文档）.on（'pagebeforeshow'，“#index”，函数（）{
$（文档）。在（'click'，“#changePage”，函数（）{
$.mobile.changePage（'second.html'，{dataUrl:'second.html？paremeter=123'，数据：{'paremeter'：'123'}，重载页面：false，changeHash:true}）；
}); 
}); 
$（文档）。on（'pagebeforeshow'，“#second”，函数（）{
var参数=$（this.data（“url”）.split（“？”[1]；；
参数=参数。替换（“参数=”，“”）；
警报（参数）；
});         
首页

HTML 2-second.HTML：


第二页

还有一件事你需要知道。只有第一个HTML文件可以有多个内部数据role=“page”
。每隔一个HTML页面只能有一个数据role=“page”
。原因如下所述。如果您需要更多信息，请给我一个评论。

怎么可能？不确定jquery，但如果您只关心内容（类保持不变？）而不是css（3）。classFooter:before{content attr（data content）可能是合理的选择（并且数据内容属性可能会随任何js更改）您的（Gaurav）将代码拆分为2个html文件的解决方案不是我想要的。我只是不想保存数据角色页面的样式。我相信他希望继续使用多页面模板。我还想知道如何在一个html文件中实现这一点，因为我正在创建一个小型Cordova应用程序，它将受益于一次加载所有页面。

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    <script>
        $(document).on('pagebeforeshow', "#index",function () {
            $(document).on('click', "#changePage",function () {     
                $.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
            }); 
        }); 

        $(document).on('pagebeforeshow', "#second",function () {
            var parameters = $(this).data("url").split("?")[1];;
            parameter = parameters.replace("parameter=","");  
            alert(parameter);
        });         
    </script>
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="index">
        <div data-role="header">
            <h3>
                First Page
            </h3>
        </div>
        <div data-role="content">
          <a data-role="button" id="changePage">Javascript change page example</a>
                      <a href="second.html" data-transition="slide">Direct link button</a>
        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="second">
        <div data-role="header">
            <h3>
                Second Page
            </h3>
        </div>
        <div data-role="content">

        </div> <!--content-->
    </div><!--page-->

  </body>
</html>