kissy overlay

 

模版

遍历数组 （应是二维的）

{{#each productDatas}}
<span class="productUnit" relid="{{productid}}">{{name}}<img src="http://wwwcdn.kimiss.net/public/doyen/img/close03.png" class="close"></span>
{{/each}}

if 条件

{{#if is_sel}} sel{{/if}}

<script type="text/template" id="editBoxTpl">
    <form role="form" class="form-horizontal" id="editForm" style="margin-top:50px;">
        <input name="cid" type="hidden" value="{{cid}}" />
        <input name="cas_token" type="hidden" value="{{cas_token}}" />
        <input type="hidden" name="a" value="updateOne" />
        <input type="hidden" name="c" value="admin_app_indexPageDatalist" />
        <div class="form-group">
            <label for="position" class="col-sm-3 control-label">显示位置（1-200）: </label>
            <div class="col-sm-9">
                <input type="text" name="position" class=" form-control" value="{{position}}" id="position" />
            </div>
        </div>
        <div class="form-group">
            <label for="posExpired" class="col-sm-3 control-label">有效期至：</label>
            <div class="col-sm-9">
                <input type="text" name="pos_expired" class="form-control" value="{{pos_expired}}" id="posExpired" />
            </div>
        </div>
        <div class="form-group">
            <label for="sortTime" class="col-sm-3 control-label">排序时间：</label>
            <div class="col-sm-9">
                <input type="text" name="sort_time" class="form-control" value="{{sort_time}}" id="sortTime" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">是否显示：</label>
            <div class="col-sm-9">
                <label><input name="show" type="radio" value="<{$showNo}>" {{hideChecked}}/> 隐藏</label>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <label><input name="show" type="radio" value="<{$showYes}>" {{showChecked}}/> 显示</label>


            </div>
        </div>
        <div style="text-align:center;">
            <div id="editSubmitBtn" class="sel_btn btn">提交</div>
            <div id="editCloseBtn" class="sel_btn btn">取消</div>
        </div>

    </form>
</script>

 

css

<style type="text/css">
    .sel_btn {
        background-color: #428bca;
        border-color: #357ebd;
        border-radius: 1px;
        color: #fff;
        font-size: 12px;
        line-height: 1.1;
        padding: 5px 10px;
    }

    .sel_btn:hover, .sel_btn:focus, .sel_btn:active {
        background-color: #3276b1;
        border-color: #285e8e;
        color: #fff;
    }
    .form-group{ position:relative; margin-bottom: 40px;}
    .form-control{ display:inline-block; width:270px}
    .ks-overlay-mask {
        position:fixed; width:100%; height:100%; background:rgba(0, 0, 0, 0.6);top:0; left:0; z-index: 900;
    }
    .ks-overlay {
        background-color:#fff; padding: 20px; border-radius: 5px; z-index: 901;
    }
    .ks-overlay-close {
        position: absolute;right: 10px;
    }
</style>

 

j s

<script type="text/javascript">
    var WEBDOMAIN = '<{$web_cfg.domain}>';
    KISSY.use('node, io, gallery/formSubmitBtn/1.0/formSubmitBtn,overlay,xtemplate,gallery/datetimepicker/2.0.0/index', function(S, Node,IO, FormSubmitBtn, Overlay, XTemplate, Datetimepicker) {
        var $ = KISSY.all, DOM = KISSY.DOM;

        // 编辑榜单
        $(document).delegate('click', '.editBtn', function(e) {
            var self = $(e.currentTarget);
            var id = self.attr('data-id');
            // 获取数据
            var normalBtn = new FormSubmitBtn(self);
            if(normalBtn.isActive()) {
                return false;
            }
            normalBtn.start();

            new IO({
                type: 'post'
                , url: KISSY.conf.root_domain + '/?c=admin_app_indexPageDatalist&a=GetOneData'
                , data: {id: id}
                , success: function(data) {
                    if (data.ok) {
                        var info = data.msg;
                        var html = new XTemplate($("#editBoxTpl").html()).render({
                            cid: info.cid,
                            cas_token: info.cas_token,
                            position:info.position,
                            pos_expired: info.pos_expired,
                            sort_time: info.sort_time,
                            productDatas: info.productDatas,
                            hideChecked:info.hideChecked,
                            showChecked:info.showChecked
                        });

                        dialog = new Overlay({
                            width: 600,
                            height: 600,
                            elCls: 'dialog-lsm',
                            content: html,
                            mask: true,
                            align: {
                                points: ['cc', 'cc'],
                            },
                            closeAction: 'destroy'
                        });
                        dialog.show();
                        initDatetimePicker();
                    } else {
                        alert('操作失败，原因：' + data.msg);
                    }
                    normalBtn.end();
                }
                , error: function(NULL, textStatus) {
                    alert('请求失败，原因：' + textStatus);
                    normalBtn.end();
                }
                , dataType: 'json'
            });

        });

        // 提交编辑操作
        var submitBtn = new FormSubmitBtn("#eidtSubmitBtn");
        $(document).delegate('click', '#editSubmitBtn', function(e) {
            var self = $(e.currentTarget);
            if (submitBtn.isActive()) {
                return false;
            }
            submitBtn.start();
            var formData = IO.serialize("#editForm");
            new IO({
                type: 'post'
                , url: KISSY.conf.root_domain + '/?c=admin_app_indexPageDatalist&a=updateOne'
                , data: formData
                , success: function(data) {
                    if (data.ok) {
                        dialog.destroy();
                        alert('操作成功');
                        window.location.reload();
                    } else {
                        alert('操作失败，原因：' + data.msg);
                    }
                    submitBtn.end();
                }
                , error: function(NULL, textStatus) {
                    alert('请求失败，原因：' + textStatus);
                    submitBtn.end();
                }
                , dataType: 'json'
            });

        });


        // 关闭添加榜单浮层
        $(document).delegate('click', '#editCloseBtn', function(e) {
            var self = $(e.currentTarget);
            dialog.destroy();
        });

        function initDatetimePicker() {
            new Datetimepicker({
                start: 'input[name=sort_time]',
            });
            new Datetimepicker({
                start: 'input[name=pos_expired]',
            });
        }
    });
</script>