基础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) { });