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'},
⟨ 上一页：自定义样式 下一页：UI 组件 ⟩ 下一页：特别说明 ⟩
© 2015-2018 Admui · 上海畅控