Onpage Help 帮助页

Overview

点击则以对话框的形式弹出

引用 assets/js/ace/elements.onpage-help.js

Usage

jQuery(function($) {

var help = new Onpage_Help({/ for available options, see below /});

$('#some-button').on('click', function() {

help.toggle();

//or help.enable()

//or help.disable()

})

帮助页面的内容是另外一个文件，程序中有相对应的 data-id

data-id="#manage/user"

Some elements are here which will show a help dialog when clicked!

Documentation and help content for "manage/user" are here inside some file.

Manage user documentation is here

Delete user documentation is here

<a href="#">Delete</a>

Options

icon_1

icon_2

include_all

base 帮助文档路径

section_url 回调函数返回一个url加载内容

'section_url': function(section_name) {

//From Ace Demo's example

//according to a section_name such as basics/navbar.toggle return the file url which contains help content

section_name = section_name || '';

//for example convert section_name=basic/navbar.layout.brand to basic/navbar

//because in Ace's documentation files 'basic/navbar.layout.brand' section is inside basic/navbar.html file

var url = section_name.replace(/..*$/g, '');

var parts = url.split('/');

if(parts.length == 1) {

//for example convert changes to changes/index.html

if(url.length == 0) url = 'intro';//or convert empty string to intro/index.html

url = url + '/index.html';

}

else if(parts.length > 1) {

//for example convert basics/navbar.layout to basics/navbar.html

url = url + '.html';

}

return this.settings.base + '/docs/sections/' + url;

}

file_url 类似于'section_url ，打开一个文件

img_url 插入图像

code_highlight 代码片段高亮显示

before_enable 启用前

after_enable 启用后

before_disable

add_panels

panel_content_selector 选择器

panel_content_title

Onpage Help 帮助页