MUI API 文档

切换主题

MUI API 文档

MUI是基于zepto的轻量级mobile UI组件库，因为1717wan移动站的业务需要而诞生。 MUI由matthewsun开发，基于开源MIT协议，支持商业和非商业用户的免费使用和任意修改，您可以在MUI上快速了解此项目。

Quick Start

官网：https://github.com/matthew-sun/MUI

fastclick

文件core/fastclick.js

FastClick

fastclick专为移动端而生，具体解决了移动端的点透bug fastclick项目地址source

var FastClick = require('./core/fastclick');

window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);

func

文件core/func.js依赖zepto.js

func.js，封装了一些与业务无关的底层方法，分为了CLASS || UTIls || EVENT || HTTP || MOBILE 这几大模块。

CLass

func.Class(superClass,subClass) || func.Class(subClass)

参数:

superClass {Object} [可选]
如果使用继承方法，第一个参数为父类。
subClass {Object} [可选]
如果使用继承方法，第二个参数为子类；如果只创建一个类，不需要继承，那么参数即为需要创建的类。

创建Class 创建类的API，统一自调用init方法

var func = require('./core/func');

// 创建一个类
var newClass = func.Class({
    init : function() {
        ...
    },
    bindEvents : function() {
        ...
    }
});

// 调用这个类，使用此函数会自动new一个类，并自己调用类中的init方法
newClass();

// 调用这个类的内部方法。
newClass().bindEvents();

// 使用继承
var superClass = func.Class({
    init : function() {
        ...
    },
    bindEvents : function() {
        ...
    }
});
var newClass = func.Class(superClass,{
    init : function() {
        handleEvents : function() {
            ...
        }
    }
});

keys

keys(obj)

参数:

obj {JSON}
JSON对象

返回值:

{Array}
JSON的所有键值

获取键值

var func = require('./core/func');

var json = {
    'name' : '小明' ,
    'age' : 18
};
console.log(keys(json));
// == >> ['name','age']

bindActiveLink

bindActiveLink(activeClass)

参数:

activeClass {String} [可选]
需要绑定dom的class名字，若不填，则默认绑定J_active

移动端模拟手触摸时的效果

var func = require('./core/func');
// 默认绑定J_avtive
func.bindActiveLink();
// 绑定指定Class
func.bindActiveLink('J_whichDomIWantToBind');

fix

fix($obj, options)

参数:

$obj {Dom}
绑定fix的zepto对象
options {Json}
{top:0, left:0}

固顶fix方法，对不支持position:fixed的设备上将元素position设为absolute，在每次scrollstop时根据opts参数设置当前显示的位置，类似fix效果。

var div = $('div');
div.fix({top:0, left:0}); //将div固顶在左上角
div.fix({top:0, right:0}); //将div固顶在右上角
div.fix({bottom:0, left:0}); //将div固顶在左下角
div.fix({bottom:0, right:0}); //将div固顶在右下角

fire

参数:

type {[type]}
事件类型
data {[type]}
回调数据

广播事件

目标: 为了尽可能的减少模块之间业务逻辑的耦合度, 而开发了这个eventbus, 主要用于业务逻辑的事件传递
使用规范: 每个js模块尽可能通过事件去通信, 减少模块之间的直接调用和依赖(耦合)
fire -> 事件派发

var func = require('./core/func');
// 派发自定义事件
func.fire('customEvent');
func.fire('customEvent', data1, data2, ...);

on

参数:

type {[type]}
事件类型，支持,分隔符
callback {Function}
回调函数
scope {[type]}
回调函数上下文

返回值:

{[type]}
this

on -> 订阅广播事件

var func = require('./core/func');
// 注册自定义事件
func.on('customEvent', function() {
    callback();
},scope);

un

参数:

type {[type]}
事件类型
callback {Function}
假如传入则移出传入的监控事件，否则移出全部
scope {[type]}
回调函数上下文

返回值:

{[type]}
this

un -> 退订广播事件

var func = require('./core/func');
// 退订自定义事件
func.un('customEvent');

removeAll

removeAll -> 退订所有广播事件

var func = require('./core/func');
// 退订所有广播事件
func.removeAll();

loader

参数:

opts {[type]}
jsonp的配置项

对jsonp的简单封装

var func = require('./core/func');
func.loader({
    url : ? ,
    success : ?
})

getCookie

参数:

name {String}
cookie的名字

返回值:

{String}
cookie值

var func = require('./core/func');
func.getCookie('username');

setCooKie

参数:

name {String}
cookie名字
value {[type]}
cookie值
iDay {Number}
过期时间，单位：天

var func = require('./core/func');
func.setCookie('username', 'Xiao Ming', 7);

removeCookie

参数:

name {String}
Cookie名

var func = require('./core/func');
func.removeCookie('username');

Device

返回值:

{Json}
返回浏览器的版本信息和系统的版本信息

判断浏览器版本

var func = require('./core/func');
// 返回ios系统
func.Device().os.ios 
// 返回uc
func.Device().os.uc
// 返回qq
func.Device().os.qq
// 返回baidu
func.Device().browser.baidu

router

文件core/router.js

router.js，MUI框架的路由控制。

when

router().when(url, {templateId : ?, templateData : ? , controller : ?})

参数:

url {String}
浏览器hash路由值，url#后的值，默认 url#{0,1} 跳转至url#/。
options {Json}
{templateId(必选) : ?, templateData(可选) : ?, controller(可选) : ?}

当window的url的hash值是什么时，选择什么模板进行渲染。

templateId ：模板ID
templateData ：模板数据
controller ：模板加载之后，执行的js回调
title ：页面的标题

var INDEX_DATA = {
    title : '首页' ,
    list : [
        {
            url : 'http://www.fehouse.com' ,
            title : '前端家园'
        },
        {
            url : 'http://www.1717wam.cn' ,
            title : '1717wan'
        }
    ]
}

function hello() {
    alert('你好，小明！');
}

router().when('/',{
    templateId : 'index',
    templateData : INDEX_DATA,
    title : 'index'
}).when('/about',{
    templateId : 'about',
    controller : hello
})

otherwise

router().otherwise({templateId : ?, templateData : ? , controller : ?})

参数:

options {Json}
{templateId(必选) : ?, templateData(可选) : ?, controller(可选) : ?}

路由默认跳转地址

router().otherwise({
    templateId : '404'
})

dataChangeReload

router().dataChangeReload(path, options)

参数:

path {String}
模板id
options {Json}
模板数据 {templateData: ?}

数据发生改变时重新渲染

router().dataChangeReload('index',{
    templateData : newData
})

template

文件core/template.js

template.js，artTemplate，js模板引擎。

template

API文档

config

文件config/require_map.js

MOCK_AJAX

返回值:

{name : url, ...}

mock_ajax.js，MOCK_AJAX 聚合地址页 ( json 数据格式 )，方便API的统一管理。约定：所有的API地址全部从这里获取。

// 可能是长这个样子的
var MOCK_AJAX = {
     loginPPTV : 'http://user.vas.pptv.com/api/ajax/loginCms.php?app=1717wan', // 登录检测接口 对 PPTV主站     
     indexVideoData : 'http://m.1717wan.cn/?ajax=1&page=', // 首页精彩视频数据      
     scheduleListData : 'http://m.1717wan.cn/match/?ajax=1&page=', // 赛程页赛程列表数据       
     gamesListLiveData : 'http://m.1717wan.cn/game/list/?ajax_1=1&', // 游戏列表页直播视频数据      
     gamesListVideoData : 'http://m.1717wan.cn/game/list/?ajax=1&', // 游戏列表页精彩视频数据      
     recordsListData : 'http://m.1717wan.cn/mylottery/order?ajax=1&p=' // 赛程页赛程列表数据  
}

var MOCK_AJAX = require('./config/mock_ajax');

$.ajax({
    url : MOCK_AJAX
    ...
})

require_map

记录seajs的依赖关系，方便组件代码在重构时，api改变，可以不影响业务层

比如：router依赖'zepto','func','template'，记录为：
    router : ['zepto','func','template']

// 可能它会是长这个样子的
 var require_map = {

     core : {
         func : ['zepto'],
         fastclick : [] ,
         itpl : [] ,
         router : ['zepto','func','template']
     },

     widget : {
         iscroll : [] ,
         dialog : ['zepto','func'] ,
         loader : ['zepto','func'] ,
         lazyload : ['zepto','func'] ,
         tab : ['zepto','func'] ,
         share : ['zepto','func','itpl'] ,
         swipe : []
     }
 }

widget

文件widget/tab.js

UI组件层

dialog

dialog({id, pushHtml, type});

参数:

options {Json}
配置选项
id {String}
弹层包裹id
pushHtml {String}
如果需要把弹层插入页面，则需要填入pushHtml
type {String}
默认展示特效为none，可选参数none, fade

弹窗

var dialog = require('./widget/dialog');

dialog({
    id : 'J_overlay',
    type : 'fade'
});

dialog().show

弹窗显示

var dialog = require(./widget/dialog);

dialog({
    id : 'J_overlay',
    type : 'fade'
}).show();

dialog().hide

弹窗显示

var dialog = require(./widget/dialog);

dialog({
    id : 'J_overlay',
    type : 'fade'
}).hide();

iscroll

iscroll项目地址 iscroll.js，iscroll，支持无线端滚动。

var IScroll = require('./widget/iscroll');
// 具体实现用例，参考项目地址
var myScroll = new IScroll('#wrapper');

Lazyload

Lazyload();

页面初始化加载图片懒加载模块

html:

<img class="lazy" src="真实地址" lazyimg="临时地址">

javascript:

var lazyload = require('./widget/lazyload');
lazyload();

share(cfg) cfg ⇒ {'title' : '?','url' : '?','img' : '?'}

参数:

cfg {Json}
配置项
title {String}
分享的标题
url {String}
分享的地址
img {String}
分享的图片

移动端自定义分享组件

var share = require('./widget/share')

 var cfg = {
     title : '哇哦！！！我已经成功绑定1717wan.cn游戏直播，可第一时间追寻喜爱选手的直播及视频哦。爱游戏，爱视频，爱直播快来绑定吧！！！关注微信号“test1717wan”即可。',
     url : 'http://m.1717wan.cn',
     img : 'http://static.vas.pptv.com/vas/assets/app/1717wan/wap/'+ vers +'/images/share/share.png'
 }
 share(cfg);

swipe

swipe项目地址 swipe.js，swipe，图片轮播。

var Swipe = require('./widget/swipe');

// 具体实现用例，参考项目地址
Swipe(document.getElementById('J_index_slide'), {
    auto: 6000,
    callback : function(index) {
        var $J_index_ctrl = $('#J_index_ctrl');
        $J_index_ctrl.find('span').removeClass('current');
        $J_index_ctrl.find('span').eq(index).addClass('current');
    }
});

tab

参数:

options {Json}
{superClass : ?, subClass : ?, currentClass : ?}

tab 切换

var tab = require('./widget/tab');
// currentClass 默认是on，也可通过配置项更改
tab({
   superClass : 'superNav' ,
   subClass : 'suberCon'
})

GoTop