洽客WeUI组件示例

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。

WeUI 本身只包含样式，不包含 javascript 功能。此组件库基于zepto对WeUI做深度定制，以满足简单常用的开发需求。

弹出层包含组件：
alert、confirm、prompt、actions、popup、offcanvas

提示框

//usage
$.alert('这是一个弹框！','标题', function(){
    $.alert('第二个','标题');
});

确认框

//usage
$.confirm('这是一个弹框！','标题', function(){
    $.alert('确认');
}, function(){
    $.alert('取消');
});

输入框

//usage
$.prompt('请输入留言信息', function(v){ alert('你输入的是 '+v);});

操作框

//usage
var buttons1 = [
    {
      text: '请选择',
      label: true
    },
    {
      text: '卖出',
      bold: true,
      color: 'danger',
      onClick: function() {
        $.alert("你选择了“卖出“");
      }
    },
    {
      text: '买入',
      onClick: function() {
        $.alert("你选择了“买入“");
      }
    }
  ];

var buttons2 = [{
  text: '取消',
  bg: 'danger'
}];

var groups = [buttons1, buttons2];
$.actions(groups);

popup

//usage

//DOM
<script type="text/html" id="tpl1">
<div>
  <a href="javascript:;" class="close-popup weui_dialog_close"><i class="weui_icon_cancel"></i></a>
  <article class="weui_article">
        <h1>大标题</h1>
        <section>
            <h2 class="title">章标题</h2>
            <section>
                <h3>1.1 节标题</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute</p>
            </section>
            <section>
                <h3>1.2 节标题</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>
        </section>
    </article>
    </div>
</script>

//JS
$.popup($('#tpl1').html());

//usage

//显示页面级loading
$.loading();

//关闭loading
$.loading();

toast-纯文字
```
//usage

$.toast('操作成功')
```
toast-带图标
```
//usage

$.toast('操作成功', '');
```

offcanvas-top

可配置参数：

    useCss3:true,
    content: '',
    position:position || 'top', //left,right,bottom,top
    contentStyle:null, // {top:'20px',color:'red'}
    onOpenBefore:null,
    onOpenAfter:typeof onOpenedFn == 'function' ? onOpenedFn : null,
    onCloseBefore:null,
    onCloseAfter:null,

//usage

var con1 = '<div class="weui_offcanvas"><a href="javascript:;" class="close-offcanvas weui_dialog_close"><i class="weui_icon_cancel"></i></a> <p>这里是offcanvas的内容, 从顶部显示！<br><a class="btn-click" href="javascript:;">再打开一个左边的</a></p></div>';

var con2 = '<div class="weui_offcanvas"><a href="javascript:;" class="close-offcanvas weui_dialog_close"><i class="weui_icon_cancel"></i></a> <p>这里是offcanvas的内容, 从左边显示！ <br><a class="btn-click" href="javascript:;">事件点击</a></p></div>';

$.offcanvas(con1, '', function($el){
  $el.on('click', '.btn-click',function(){
    $.offcanvas(con2, 'left', function($el){
      $el.on('click', '.btn-click', function(){
        alert('这是第二个 offcanvas 的事件！');
      });
    });
  })
})

offcanvas-bottom

//usage

var content = '<div class="weui_offcanvas"><a href="javascript:;" class="close-offcanvas weui_dialog_close"><i class="weui_icon_cancel"></i></a> <p>这里是offcanvas的内容, 从底部显示！ <br><a class="btn-click" href="javascript:;">事件点击</a></p></div>';
$('#showDialog9').click(function(){
    $.offcanvas(content, 'bottom', function($el){
      $el.on('click', '.btn-click',function(){
        alert('事件2被触发了!');
      })
    })
});

offcanvas-left

//usage

var content = '<div class="weui_offcanvas"><a href="javascript:;" class="close-offcanvas weui_dialog_close"><i class="weui_icon_cancel"></i></a> <p>这里是offcanvas的内容, 从左边显示！ <br><a class="btn-click" href="javascript:;">事件点击</a></p></div>';

$.offcanvas(content, 'left', function($el){
  $el.on('click', '.btn-click',function(){
    alert('事件3被触发了!');
  })
})

offcanvas-right

//usage

var content = '<div class="weui_offcanvas"><a href="javascript:;" class="close-offcanvas weui_dialog_close"><i class="weui_icon_cancel"></i></a> <p>这里是offcanvas的内容, 从右边显示！ <br><a class="btn-click" href="javascript:;">事件点击</a></p></div>';

$.offcanvas(content, 'right', function($el){
  $el.on('click', '.btn-click',function(){
    alert('事件4被触发了!');
  })
})

offcanvas-自定义

//usage

var content = '<div class="weui_offcanvas"><a href="javascript:;" class="close-offcanvas weui_dialog_close"><i class="weui_icon_cancel"></i></a> <p style="font-size:12px; color:#888;">长按识别二维码</p><p><img src="http://7xi480.com1.z0.glb.clouddn.com/wx_store_preview.png" width="140" /></p></div>';

$.offcanvas({
    content:content,
    contentStyle:{ 
        width:'200px', 
        top: '20%', 
        left: '50%', 
        'margin-left': '-100px', 
        'border-radius': '5px', 
        padding: '20px 0 10px', 
        'text-align': 'center' 
    }
})

可配置参数

var options = {
    hasBorder: true,
    skinClass: '',
    navId: 'tabNav',
    contentId: 'tabContent',
    navActiveClass: '',
    callback: function(){}
}

使用示例

// DOM
<div class="weui_tab">
    <div id="tabNav" class="weui_navbar">
        <div class="weui_navbar_item weui_bar_item_on">
            选项一
        </div>
        <div class="weui_navbar_item">
            选项二
        </div>
        <div class="weui_navbar_item">
            选项三
        </div>
    </div>
    <div id="tabContent" class="weui_tab_bd">
        <div class="tab_item on">1</div>
        <div class="tab_item">2222</div>
        <div class="tab_item">333333</div>
    </div>
</div>

// JS
$.tab({
    hasBorder: true,
    skinClass: '',
    navId: 'tabNav',
    contentId: 'tabContent'
});

使用场景

可配置参数

msg: '',
wrapCls: 'weui_toptips',
type: 'warn', //warn
duration: '3000',
hasCloseBtn: false,
onOpened: null, // 显示后的回调
onClosed: null  //关闭后的回调

使用示例

$.notification('这是一个通知：）');

可配置参数

itemSlt: '.weui_cell',
itemBodySlt: '.weui_accordion_body',
activeCls: '.active',
showSingle: true,   //是否只显示一个
onShown: null,      //callback: function(this){}
activeIndex: -1,  //默认显示的项 -1不显示

使用示例

使用data-api初始化

// DOM
<div class="weui_cells weui_cells_access" data-ui-accordion id="accordionBox">
    <a class="weui_cell" href="javascript:;">
        <div class="weui_cell_bd weui_cell_primary">
            <p>cell standard</p>
        </div>
        <div class="weui_cell_ft">
        </div>
    </a>
    <div class="weui_accordion_body" id="t1"  style="height: 0px;">
      <div class="weui_accordion_content">
        <p>
          她坦白了我们所虚伪的 她单纯了我们所复杂的 五年以来… 5年的等待，是个漫长也是耗损的过程。 看尽乐坛芭比娃娃的甜美面具，「性格」这两个字，似乎快要消失！ 她的声音，她的个性，象徵著无可取代的高傲、独特的姿态， 这样一股充满灵魂的音乐、沉寂而刚苏醒的真声音
        </p>
      </div>
    </div>
</div>

可配置参数

valid: null, //验证成功的回调
invalid: null, //验证失败的回调

使用示例

使用data-api初始化

<div class="weui_cell">
    <div class="weui_cell_hd"><label class="weui_label">手机号</label></div>
    <div class="weui_cell_bd weui_cell_primary">
        <input class="weui_input" id="t1" name="phone" type="tel" placeholder="输入你现在的手机号" 
        data-rule="required; integer; phone;" 
        data-rule-phone="[/^1[3-9]\d{9}$/,'手机号码格式不正确']"
        data-msg-phone="手机号码不能为空"
        data-msg-require="请输入手机号">
    </div>
    <div class="weui_cell_ft"> <i class="weui_icon_warn"></i></div>
</div>

获取验证结果

    $('#form').validator('validate');

返回true表示验证成功

Weui 插件

WeUI

Tab选项卡

消息通知

折叠面板

表单验证