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

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

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

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

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

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

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

應(yīng)用到一個特定的視圖布局，設(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)建一個div元素，同時設(shè)置它的data-dx-placeholder屬性到一個占位符的名字上。

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

如果要使用一個占位符，必須通過div元素的占位符顯示視圖標記。設(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>

以視覺過渡效果關(guān)聯(lián)一個占位符，設(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>

需要注意的是布局標記可以包含占位符數(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>

標簽：