DevExpress官网

在接下来的一段时间，DevExpress中文网将会为大家奉上 DXTREME Mobile 的一些常用示例，DXTREME Mobile下有两个组件：Phone JS 和 Chart JS。首先为大家奉上的是Phone JS的示例。本示例演示如何添加列表到滑块布局(SlideOutLayout)中，并将命令管理器分成两个组。

首先复制一份SlideOutLayout.hml文件，然后准备添加List。接下来的第二个列表只需要复制就行了，为第二个列表指定一个CSS规则，让它一直在底部。看代码：

[CSS]
.layout-list-bottom {
    position: absolute;
    bottom: 0;
    height: auto;
    width: 100%;
}
.nav-list {
    height: 100%;
}

创建一个分离文件，并将上面这段代码放在这个文件中。另外，更改每个 dxList的data-dx-command-container属性，默认的本地名称是 "navigation"，但是我们将用"navigationTop"和"navigationBottom"去帮助CommandManager找到一个合适的容器。

<div class="nav-patrial-view" data-options="dxView : { name: 'custom-nav-list' } " >
    <div data-bind="dxList: {}" style="height: 100%" data-options="dxCommandContainer : { locations: [{'name':'navigationTop'}] } " >
        <div data-bind="visible: visible, css: { 'dx-state-disabled': disabled }" data-options="dxTemplate : { name: 'item' } " >
            <div data-bind="click: clickAction">
                <!-- ko if: icon -->
                <span  data-bind="attr: { 'class': 'dx-icon dx-icon-' + icon }"></span>
                <!-- /ko -->
                <!-- ko if: iconSrc -->
                <img class="dx-icon" data-bind="attr: { src: iconSrc }" />
                <!-- /ko -->
                <div class="dx-navigation-item" data-bind="text: title"></div>
            </div>
        </div>
    </div>
    <div data-bind="dxList: {}" class="layout-list-bottom" data-options="dxCommandContainer : { locations: [{'name':'navigationBottom'}] } " >
        <div data-bind="visible: visible, css: { 'dx-state-disabled': disabled }" data-options="dxTemplate : { name: 'item' } " >
            <div data-bind="click: clickAction">
                <!-- ko if: icon -->
                <span  data-bind="attr: { 'class': 'dx-icon dx-icon-' + icon }"></span>
                <!-- /ko -->
                <!-- ko if: iconSrc -->
                <img class="dx-icon" data-bind="attr: { src: iconSrc }" />
                <!-- /ko -->
                <div class="dx-navigation-item" data-bind="text: title"></div>
            </div>
        </div>
    </div>
</div>

现在，你需要做的就是为命令指定一个合适的位置：

"navigation": [
    {
        title: "Index",
        action: "#Index",
        icon: "home",
        location: "navigationTop"
    },
    {
        title: "About",
        action: "#About",
        icon: "info",
        location: "navigationBottom"
    }
]

<div class="nav-patrial-view" data-options="dxView : { name: 'custom-nav-list' } " >
    <div data-bind="dxList: {}" style="height: 100%" data-options="dxCommandContainer : { locations: [{'name':'navigationTop'}] } " >
        <div data-bind="visible: visible, css: { 'dx-state-disabled': disabled }" data-options="dxTemplate : { name: 'item' } " >
            <div data-bind="click: clickAction">
                <!-- ko if: icon -->
                <span  data-bind="attr: { 'class': 'dx-icon dx-icon-' + icon }"></span>
                <!-- /ko -->
                <!-- ko if: iconSrc -->
                <img class="dx-icon" data-bind="attr: { src: iconSrc }" />
                <!-- /ko -->
                <div class="dx-navigation-item" data-bind="text: title"></div>
            </div>
        </div>
    </div>
    <div data-bind="dxList: {}" class="layout-list-bottom" data-options="dxCommandContainer : { locations: [{'name':'navigationBottom'}] } " >
        <div data-bind="visible: visible, css: { 'dx-state-disabled': disabled }" data-options="dxTemplate : { name: 'item' } " >
            <div data-bind="click: clickAction">
                <!-- ko if: icon -->
                <span  data-bind="attr: { 'class': 'dx-icon dx-icon-' + icon }"></span>
                <!-- /ko -->
                <!-- ko if: iconSrc -->
                <img class="dx-icon" data-bind="attr: { src: iconSrc }" />
                <!-- /ko -->
                <div class="dx-navigation-item" data-bind="text: title"></div>
            </div>
        </div>
    </div>
</div>

<div class="slideout-layout dx-black-background" data-options="dxLayout : { name: 'custom', platform: 'ios', controller: 'slideout' } " >

    <div class="navigation-list" data-options="dxViewPlaceholder : { viewName: 'custom-nav-list' } " >
    </div>

    <div class="layout-frame dx-content-background">
        <div class="layout-header dx-toolbar" data-options="dxContentPlaceholder : { name: 'header', transition: 'slide' } " >
            <div data-bind="dxToolbar: {
    items: [
        { align: 'left', template: 'nav-button' },
        { text: title, align: 'center' }
    ]
}"
               
                class="layout-toolbar" data-options="dxCommandContainer : { locations: [
                    {'name':'menu','showText':false,'align':'left'},
                    {'name':'back','showIcon':false,'align':'left'},
                    {'name':'cancel','showIcon':false,'align':'left'},
                    {'name':'create','showText':false,'align':'right'},
                    {'name':'edit','showIcon':false,'align':'right'},
                    {'name':'save','showIcon':false,'align':'right'}] } " >
                <div style="display: none" class="nav-button-item" data-options="dxTemplate : { name: 'nav-button' } " >
                    <div class="nav-button" data-bind="dxButton: { icon: 'menu' }"></div>
                </div>
            </div>
        </div>

        <div class="layout-content dx-ios-stripes" data-options="dxContentPlaceholder : { name: 'content', transition: 'slide' } " >
            <div class="load-panel" data-bind="dxLoadPanel: { visible: true, shading: false, targetContainer: false }"></div>
        </div>
        <div class="menu-actionsheet" data-bind="dxActionSheet: {}" data-options="dxCommandContainer: { locations: [{ name: 'menu' }] }"></div>
    </div>

    <div class="view-footer" data-options="dxContent : { targetPlaceholder: 'view-footer' } " >
        <div data-bind="dxToolbar: { visible: false }" class="view-toolbar-bottom" data-options="dxCommandContainer : { locations: [{'name':'delete','showIcon':false,'defaultCommandOptions':{'type':'danger'}}] } " >
        </div>
    </div>
</div>

<div class="slideout-layout dx-black-background" data-options="dxLayout : { name: 'custom', platform: 'android', controller: 'slideout' } " >

    <div class="navigation-list" data-options="dxViewPlaceholder : { viewName: 'custom-nav-list' } " >
    </div>

    <div class="layout-frame dx-content-background">
        <div class="layout-header dx-toolbar" data-options="dxContentPlaceholder : { name: 'header', transition: 'slide' } " >
            <div data-bind="dxToolbar: {
    items: [
        { align: 'left', template: 'nav-button' },
        { text: title, align: 'center' }
    ]
}"
               
                class="layout-toolbar" data-options="dxCommandContainer : { locations: [
                    {'name':'create','showText':false,'align':'right'},
                    {'name':'edit','showText':false,'align':'right'}, 
                    {'name':'save','showText': false, 'align':'right'},
                    {'name':'menu','showText':false,'align':'right'}, 
                    { 'name':'delete', 'menu': true, 'align': 'right' }] } " >
                <div style="display: none" class="nav-button-item" data-options="dxTemplate : { name: 'nav-button' } " >
                    <div class="nav-button" data-bind="dxButton: { icon: 'menu' }"></div>
                </div>
            </div>
        </div>

        <div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', transition: 'slide' } " >
            <div class="load-panel" data-bind="dxLoadPanel: { visible: true, shading: false, targetContainer: false }"></div>
        </div>
    </div>

</div>

<div class="slideout-layout dx-black-background" data-options="dxLayout : { name: 'custom', platform: 'win8', phone: true, controller: 'slideout' } " >

    <div class="navigation-list" data-options="dxViewPlaceholder : { viewName: 'custom-nav-list' } " >
    </div>

    <div class="layout-frame dx-content-background">
        <div class="layout-header dx-toolbar" data-options="dxContentPlaceholder : { name: 'header', transition: 'slide' } " >
            <div data-bind="dxToolbar: {
    itemTemplate: function (index, item) {
        if (item.navButton) return 'navbutton';
    },
    items: [
        { align: 'left', navButton: true },
        { text: title, align: 'left' }
    ]
}"
               
                class="layout-toolbar" data-options="dxCommandContainer : { locations: [ {'name':'menu','showText':false,'align':'left'} ] } " >
                <div style="display: none" class="nav-button-item" data-options="dxTemplate : { name: 'navbutton' } " >
                    <div class="nav-button" data-bind="dxButton: { icon: 'menu' }"></div>
                </div>
            </div>
        </div>

        <div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', transition: 'slide' } " >  
            <div class="load-panel" data-bind="dxLoadPanel: { visible: true, shading: false, targetContainer: false }"></div>
        </div>

        <div data-bind="dxToolbar: { items: [], visible: false }" class="layout-toolbar-bottom win8 semi-hidden"
            data-options="dxCommandContainer : { locations: [
                { 'name':'save', 'align':'center' },
                { 'name':'cancel', 'align':'center' },
                { 'name':'create', 'align':'center' },
                { 'name':'edit', 'align':'center' },
                { 'name':'delete', 'align':'center' }
            ] } " >
        </div>
    </div>

</div>