GitHub 搜索 ZKWeb框架文档

基础javascript脚本


基础插件引用了以下的javascript脚本

  • jQuery 1.11.2
    • jquery-migrate
    • jquery-form
    • jquery-mobile
    • jquery-toast
    • jquery-validate
    • jquery-validate-unobtrusive
  • Bootstrap 3.3.2
    • context-menu
    • dialog
    • hover-dropdown
  • Switchery 0.8.1
  • jsUri 1.3.1
  • Underscore 1.8.3

基础插件的javascript脚本已整合到一个文件，引用时可以使用

{% include_js_here "/static/common.base.js/components.min.js" %}

额外的脚本功能

基础插件的脚本还提供了一些额外的功能，这些功能大多数已经过代码的包装，不需要全部了解。

弹出对话框显示远程内容

BootstrapDialog.showRemote("title", "/example/contents");

初始化动态表格
详见动态表格构建器

$("#Table").ajaxTable({ target: "/example/search_table" });

多选框组，支持全选/取消全选

<div data-toggle="checkbox-group">
    <input type="checkbox" class="select-all">
    <input type="checkbox">
    <input type="checkbox">
</div>

储存多个多选框的值到一个控件中

<input type="checkbox" value="A" merge-to="input[name=ExampleList]">
<input type="checkbox" value="B" merge-to="input[name=ExampleList]">
<input type="hidden" name="ExampleList" value="[]" />

设置通用的Ajax表单
在提交期间为表单添加loading类，并触发beforeSubmit, success, error事件。

$("#Form").commonAjaxForm();

处理ajax提交的结果
支持显示消息和执行结果中的脚本。

$.handleAjaxResult(data);
// data: { message: "example message", allowHtmlText: false, script: "alert(1)" }

自动显示ajax提交错误的信息
服务器对于ajax请求返回了错误时，会自动弹出错误的信息。
需要禁用这个功能请设置$.toast.extra.showAjaxError = false;

可编辑的表格
支持添加和删除行，定义收集和绑定事件等功能。

var $table = $("#Editor").editableTable({
    columns: [ "A", "B", $("<div>") ],
    tableClass: "table table-bordered table-hover",
    tableHeaderClass: "heading"
});
$table.on("addRow.editableTable", function (e, data) { ... });
$table.on("collect.editableTable", function () { ... });
$table.on("bind.editableTable", function () { ... });

全屏portlet的内容
在以下html结构中点击.fullscreen时可以全屏portlet的内容。

<div class="portlet">
    <a class="fullscreen">FullScreen</a>
</div>

数字文本框
点击上下按钮时改变文本框中的数值，文本框中只能填写指定类型的数值。

<div data-toggle='number-input'
    data-allow-decimal='false' data-allow-negative='false' data-delta='1'>
    <input type='text' class='number' />
    <span class='up'></span>
    <span class='down'></span>
</div>

支持点击缩略图弹出大图
点击缩略图时可以通过模态框弹出大图

<img src="a.thumb.jpg" alt="图片描述" data-trigger="popup-original" data-original-src="a.jpg" />

支持post数据的链接
跳转post到指定的地址或通过ajax post到指定的地址，
通过ajax post时返回结果会使用$.handleAjaxResult处理。

<a post-href="/user/logout"></a>
<a post-href="/api/example_api" ajax="true"></a>

刷新图片内容
会在参数中添加timestamp来跳过浏览器缓存，获取最新的图片内容。

$("#Img").refreshImage();

延迟加载脚本
常用于模板模块中引用脚本，同一路径只会引用一次。

<div require-script="/static/demo/demo.js"></div>

延迟加载样式
常用于模板模块中引用样式，同一路径只会引用一次。

<div require-style="/statis/demo/demo.css"></div>

可搜索的下拉框
可以在选项列表中搜索，不支持远程搜索。

<div class="advance-select" data-toggle="advance-select">
    <button class="btn btn-default form-control dropdown-toggle" data-toggle="dropdown">
        <span class="option-text"></span><span class="caret"></span>
    </button>
    <div class="dropdown-menu">
        <input type="text" class="form-control keyword" placeholder="" />
        <select></select>
    </div>
</div>

可编辑文本的下拉框
可以选中选项列表中的值或填写自定义值，注意提交时应该把文本框中的内容也提交到服务器。

<div class="advance-select" data-toggle="advance-select">
    <div class="input-group dropdown-toggle" data-toggle="dropdown">
        <input class="form-control option-text-editable" type="text" />
        <span class="input-group-btn">
            <button class="btn btn-default"><span class="caret"></span></button>
        </span>
    </div>
    <div class="dropdown-menu">
        <select></select>
    </div>
</div>

延迟添加标签
把内容合并移动到data-target对应的元素下
注意: 如果标签组下已经有相同的标签，则原相同的标签会被移除

<div data-toggle="append-tabs" data-target=".target-tabs">
    <ul class="nav nav-tabs">
        <li>
            <a href="#target_tab_contents" data-toggle="tab">TabName</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="target_tab_contents" class="tab-pane">
            <div class="contents">
            </div>
        </div>
    </div>
</div>

客户端翻译
支持客户端翻译文本，翻译来源需要在html中提供

调用翻译的例子

var title = $.translate("Title");

提供翻译来源的例子

<span class="translation hide" data-original="Title" data-translated="标题"></span>
<span class="translation hide" data-translations="{ \"Title\": \"标题\" }"></span>

触发动态加载内容的事件
有时候部分html内容需要通过ajax加载到页面，
例如远程获取一个表单的html并添加到页面，如果不调用这个事件像ajax表单这样的功能将不能自动初始化

$.dynamicLoaded($contents);

这个函数会在内部等待元素添加到DOM以后再调用$(document).trigger("dynamicLoaded", $contents);
监听这个事件可以使用$(document).on("dynamicLoaded", function (e, $contents) { });