Javascript 方法
主题结构
主要分为以下模块:
/src/themes/(布局名)/js/ |
布局配置
使用 $.site
对象来设置主题功能;如:菜单栏,栅格菜单,工具条,工具提示和组件等。
在 /src/themes/(布局名)/js/site.js
文件中我们对网站进行了初始化操作,您不需要再重新进行初始化操作。
$.site.contentTabs
对象
该对象提供了一些标签页的操作方法
1. $.site.contentTabs.buildTab(options)
新建一个标签页
options
: 标签页信息对象。
示例代码:
$.site.contentTabs.buildTab({ |
2. $.site.contentTabs.closeTab([url])
关闭一个标签页
url
: 待关闭标签页地址。
url
为空时,默认关闭当前选中标签页
示例代码:
$.site.contentTabs.closeTab('/html/examples/forms/validation.html'); |
3. $.site.contentTabs.reloadTab([url])
重新加载选中标签页内容
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({ |
基础配置
$.configs
对象
$.configs
对象可以配置一些常用变量在全局使用。
1. $.configs.set(name, options)
配置一项全局公用信息
name
: 配置信息名称options
: 配置信息;可以是一个字符串、数组、对象等。
示例代码:
$.configs.set('site', { |
2.$.configs.get(name[, options.name])
获取指定项全局公用信息配置
name
: 配置信息名称options.name
: 配置信息是一个对象时其中一项的名称
示例代码:
var fontFamily = $.configs.get('site', 'fontFamily'); |
3. $.configs.extend(name[, options])
扩展指定项全局公用信息配置
name
: 配置信息名称options
: 需要扩展到当前配置信息中的内容
示例代码:
var font = $.configs.extend('site',{ |
我们也在 global/configs/site-configs.js
文件中通过 $.configs.colors = {"red": {"100": "#ffeaea"}}
配置了一些颜色信息,可以通过 $.getColor(name[,level])
方法使用。
$.sessionStorage
对象
$.sessionStorage
对象可以更方便的使用sessionStorage对象存储方法。
1. $.sessionStorage.set(name, options)
配置一个指定的存储项
name
: 存储项名称options
: 存储信息;可以是一个字符串、数组、对象等。
示例代码:
$.sessionStorage.set('site-style', { |
2.$.sessionStorage.get(name)
获取指定项存储内容
name
: 存储项名称
示例代码:
var siteStyle = $.sessionStorage.get('site-style'); |
3. $.sessionStorage.remove(name)
删除指定存储项
name
: 存储项名称
$.getColor(name[,level])
方法获取$.configs.colors
中配置的颜色
name
: 颜色名称level
: 预置的颜色编码。
var color = $.getColor('red', 100); |
组件
使用$.components
对象可以组件注册,注册后可以通过Data API 的方式使用一些插件和方法。您可以合理的组织您使用到的第三方插件。
注册组件
用法:$.components.register(name, object)
代码示例:
$.components.register(name, { |
参数:
name
组件名称
{object}
参数
mode
: 组件注册的模式。有以下三种:default
: 组件最简单的调用方式,没有其他任何附加操作;init
: 根据需求预置组件的使用方式,可以多次初始化;api
: 根据需求预置组件的使用方式,只能初始化一次。
defaults
: 组件的配置参数。init | api
: 组件的初始化方法。
raty 组件
注册示例:
假如您使用的是自动构建版本,您需要在
/src/themes/global/components/
中增加该组件;并且,在/build/configuration/config.json
中的components
对象中添加属性,便于gulp构建。如下:
"components": { |
假如您使用的是基础源码或后端Java版本,可直接加入到
/public/themes/global/components/
中和/public/themes/global/compontents.js
中。
$.components.register("rating", { |
组件初始化
$.components.init([name,[global]])
对指定的注册组件初始化
name
: 组件名称;global
: 当前框架全局对象。
不提供组件名称时将默认调用所有注册组件初始化方法
代码示例:
$.components.init('rating'); |
注意:
admui已经做了组件的初始化工作,如果您需要根据具体需求单独使用组件,则需要删除 (layout)/js/site.js
中关于 $.components
的调用。
关于组件配置参数
我们在组件注册时会预置一些配置参数,您也可以根据具体的使用情况修改它。当您没有使用我们的组件注册配置,又希望使用我们预置的配置参数时,可以通过如下方法获取配置。
$.concatCpt(name[,options])
方法获取组件预置的配置参数并合并
name
: 组件名称options
: 自定义配置
代码示例:
var default = $.concatCpt('rating', {name:'自定义'}); |
没有自定义配置时仅获取组件的预置配置参数
如果您不需要我们的组件的解决方案,您也可以将其删除。
调用方式
同BootStrap的Data API语法一样,在元素上添加 data-{plugin}="{plugin name}"
和 [data-{options}]
,组件就会被初始化。
如下(页面加载完成后,评分插件就可以正常运行了。):
// 引用插件相关文件 |
其他
serializeObject()
方法
返回serializeArray的变形方法,序列化表格元素 (类似 ‘.serializeArray()’ 方法) 返回 JSON 数据结构数据。
返回的JSON对象结构如下:
{name: '夏萱', sex: '女', phone: '13724539854', email: '1245345@qq.com'}, |