搭建整体页面的框架(SPA单页面应用框架)建议运用以下Kendo UI控件:Splitter、Menu、TabStrip、Router。
基本组织思路是:由Splitter控件将整个页面分为页头Logo区、菜单导航区和主内容显示区,Menu控件负责菜单导航功能,TabStrip控件负责在内容区将数据内容以选项卡(标签)方式进行展示;由Router控件监听浏览器Url的变化,它在菜单区Menu控件和主内容区TabStrip控件之间起到关联协作的作用。
Menu、TabStrip和Router这3个控件构成了系统前端主体框架的页面组成和行为特性。其中Router控件起到联接Menu控件和TabStrip控件的作用,由它负责捕捉和处理浏览器Url片断变化(点击Menu控件的菜单上的链接时触发)和选项卡(标签)激活状态的变化(点击激活某个选项卡时触发),实现SPA模式下让浏览器记录浏览历史的功能。
Router的工作原理是使用HTML5新的History API或者Url的Hash修改Url,达到不跳转页面的情况下实现记录浏览历史。
Router所参与的两个重要过程:
点击菜单中带有#标的Url:浏览器地址栏改变,Router控件捕捉到Url的改变并判断指向这个Url的选项卡(标签)是否已经打开,如果已经打开,则激活选中,如果没有打开,则增加一个新的选项卡(标签)并加载这个Url的内容。
点击已打开的选项卡(标签):利用TabStrip控件的select事件,查找到被点击选项卡打开的Url(扩展属性data-content-url),Router控件将当前浏览器的地址改变为这个Url,以便记录浏览历史。