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

magix组件

<h2>mx-effect</h2>
<h3>count</h3>
<div class="pt20 clearfix">
    <input class="input" mx-view="mx-effect/count" view-to="<%=toNumber%>">
    <div mx-view="mx-effect/count" view-to="<%@toNumber%>" view-duration="2000" view-fixed="2" style="font-size: 30px;line-height: 50px;letter-spacing: 2px;"></div>
    <button class="btn btn-brand ml5" type="button" mx-click="changeNumber({i:true})">increase number</button>
    <button class="btn btn-brand ml5" type="button" mx-click="changeNumber()">decrease number</button>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>
&lt;input class="input" mx-view="mx-effect/count" view-to="&lt;%@toNumber%&gt;"&gt;
&lt;div mx-view="mx-effect/count" view-to="&lt;%@toNumber%&gt;" view-duration="2000" view-fixed="2" style="font-size: 30px;line-height: 50px;letter-spacing: 2px;"&gt;&lt;/div&gt;
&lt;button class="btn btn-brand ml5" type="button" mx-click="changeNumber({i:true})"&gt;increase number&lt;/button&gt;
&lt;button class="btn btn-brand ml5" type="button" mx-click="changeNumber()"&gt;decrease number&lt;/button&gt;</pre>
    <div class="pt10">Javascript Code:</div>
    <pre>
let Magix = require('magix');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    render() {
        let me = this;
        me.updater.digest({
            toNumber: 20
        });
    },
    'changeNumber&lt;click&gt;'(e) {
        let me = this;
        let to = me.updater.get('toNumber');
        let diff = 300;
        if (!e.params.i) {
            diff = -diff;
        }
        me.updater.digest({
            toNumber: to + diff
        });
    }
});</pre>
</div>

<h3 class="mt30">dance</h3>
<div class="pt20 clearfix">
    <mx-effect-dance value="<%=content%>" duration="<%=duration%>" dance="<%=dance%>"  />
    <mx-dropdown empty-text="单字效果间隔时间" style="width:180px" selected="<%:duration{refresh:true}%>">
        <item value="10">10ms</item>
        <item value="30">30ms</item>
        <item value="60">60ms</item>
        <item value="90">90ms</item>
        <item value="120">120ms</item>
    </mx-dropdown>
    <mx-dropdown empty-text="动画效果" style="width:180px" class="ml10" selected="<%:dance{refresh:true}%>">
        <item value="d1">效果一</item>
        <item value="d2">效果二</item>
        <item value="d3">效果三</item>
        <item value="d4">效果四</item>
        <item value="d5">效果五</item>
        <item value="d6">效果六</item>
        <item value="d7">效果七</item>
        <item value="d8">效果八</item>
        <item value="d9">效果九</item>
        <item value="d10">效果十</item>
        <item value="d11">效果十一</item>
    </mx-dropdown>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>
&lt;mx-effect-dance value="&lt;%=content%&gt;" duration="&lt;%=duration%&gt;" dance="&lt;%=dance%&gt;"  /&gt;
&lt;mx-dropdown empty-text="单字效果间隔时间" style="width:180px" selected="&lt;%:duration{refresh:true}%&gt;"&gt;
    &lt;item value="10"&gt;10ms&lt;/item&gt;
    &lt;item value="30"&gt;30ms&lt;/item&gt;
    &lt;item value="60"&gt;60ms&lt;/item&gt;
    &lt;item value="90"&gt;90ms&lt;/item&gt;
    &lt;item value="120"&gt;120ms&lt;/item&gt;
&lt;/mx-dropdown&gt;
&lt;mx-dropdown empty-text="动画效果" style="width:180px" class="ml10" selected="&lt;%:dance{refresh:true}%&gt;"&gt;
    &lt;item value="d1"&gt;效果一&lt;/item&gt;
    &lt;item value="d2"&gt;效果二&lt;/item&gt;
    &lt;item value="d3"&gt;效果三&lt;/item&gt;
    &lt;item value="d4"&gt;效果四&lt;/item&gt;
    &lt;item value="d5"&gt;效果五&lt;/item&gt;
    &lt;item value="d6"&gt;效果六&lt;/item&gt;
    &lt;item value="d7"&gt;效果七&lt;/item&gt;
    &lt;item value="d8"&gt;效果八&lt;/item&gt;
    &lt;item value="d9"&gt;效果九&lt;/item&gt;
    &lt;item value="d10"&gt;效果十&lt;/item&gt;
    &lt;item value="d11"&gt;效果十一&lt;/item&gt;
&lt;/mx-dropdown&gt;
    </pre>
    <div class="pt10">Javascript Code:</div>
    <pre>
let Magix = require('magix');
let Form = require('app/gallery/mx-form/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [Form],
    render() {
        let me = this;
        me.updater.digest({
            content: '你从远处聆听我，我的声音却无法触及你。你从远处聆听我，我的声音却无法触及你。你从远处聆听我，我的声音却无法触及你。好像你的双眼已经飞离去，如同一个吻，封缄了你的嘴。好像你的双眼已经飞离去，如同一个吻，封缄了你的嘴。如同所有的事物充满了我的灵魂，如同所有的事物充满了我的灵魂，如同所有的事物充满了我的灵魂，你从所有的事物中浮现，充满了我的灵魂。你从所有的事物中浮现，充满了我的灵魂。你从所有的事物中浮现，充满了我的灵魂。',
            dance: 'd1',
            duration: '60'
        });
    }
});
    
    </pre>
</div>