<div>...</div>
<script>
Dcat.ready(function () {
    // 写你的逻辑

    console.log('所有JS脚本都加载完了');
});
</script>Copy

<div class="selector">test</div>

<script>
Dcat.ready(function () {
    // 需要先 off 再 on 否则页面刷新后会造成重复绑定问题
    $(document).off('click', '.selector').on('click', '.selector', function () {
        ...
    })
});
</script>Copy

<div class="selector">test</div>

<script>
Dcat.ready(function () {
    // $this 是当前元素的jquery dom对象
    // id 是当前元素的id属性，如果当前元素没有id则会自动生成一个随机id
    Dcat.init('.selector', function ($this, id) {
        // 修改元素的背景色
        $this.css({background: "#fff"});

        // 这里不需要 off 再重新 on，因为这个匿名函数只会执行一次
        $this.on('click', function () {
            ...
        });
    });
});
</script>Copy

Dcat.triggerReady();Copy

Admin::script(
<<<JS
    // 3秒后刷新当前页面
    setTimeout(function () {
        Dcat.reload();
    }, 3000);
JS
);Copy

$url = admin_url('auth/users');

Admin::script(
<<<JS
    // 3秒后跳转到 admin/auth/users 页面
    setTimeout(function () {
        Dcat.reload('{$url}');
    }, 3000);
JS
);Copy

Dcat.success('更新成功');

// 使用标题
Dcat.success('更新成功', '我是标题');

// 传递参数
Dcat.success('更新成功', null, {
    timeOut: 5000, // 5秒后自动消失
});Copy

Dcat.error('服务器出现未知错误');

// 使用标题
Dcat.error('服务器出现未知错误', '我是标题');

// 传递参数
Dcat.error('服务器出现未知错误', null, {
    timeOut: 5000, // 5秒后自动消失
});Copy

Dcat.warning('警告');

// 使用标题
Dcat.warning('警告', '我是标题');

// 传递参数
Dcat.warning('警告', null, {
    timeOut: 5000, // 5秒后自动消失
});Copy

Dcat.info('提示信息');

// 使用标题
Dcat.info('提示信息', '我是标题');

// 传递参数
Dcat.info('提示信息', null, {
    timeOut: 5000, // 5秒后自动消失
});Copy

Dcat.confirm('确认要删除这行数据吗？', null, function () {
    console.log('确认删除');

    $.post(...);
});Copy

Dcat.swal.success('标题');

Dcat.swal.success('标题', '内容');

Dcat.swal.success('标题', '内容', {
    ...
});Copy

Dcat.swal.error('标题');

Dcat.swal.error('标题', '内容');

Dcat.swal.error('标题', '内容', {
    ...
});Copy

Dcat.swal.warning('标题');

Dcat.swal.warning('标题', '内容');

Dcat.swal.warning('标题', '内容', {
    ...
});Copy

Dcat.swal.info('标题');

Dcat.swal.info('标题', '内容');

Dcat.swal.info('标题', '内容', {
    ...
});Copy

layer.open({
    ...
})Copy

// 开启loading效果
Dcat.loading();

// 3秒后自动移除loading效果
setTimeout(function () {
    Dcat.loading(false);
})Copy

// 更改颜色
Dcat.loading({
    color: Dcat.color.primary,
});Copy

// 开启loading效果
$('#card').loading();

// 关闭loading效果
$('#card').loading(false);

// 更改loading图标颜色
$('#card').loading({
    color: Dcat.color.primary,
});

// 更改遮罩层颜色
$('#card').loading({
    background: '#f3f3f3',
});Copy

// 开启loading效果
$('#submit-button').buttonLoading();

// 关闭loading效果
$('#submit-button').buttonLoading(false);Copy

// 开启loading效果
$('a').buttonLoading();

// 关闭loading效果
$('a').buttonLoading(false);Copy

<script>
Dcat.ready(function () {
    // ajax表单提交
    $('#login-form').form({
        validate: true, //开启表单验证
        before: function (fields, form, opt) {
            // fields 为表单内容
            console.log('所有表单字段的值', fields);

            if (...) {
                // 返回 false 可以阻止表单继续提交
                return false;
            }
        },
        success: function (response) {
            // data 为接口返回数据
            if (! response.status) {
                Dcat.error(response.data.message);

                return false;
            }

            Dcat.success(response.data.message);

            if (data.redirect) {
                Dcat.reload(response.data.value)
            }

            // 中止后续逻辑（默认逻辑）
            return false;
        },
        error: function (response) {
            // 当提交表单失败的时候会有默认的处理方法，通常使用默认的方式处理即可
            var errorData = JSON.parse(response.responseText);

            if (errorData) {
                Dcat.error(errorData.message);
            } else {
                console.log('提交出错', response.responseText);
            }

            // 终止后续逻辑执行
            return false;
        },
    });
});
</script>Copy

var $form = $('#login-form');

// 禁用默认提交
$form.on('submit', function () {
    return false;
});

// ajax表单提交
function submit() {
    Dcat.Form({
        form: $form,
        success: function (response) {
            if (! response.status) {
                Dcat.error(response.data.message);

                return false;
            }

            Dcat.success(response.data.message);

            location.href = response.data.value;

            return false;
        },
        error: function () {
            // 非200状态码响应错误
        }
    });
}

// h5表单验证
function validateForm() {
    $form.validator('validate');

    // 如果出现错误，则返回false
    if ($form.find('.has-error').length > 0) {
        return false;
    }

    return true;
}

// 绑定登陆按钮点击事件
$form.find('[type="submit"],.submit').click(function (e) {
    // 表单验证
    if (validateForm() === false) {
        return false;
    }

    // 提交表单
    submit();

    return false;
});Copy

<fieldset class="form-label-group form-group position-relative has-icon-left">
    <input

        minlength="5" <!-- 加上验证规则 -->
        maxlength="20" <!-- 加上验证规则 -->
        required  <!-- 加上验证规则 -->
        type="password"
        class="form-control"
        name="password"
    >

    <div class="form-control-position">
        <i class="feather icon-lock"></i>
    </div>
    <label for="password">{{ trans('admin.password') }}</label>

    <!-- 这个加了 .with-errors 样式的 div 即是表单错误信息显示的位置，非常重要 -->
    <div class="help-block with-errors"></div>
</fieldset>Copy

$('#xx-form').form({
    validate: true
});Copy

Dcat.validator.extend('maxlength', function ($el) {
    return $el.val().length > $el.attr('data-maxlength');
});Copy

<input 
    type="input"
    class="form-control"
    name="username"
    data-maxlength="20" <!-- 使用刚刚自定义的验证规则 -->
    data-maxlength-error="已超出输入字符长度限制，请输入20个或以下的字符" <!-- 定义错误信息 -->
 />Copy

本文章首发在 LearnKu.com 网站上。