semantic ui

[uniquejava]

segments > segment可以做成表格线的样子

表格 https://semantic-ui.com/collections/table.html

日历控件(简单好用) https://github.com/mdehoog/Semantic-UI-Calendar

$(document).ready(function () {
    $('select.dropdown').dropdown();

    $('#example2').calendar({
        type: 'date',
        formatter: {
            date: function (date, settings) {
                if (!date) return '';
                var day = date.getDate();
                var month = date.getMonth() + 1;
                var year = date.getFullYear();
                return year + '-' + month + '-' + day;
            }
        }
    });
});

[uniquejava]

popup

<div class="chat">
    <div class="wechat ui button" id="btnWechat"></div>
    <div class="weibo"></div>
</div>

$('#btnWechat')
    .popup({
        html: '<img src="assets/images/qrcode.png">',
        position: 'top center',
        offset: -101
    });

[uniquejava]

semantic ui form validation

http://stackoverflow.com/questions/30033396/listen-to-semantic-ui-form-validation-errors-before-submit

Notes: 做了一个好用的版本, 还需要不断优化. 需要安装https://github.com/macek/jquery-serialize-object

beforeSend如果返回false会阻止api发送请求.

只要server返回的状态码OK, 就会onSuccess, 这不一定是我们想要的, 可以自定义onSuccess的条件

可以自定义rules, 把semantic form.js的源代码翻过来, 照着抄就行了(比如把different那个rule的函数改改).

抽出一些公共的:

$.fn.api.settings.silent = true;
$.fn.api.settings.successTest = function (response) {
    return response.result == 'success';
};
$.fn.form.settings.prompt = {
    empty: '{name}不能为空',
    checked: '请勾选{name}',
    email: '{name}不是有效的Email地址',
...
};
$.fn.form.settings.rules.gtdate = function (value, identifier) {
    // use either id or name of field
    var
        $form = $(this),
        matchingValue
    ;
    if ($('#' + identifier).length > 0) {
        matchingValue = $('#' + identifier).val();
    }
    else if ($('[name="' + identifier + '"]').length > 0) {
        matchingValue = $('[name="' + identifier + '"]').val();
    }
    else if ($('[name="' + identifier + '[]"]').length > 0) {
        matchingValue = $('[name="' + identifier + '[]"]');
    }
    return (matchingValue !== undefined)
        ? ( Date.parse(value.toString()) > Date.parse(matchingValue.toString()) )
        : false
        ;
};

在使用校验规则上, 精简模式和复杂模式不能混用..(这个比较恶心, 让代码看起来有点丑), 如下不可以使用:

var planFormValidationRules = {
    fields: {
        xx1: {
            identifier: 'some_field_name_or_id',
            rules: ['empty'] //这个rules错了, 这里不能使用精简模式, FaaK
        },
        xx2: {
            identifier: 'some_other_field',
            rules: [
                {
                    type: 'empty'
                }
            ]
        },
        xx3: {
            identifier: 'some_enddate',
            rules: [
                {
                    type: 'gtdate[some_begindate]',
                    prompt: '结束时间应大于开始时间'
                }
            ]
        },    

某个表单:

$('.btnXXX').click(function () {
    $('#modal2').modal({
        onApprove: function () {
            // manually hide dialog in api success call back.
            return false;
        },
        closable: false
    }).modal('show');

    $('#calendar_x, #calendar_y').calendar(calendarOpts);
});
$('.approve.button', $('#modal2')).api({
    beforeSend: function (settings) {
        var form = $('#xxxForm').form(planFormValidationRules);
        form.form("validate form");
        return form.form('is valid') ? settings : false;
    },
    beforeXHR: function (xhr) {
        // this can be set directly in nodejs  :)
        // xhr.setRequestHeader('access_token', "sometoken");
        return xhr;
    },
    url: '/xxx',
    method: 'POST',
    serializeForm: true,
    onSuccess: function (data) {
        $('#modal2').modal('hide');
    },
    onError: function (err) {
        console.log(err);
        alert(err);
    }
});

[uniquejava]

Reset form还有上面的inline error messages

主要是modal form需要重用, 每次打开前, 得清除之前form上的inline error messages, 参考了这里的讨论: https://github.com/Semantic-Org/Semantic-UI/issues/702 最终使用了: $('#xxxForm').find('.error').removeClass('error').find('.prompt').remove();

modal dialog button的摆放位置

得把.actions(.approve button)放到 modal 的 <form>下面, 即(content area中) 不然的话api(serializeForm:true)将不起作用, 这是因为semantic会去找离.approve.button最近的那个form, 所以必须放在form下 此时得修改.actions的样式如下 :

/* To use ajax file upload I have to move .actions inside modal content area */
.ui.modal .content .actions {
  border-top: none;
  background-color: #f0f9ff;
  padding: 1rem;
  text-align: right;

  margin: 0 -1.5rem -1.5rem;

  border-bottom-left-radius: .28571429rem;
  border-bottom-right-radius: .28571429rem;

  .button {
    font-weight: 300;
    margin-left: .75em;
  }

  .ui.approve.button {
    color: #ffffff;
    background-color: #289adb;
  }

  .ui.cancel.button {
    color: #289adb;
    background-color: #ffffff;
  }
}

或者是否可以将form作为ui.modal的孩子.? 不可以, semantic中定义样式都是使用.modal>.actions这样来定义的,, 中间不能相隔form元素.

那么只有重写semantic 的api方法, 让它选择性的接收自定义的form元素(而不是通过$this.closest('form')去找. 注: 这里的$(this)指的是.approve.button

[uniquejava]

Modal

解决第二次弹出时位置向下偏移的bug https://github.com/Semantic-Org/Semantic-UI/issues/614