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

2019独角兽企业重金招聘Python工程师标准>>>

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)); 
});

转载于:https://my.oschina.net/u/161146/blog/1549431