前面文章我们规划了系统框架、编写了主体架构、新增了按钮。本章我们新增菜单并跳转到新页面，打开一个表格。

我们先学两个函数：

put_collapse(title, content=[], open=False, scope=None, position=- 1)

输出可折叠的内容。

参数如下：

• title (str) – 内容标题
• content (list/str/put_xxx()) – 内容可以为字符串或 put_xxx 类输出函数的返回值，或者由它们组成的列表。
• open (bool) – 是否默认展开折叠内容。默认不展开内容
• scope, position (int) – 与 put_text 函数的同名参数含义一致

样例：

put_collapse('Large text', 'Awesome PyWebIO! '*3)

put_collapse('Collapse title', [
    'text',
    put_markdown('~~Strikethrough~~'),
    put_table([
        ['Commodity', 'Price'],
        ['Apple', '5.5'],
    ])
], open=True)

put_link(name, url=None, app=None, new_window=False, scope=None, position=- 1)

输出链接到其他网页或PyWebIO App的超链接。

参数如下：

• name (str) – 链接名称
• url (str) – 链接到的页面地址
• app (str) – 链接到的PyWebIO应用名。url 和 app 参数必须指定一个但不可以同时指定
• new_window (bool) – 是否在新窗口打开链接
• scope, position (int) – 与 put_text 函数的同名参数含义一致

样例：

def task_1():
    put_text('task_1')
    put_link('task_2',app='task_2')
def task_2():
    put_text('task_2')
    put_buttons(['Go task 1'],onclick=[lambda:put_link('task_1',app='task_1')])
def index():
    put_link('Go task 1',app='task_1')
    put_link('Go task 2',app='task_2')
start_server([index,task_1,task_2])

现在我们编写系统内的菜单，代码如下：

put_collapse('人员管理',[put_text('人员基本信息'),put_text('人员情况表')])

效果如下：

下面我们增加一个链接：

put_collapse('人员管理', [put_link('人员基本信息',app='people',scope='data')])

效果如下：

下面我们将这个菜单赋值给一个参数，然后添加进菜单区域。

menu_page = put_collapse('人员管理', [put_link('人员基本信息',app='people',scope='data')])
#按钮区域添加两个按钮：新建、删除
button_page = put_buttons(['新建', '删除'], onclick=['edit', 'delete']).style('text-align:right;margin-top:13px;')
#页面主体框架
put_row([put_text('logo')]).style('border:1px solid green ;text-align:left;background-color:yellow;')
put_row([
    put_column([menu_page]),None,
    put_column([
        put_row([button_page]).style('border:1px solid red ;text-align:right;background-color:grey;'),None,
        put_row([put_scope('data',content=put_text('data'))]),None,
        put_row([put_code('page')])
    ])
],size =  '15% 1% 84%')

效果如下：

当我们点击菜单时，系统可以跳转到一个新的页面，只不过现在还是空白或报错。

下一章我们跳转到新页面，并为页面增加一个table表格。

留一个疑问：能否让新页面在data区域打开。欢迎大家留言沟通。下章见。