Kendo UI 單頁面應用 四 Layout

2022-10-10 23:15:25 字數 1358 閱讀 6689

layout 繼承自 view,可以用來包含其它的 view 或是 layout。下面例子使用 layout 來顯示乙個 view

<

div

id>

div>

<

script

>

varview

=new

kendo.view(

"foo");

varlayout

=new

kendo.layout(

"header");

layout.render($(""

)); layout.showin(

"#content

", view);

script

>

這個例子建立乙個 layout 物件,這個 layout 含有乙個 header,乙個 content 和乙個 footer ,其中 content以setion 元素定義,作為乙個 placeholder, 實際應用時可以使用某個 view 來替換。

layout 本身也是乙個 view,因此在 showin 方法中也可以傳入乙個 layout 物件,從而實現 layout 的巢狀支援。

layout 定義多個 view 統一的布局,定義了 view 的 placeholder,因此在應用中可以實現 view 的切換。例如:

<

div

id>

div>

<

script

>

varfoo

=new

kendo.view(

"foo

", });

varbar

=new

kendo.view(

"bar");

varlayout

=new

kendo.layout(

"header");

layout.render($(""

)); layout.showin(

"#content

", foo);

layout.showin(

"#content

", bar);

script

>

這段**首先顯示」foo」 ,然後很快切換到顯示 「bar」。 這可以通過檢查 log 來確認:

單頁面應用

什麼是 spa 單頁面應用 為啥要寫 spa 簡單來說,為了追求更高一層的使用者體驗。spa 應用的特點是一次性的把頁面顯示邏輯都載入到了本地瀏覽器中,以後每次請求,伺服器那邊都是提供新的資料,而不再向以往一樣傳送 html 所以,每次點乙個鏈結,頁面上能看到的是顯示載入資料的轉來轉去小圈圈,而不是...

單頁面應用 與 多頁面應用

單頁面應用結構檢視如下 多頁面應用結構檢視如下 具體對比分析 單頁面應用 多頁面應用 組成乙個外殼頁面和多個頁面片段組成 多個完整頁面構成 資源 css,js 共用,只需在外殼部分載入 不共用,每個頁面都需要載入 重新整理方式 頁面區域性重新整理或更改 整頁重新整理 url格式 使用者體驗 頁面片段...

多頁面應用和單頁面應用

每次頁面跳轉,後端都會返回乙個新的html檔案。優點 首屏時間快,seo效果好 缺點 頁面切換慢 後端路由切換頁面 每次跳轉頁面都要發乙個http請求。只在首次載入時請求乙個html檔案,頁面切換的路由由前端完成,使用js動態地刪除和渲染頁面。優點 頁面切換快 由前端路由切換頁面 缺點 首屏時間稍慢...