在html文件中向导入doc.js文件,
<script src="../assets/doc/doc.js"></script>
第一张图是页面的上部分:
第二张图是页面的底部分:
将这两张图作为页面的公用部分,doc.js文件的内容如下:
/** * 提供文档演示的相关接口。 */ var Doc = { /** * 配置所有文件夹信息。 */ folders: { /** * 存放文档系统文件的文件夹。 */ assets: { pageName: '工具', pageTitle: '开发者工具', pageDescription: 'TealUI 提供了组件定制、代码压缩、合并等常用工具' } }, headerTpl: '<nav id="doc_topbar" class="doc-container doc-section doc-clear">\ <a href="{baseUrl}{indexUrl}" id="doc_logo" title="TealUI(网页版)">TealUI <small>{version}</small></a>\ <span id="doc_menu" class="doc-right">\ <button type="button" id="doc_menu_search" οnclick="Doc.toggleSidebar();" {touchToClick}><span class="doc-icon">☌</span></button>\ <button type="button" id="doc_menu_navbar" οnclick="Doc.toggleNavbar();" {touchToClick}><span class="doc-icon">≡</span></button>\ </span>\ <ul id="doc_navbar">\ <li{actived:docs}><a href="{baseUrl}docs/{indexUrl}">开始使用</a></li>\ <li{actived:demos}><a href="{baseUrl}demos/{indexUrl}">实例演示</a></li>\ <li{actived:src}><a href="{baseUrl}src/{indexUrl}">所有组件</a></li>\ <li{actived:assets}><a href="{baseUrl}assets/tools/download.html">下载定制</a></li>\ <li><a href="https://github.com/Teal/TealUI/issues" target="_blank">讨论</a></li>\ </ul>\ <form id="doc_search" class="doc-right" οnsubmit="Doc.onSuggestSubmit(\'doc_search_suggest\'); return false;">\ <input type="text" placeholder="搜索组件..." value="{search}" autocomplete="off" οnfοcus="Doc.showSearchSuggest(this.value)" οnblur="Doc.hideSearchSuggest()" οninput="Doc.onSuggestInput(\'doc_search_suggest\', this.value, false)" οnchange="Doc.onSuggestInput(\'doc_search_suggest\', this.value, false)" οnkeydοwn="Doc.onSuggestKeyPress(\'