利用Kendo UI 搭建SPA(单页面应用)的基本思路和主要控件选择

搭建整体页面的框架(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,以便记录浏览历史。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值