Javascript 方法

主题结构

主要分为以下模块:

/src/themes/(布局名)/js/
└── site.js (布局模块)

/src/themes/global/js/
├── components/ (组件源文件)
├── configs/ (基本配置信息)
├── plugins/ (插件)
└── components.js (组件;components源文件合并文件)

布局配置

使用 $.site 对象来设置主题功能;如:菜单栏,栅格菜单,工具条,工具提示和组件等。

/src/themes/(布局名)/js/site.js 文件中我们对网站进行了初始化操作,您不需要再重新进行初始化操作。

$.site.contentTabs 对象

该对象提供了一些标签页的操作方法

1. $.site.contentTabs.buildTab(options)

新建一个标签页

示例代码:

$.site.contentTabs.buildTab({
name: '表单验证',
url: '/html/examples/forms/validation.html'
});

2. $.site.contentTabs.closeTab([url])

关闭一个标签页

url 为空时,默认关闭当前选中标签页

示例代码:

$.site.contentTabs.closeTab('/html/examples/forms/validation.html');

3. $.site.contentTabs.reloadTab([url])

重新加载选中标签页内容

url 为空时,按照当前选中标签页的地址进行重载

示例代码:

$.site.contentTabs.reloadTab('/html/examples/forms/validation.html');

公用配置

/src/themes/(布局名)/js/app.js 文件中我们预置了一些公用的方法,您可以在需要的页面引入该文件,通过window.App.run()方法即可调用预置好的所有方法。当然您也可以选择需要的方法进行手动调用。

假如您需要增加公用方法,您可以直接在 /src/themes/(布局名)/js/app.js 文件中增加,也可以使用 Window.App.extend(options) 方法扩展公用方法。

示例代码:

Window.App.extend({
getName: function(){
// doSomething();
}
});

基础配置

$.configs对象

$.configs 对象可以配置一些常用变量在全局使用。

1. $.configs.set(name, options)

配置一项全局公用信息

示例代码:

$.configs.set('site', {
fontFamily: "Noto Sans, sans-serif",
...
});

2.$.configs.get(name[, options.name])

获取指定项全局公用信息配置

示例代码:

var fontFamily = $.configs.get('site', 'fontFamily');
console.info(fontFamily); // 输出:'Noto Sans, sans-serif'

3. $.configs.extend(name[, options])

扩展指定项全局公用信息配置

示例代码:

var font = $.configs.extend('site',{
fontSize: '18px',
color: '#f60',
...
});

我们也在 global/configs/site-configs.js 文件中通过 $.configs.colors = {"red": {"100": "#ffeaea"}} 配置了一些颜色信息,可以通过 $.getColor(name[,level]) 方法使用。

$.sessionStorage对象

$.sessionStorage 对象可以更方便的使用sessionStorage对象存储方法。

1. $.sessionStorage.set(name, options)

配置一个指定的存储项

示例代码:

$.sessionStorage.set('site-style', {
tab: false,
menu: 'fold',
skin: 'blue',
...
});

2.$.sessionStorage.get(name)

获取指定项存储内容

示例代码:

var siteStyle = $.sessionStorage.get('site-style');
console.info(siteStyle); // 输出:{tab: false,menu: 'fold',skin: 'blue',...}

3. $.sessionStorage.remove(name)

删除指定存储项

$.getColor(name[,level])方法获取$.configs.colors中配置的颜色

var color = $.getColor('red', 100);
console.info(color); // 输出:'#ffeaea'

组件

使用$.components 对象可以组件注册,注册后可以通过Data API 的方式使用一些插件和方法。您可以合理的组织您使用到的第三方插件。

注册组件

用法:$.components.register(name, object)

代码示例:

$.components.register(name, {
mode: 'init',
defauts:{},
init: function(){
// doSomething();
},
api: function(){
// doSomethsing();
}
});

参数:

name 组件名称

{object} 参数

raty 组件 注册示例:

假如您使用的是自动构建版本,您需要在/src/themes/global/components/中增加该组件;并且,在/build/configuration/config.json中的components对象中添加属性,便于gulp构建。如下:

"components": {
"raty": true
}

假如您使用的是基础源码或后端Java版本,可直接加入到/public/themes/global/components/中和/public/themes/global/compontents.js中。

$.components.register("rating", {
mode: "init",
defaults: {
targetKeep: true,
icon: "font",
starType: "i",
starOff: "icon wb-star",
starOn: "icon wb-star orange-600",
cancelOff: "icon wb-minus-circle",
cancelOn: "icon wb-minus-circle orange-600",
starHalf: "icon wb-star-half orange-500",
cancelHint: '取消评分',
hints: ['很差', '差', '一般', '好', '非常好']
},
init: function (context) {
var global = context || window; // 确定当前全局对象
if (!global.$.fn.raty) return;

var defaults = this.defaults;

$('[data-plugin="rating"]', global.document).each(function () {
// 获取data对象时要传入当前全局对象下$,以获取正确的data对象
var options = $.extend(true, {}, defaults, $(this).data(global.$));

if (options.hints) options.hints = options.hints.split(',');

$(this).raty(options);
});
}
});

组件初始化

$.components.init([name,[global]])

对指定的注册组件初始化

不提供组件名称时将默认调用所有注册组件初始化方法

代码示例:

$.components.init('rating');

注意:

admui已经做了组件的初始化工作,如果您需要根据具体需求单独使用组件,则需要删除 (layout)/js/site.js 中关于 $.components 的调用。

关于组件配置参数

我们在组件注册时会预置一些配置参数,您也可以根据具体的使用情况修改它。当您没有使用我们的组件注册配置,又希望使用我们预置的配置参数时,可以通过如下方法获取配置。

$.concatCpt(name[,options])方法获取组件预置的配置参数并合并

代码示例:

var default = $.concatCpt('rating', {name:'自定义'});
console.info(default); // 输出:{name:'自定义',targetKeep: true,icon: "font",starType: "i",starOff: "icon wb-star",...}

没有自定义配置时仅获取组件的预置配置参数

如果您不需要我们的组件的解决方案,您也可以将其删除。

调用方式

同BootStrap的Data API语法一样,在元素上添加 data-{plugin}="{plugin name}"[data-{options}] ,组件就会被初始化。

如下(页面加载完成后,评分插件就可以正常运行了。):

// 引用插件相关文件
<link rel="stylesheet" href="assets/vendor/raty/jquery.raty.css">
<script src="assets/vendor/raty/jquery.raty.js"></script>

// 引用组件注册文件
<script src="assets/js/components/raty.js"></script>

// 使用组件的DOM节点
<div class="rating" data-score="4" data-plugin="rating"></div>

其他

serializeObject() 方法

返回serializeArray的变形方法,序列化表格元素 (类似 ‘.serializeArray()’ 方法) 返回 JSON 数据结构数据。

返回的JSON对象结构如下:

{name: '夏萱', sex: '女', phone: '13724539854', email: '1245345@qq.com'},