Jquery Mobile 画面导航栏共用的实现方法

gulp中使用 gulp-file-include 能够使html中包含其余的文件内容，

避免重复屡次写网页上相同的部分，未来要修改起来也须要多长改动，很是不方便。

 

例如：须要在手机网页应用中，首页的页脚部分增长下方的固定的导航栏

在 index.html中增长以下内容

<div data-role="page" id="page1">
    @@include('./html/include/navbar.html')
</div>

同时在 ./html/include/navbar.html 目录下新增 navbar.html文件

<div data-role="footer" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li>
            <a data-icon="home" href="index.html" class="ui-btn-active ui-state-persist">首页</a>
        </li>
        <li><a data-icon="alert" href="alert.html">通信录</a></li>
        <li><a data-icon="user" href="user.html">个人信息</a></li>
      </ul>
    </div>
</div>

这样则实现了在index.html中引用通用的navbar.html

 

另外，须要安装 gulp-file-include的引用

npm install gulp-file-include –save-dev

在gulpfile.js中增长以下内容：

var fileinclude = require('gulp-file-include');

gulp.task('fileinclude', function() { 
    return gulp.src(HTML_ROOT_DEST+'/*.html') 
        .pipe(fileinclude({ 
          prefix: '@@', 
          basepath: '@file' 
        })) 
        .pipe(gulp.dest(HTML_ROOT_DEST)); 
});