布局包括視圖相同的組件 （標(biāo)記、 隱藏的代碼和樣式表），區(qū)別在于布局包含呈現(xiàn)視圖內(nèi)容的占位符，當(dāng)使用布局的應(yīng)用程序需要顯示一個(gè)視圖時(shí)，它的內(nèi)容會(huì)都合并到布局，并顯示得到的標(biāo)記。占位符可以有關(guān)聯(lián)的視覺(jué)過(guò)渡效果，主要是在視圖更改的時(shí)候使用，使得布局達(dá)到以下的效果，今天就來(lái)看一下DXTREME ENTERPRISE布局設(shè)置的使用教程：

1、布局允許你布局允許您一次寫(xiě)入共同標(biāo)記 （類似于在 ASP.NET 的一個(gè)主頁(yè)）。不需要重復(fù)的為每個(gè)視圖使用相同的標(biāo)記。

2、布局幫助你的應(yīng)用程序?qū)崿F(xiàn)真正的跨平臺(tái)，一個(gè)視圖主要是由針對(duì)不同布局的占位符的標(biāo)記組成。這些塊的可視化主要是由一個(gè)特定的布局來(lái)決定的，因此，你可以使用多個(gè)布局，來(lái)為一個(gè)單一的視圖實(shí)現(xiàn)在不同設(shè)備上擁有本機(jī)的外觀和感覺(jué)。

創(chuàng)建一個(gè)布局,將其用一個(gè)div元素標(biāo)記，設(shè)置元素的data-dx-role屬性來(lái)布局，同時(shí)通過(guò)設(shè)置data-dx-name屬性來(lái)設(shè)置布局的名稱。

<div data-dx-role="layout" data-dx-name="myLayout"> 
</div>

你也可以通過(guò)應(yīng)用程序的視圖來(lái)設(shè)置使用默認(rèn)的布局，設(shè)置defaulLayout產(chǎn)權(quán)配置對(duì)象遞給構(gòu)造函數(shù)的HtmlApplication布局的名字。

myApp = new DevExpress.framework.html.HtmlApplication({ 
  defaultLayout: "myLayout"
   //... 
});

應(yīng)用到一個(gè)特定的視圖布局，設(shè)置在在根上的div 視圖元素的data-dx-layout屬性到布局名稱。

<div data-dx-role="view" data-dx-name="index" data-dx-layout="myLayout"> 
    <h1 data-bind="text: message"></h1> 
</div>

為了聲明占位符，創(chuàng)建一個(gè)div元素，同時(shí)設(shè)置它的data-dx-placeholder屬性到一個(gè)占位符的名字上。

<div data-dx-role="layout" data-dx-name="myLayout"> 
    <div data-dx-placeholder="content"></div> 
</div>

如果要使用一個(gè)占位符，必須通過(guò)div元素的占位符顯示視圖標(biāo)記。設(shè)置元素的data-dx-target-placeholder屬性到占位符名稱上。

<div data-dx-role="view" data-dx-name="index" data-dx-layout="myLayout">

 &nbsp; <div data-dx-target-placeholder="content">

    &nbsp; <h1 data-bind="text: message"></h1>

   </div>

</div>

以視覺(jué)過(guò)渡效果關(guān)聯(lián)一個(gè)占位符，設(shè)置占位符的div元素的data-dx-transition屬性為下滑，褪色或溢出。

<div data-dx-role="layout" data-dx-name="myLayout"> 
   <div data-dx-placeholder="content" data-dx-transition="slide"></div> 
</div>

需要注意的是布局標(biāo)記可以包含占位符數(shù)據(jù)用于綁定ViewModel。

<div data-dx-role="layout" data-dx-name="myLayout"> 
    <h1 data-bind="text: message"></h1> 
    <div data-dx-placeholder="content" data-dx-transition="slide"></div>
</div>

標(biāo)簽：