magix-components/tmpl/mx-dropdown/__test__/index.html

magix组件

<h2>mx-dropdown</h2>
<h3>单选</h3>
<div class="pt20 clearfix">
    <mx-dropdown
        searchbox="<%@searchbox%>"
        empty-text="请选择日期"
        mx-change="showWeek()" style="width:150px;">
        <item value="mon">周一</item>
        <item value="wed">周三</item>
        <item value="thu">周四</item>
        <item value="fri">周五</item>
        <item value="sat">周六</item>
    </mx-dropdown><button mx-click="test()" class="btn ml5 btn-brand">toggle searchbox</button>
    <mx-view path="mx-dropdown/index"
        searchbox="true"
        empty-text="请选择日期"
        mx-change="showWeek()"
        disabled="true"
        class="ml20" style="width:150px;border-radius: 4px 0 0 4px;">
        <item value="mon">周一</item>
        <item value="wed">周三</item>
        <item value="thu">周四</item>
        <item value="fri">周五</item>
        <item value="sat">周六</item>
    </mx-view>
    <mx-view path="mx-dropdown/index"
        searchbox="true"
        empty-text="请选择日期"
        mx-change="showWeek()"
        style="width:150px;margin-left:-1px; border-radius: 0 4px 4px 0">
        <item value="mon">周一</item>
        <item value="wed">周三</item>
        <item value="thu">周四</item>
        <item value="fri">周五</item>
        <item value="sat">周六</item>
    </mx-view>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view
    path="app/gallery/mx-dropdown/index"
    searchbox="true"
    empty-text="请选择日期"
    mx-change="showWeek()"
    class="fl" style="width:150px;"&gt;
    &lt;item value="mon"&gt;周一&lt;/item&gt;
    &lt;item value="wed"&gt;周三&lt;/item&gt;
    &lt;item value="thu"&gt;周四&lt;/item&gt;
    &lt;item value="fri"&gt;周五&lt;/item&gt;
    &lt;item value="sat"&gt;周六&lt;/item&gt;
&lt;/mx-view&gt;</pre>
    <div class="pt10">Javascript Code:</div>
    <pre>let Magix = require('magix');
let GTip = require('app/gallery/mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest();
    },
    'showWeek&lt;change&gt;' (e) {
        this.gtipRB('text:' + e.text + ',value:' + e.value);
    }
});</pre>
</div>

<h3 class="mt30">单选带分组</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-dropdown/index"
        searchbox="true"
        empty-text="请选择日期"
        mx-change="showWeek()"
        class="fl" style="width:150px;">
        <item group="true">本周日期</item>
        <item value="mon">周一</item>
        <item value="wed">周三</item>
        <item value="thu">周四</item>
        <item value="fri">周五</item>
        <item value="sat">周六</item>
        <item group="true">下周日期</item>
        <item value="next-mon">下周一</item>
        <item value="next-wed">下周三</item>
        <item value="next-thu">下周四</item>
        <item value="next-fri">下周五</item>
        <item value="next-sat">下周六</item>
    </mx-view>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view
    path="app/gallery/mx-dropdown/index"
    searchbox="true"
    empty-text="请选择日期"
    mx-change="showWeek()"
    class="fl" style="width:150px;"&gt;
    &lt;item group="true"&gt;本周日期&lt;/item&gt;
    &lt;item value="mon"&gt;周一&lt;/item&gt;
    &lt;item value="wed"&gt;周三&lt;/item&gt;
    &lt;item value="thu"&gt;周四&lt;/item&gt;
    &lt;item value="fri"&gt;周五&lt;/item&gt;
    &lt;item value="sat"&gt;周六&lt;/item&gt;
    &lt;item group="true"&gt;下周日期&lt;/item&gt;
    &lt;item value="next-mon"&gt;下周一&lt;/item&gt;
    &lt;item value="next-wed"&gt;下周三&lt;/item&gt;
    &lt;item value="next-thu"&gt;下周四&lt;/item&gt;
    &lt;item value="next-fri"&gt;下周五&lt;/item&gt;
    &lt;item value="next-sat"&gt;下周六&lt;/item&gt;
&lt;/mx-view&gt;</pre>
    <div class="pt10">Javascript Code:</div>
    <pre>let Magix = require('magix');
let GTip = require('app/gallery/mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest();
    },
    'showWeek&lt;change&gt;' (e) {
        this.gtipRB('text:' + e.text + ',value:' + e.value);
    }
});</pre>
</div>

<h3 class="mt30">动态数据并设置选中</h3>
<div class="pt20 clearfix">
    <mx-view
        path="mx-dropdown/index"
        searchbox="true"
        empty-text="请选择用户"
        text-key="name"
        value-key="id"
        selected="<%@ userSelected %>"
        list="<%@ userList %>"
        mx-change="showUser()"
        class="fl" style="width:200px;">
    </mx-view>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre lang="html">&lt;mx-view
    path="app/gallery/mx-dropdown/index"
    searchbox="true"
    empty-text="请选择用户"
    text-key="name"
    value-key="id"
    selected="&lt;%@ userSelected %&gt;"
    list="&lt;%@ userList %&gt;"
    mx-change="showUser()"
    class="fl" style="width:200px;"&gt;
&lt;/mx-view&gt;</pre>
    <div class="pt10">Javascript Code:</div>
    <pre>let Magix = require('magix');
let GTip = require('app/gallery/mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest({
            userList: [{
                name: 'xinglie',
                id: 58782
            }, {
                name: 'xinglie1',
                id: 587821
            }, {
                name: 'xinglie2',
                id: 587822
            }, {
                name: 'xinglie3',
                id: 587823
            }, {
                name: 'xinglie4',
                id: 587824
            }, {
                name: 'xinglie5',
                id: 587825
            }, {
                name: 'xinglie6',
                id: 587826
            }, {
                name: 'xinglie7',
                id: 587827
            }, {
                name: 'xinglie8',
                id: 587828
            }, {
                name: 'xinglie9',
                id: 587829
            }],
            userSelected: 587828
        });
    },
    'showUser&lt;change&gt;' (e) {
        this.gtipRB('name:' + e.text + ',id:' + e.value);
    }
});</pre>
</div>

<h3 class="mt30">多选</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-dropdown/multiple"
        searchbox="<%@searchbox%>"
        empty-text="请选择日期"
        mx-change="showWeeks()"
        class="fl" style="width:150px;">
        <item value="mon">周一</item>
        <item value="wed">周三</item>
        <item value="thu">周四</item>
        <item value="fri">周五</item>
        <item value="sat">周六</item>
    </mx-view>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view
    path="app/gallery/mx-dropdown/multiple"
    searchbox="true"
    empty-text="请选择日期"
    mx-change="showWeeks()"
    class="fl" style="width:150px;"&gt;
    &lt;item value="mon"&gt;周一&lt;/item&gt;
    &lt;item value="wed"&gt;周三&lt;/item&gt;
    &lt;item value="thu"&gt;周四&lt;/item&gt;
    &lt;item value="fri"&gt;周五&lt;/item&gt;
    &lt;item value="sat"&gt;周六&lt;/item&gt;
&lt;/mx-view&gt;</pre>
    <div class="pt10">Javascript Code:</div>
    <pre>let Magix = require('magix');
let GTip = require('app/gallery/mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest();
    },
    'showWeeks&lt;change&gt;' (e) {
        this.gtipRB('values:' + e.values);
    }
});</pre>
</div>

<h3 class="mt30">多选带分组</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-dropdown/multiple"
        searchbox="true"
        empty-text="请选择日期"
        mx-change="showWeeks()"
        class="fl" style="width:150px;">
        <item group="true">本周日期</item>
        <item value="mon">周一</item>
        <item value="wed">周三</item>
        <item value="thu">周四</item>
        <item value="fri">周五</item>
        <item value="sat">周六</item>
        <item group="true">下周日期</item>
        <item value="next-mon">下周一</item>
        <item value="next-wed">下周三</item>
        <item value="next-thu">下周四</item>
        <item value="next-fri">下周五</item>
        <item value="next-sat">下周六</item>
    </mx-view>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view
    path="app/gallery/mx-dropdown/multiple"
    searchbox="true"
    empty-text="请选择日期"
    mx-change="showWeeks()"
    class="fl" style="width:150px;"&gt;
    &lt;item group="true"&gt;本周日期&lt;/item&gt;
    &lt;item value="mon"&gt;周一&lt;/item&gt;
    &lt;item value="wed"&gt;周三&lt;/item&gt;
    &lt;item value="thu"&gt;周四&lt;/item&gt;
    &lt;item value="fri"&gt;周五&lt;/item&gt;
    &lt;item value="sat"&gt;周六&lt;/item&gt;
    &lt;item group="true"&gt;下周日期&lt;/item&gt;
    &lt;item value="next-mon"&gt;下周一&lt;/item&gt;
    &lt;item value="next-wed"&gt;下周三&lt;/item&gt;
    &lt;item value="next-thu"&gt;下周四&lt;/item&gt;
    &lt;item value="next-fri"&gt;下周五&lt;/item&gt;
    &lt;item value="next-sat"&gt;下周六&lt;/item&gt;
&lt;/mx-view&gt;</pre>
    <div class="pt10">Javascript Code:</div>
    <pre>let Magix = require('magix');
let GTip = require('app/gallery/mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest();
    },
    'showWeeks&lt;change&gt;' (e) {
        this.gtipRB('values:' + e.values);
    }
});</pre>
</div>

<h3 class="mt30">动态数据并设置选中</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-dropdown/multiple"
        searchbox="true"
        empty-text="请选择用户"
        text-key="name"
        value-key="id"
        selected="<%@ usersSelected %>"
        list="<%@ userList %>"
        mx-change="showUsers()"
        class="fl" style="width:200px;">
    </mx-view>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre lang="html">&lt;mx-view
    path="app/gallery/mx-dropdown/multiple"
    searchbox="true"
    empty-text="请选择用户"
    text-key="name"
    value-key="id"
    selected="&lt;%@ usersSelected %&gt;"
    list="&lt;%@ userList %&gt;"
    mx-change="showUsers()"
    class="fl" style="width:200px;"&gt;
&lt;/mx-view&gt;</pre>
    <div class="pt10">Javascript Code:</div>
    <pre>let Magix = require('magix');
let GTip = require('app/gallery/mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest({
            userList: [{
                name: 'xinglie',
                id: 58782
            }, {
                name: 'xinglie1',
                id: 587821
            }, {
                name: 'xinglie2',
                id: 587822
            }, {
                name: 'xinglie3',
                id: 587823
            }, {
                name: 'xinglie4',
                id: 587824
            }, {
                name: 'xinglie5',
                id: 587825
            }, {
                name: 'xinglie6',
                id: 587826
            }, {
                name: 'xinglie7',
                id: 587827
            }, {
                name: 'xinglie8',
                id: 587828
            }, {
                name: 'xinglie9',
                id: 587829
            }],
            usersSelected: [58782,587829]
        });
    },
    'showUsers&lt;change&gt;' (e) {
        this.gtipRB('user ids:' + e.values);
    }
});</pre>
</div>