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