Vusui.js 插件

基本实例:

警告消息框 确认消息框 输入对话框 自动消失提示框 Loading层 页面层

//alert(警告消息框)
vus.alert('初体验Vusui.js');

//confirm(确认消息框)
vus.confirm('您是否使用过VusUI框架?', {
   btn: ['是', '否']
}, function(index) { //是
   vus.close(index);
   vus.msg('感谢您使用VusUI框架!');
}, function(index) { //否
   vus.close(index);
   vus.msg({
      icon: 3,
      title: 'VusUI框架离不开您的支持!'
   });
});

//prompt(输入对话框)
vus.prompt({
   title: '请输入用户名,并确定',
}, function(username, index){
   vus.close(index);
   vus.prompt({
      title: '请输入密码,并确认', 
      formType: 1
   }, function(pawwsord, index){
      vus.close(index);
      vus.prompt({
         title: '请填写描述,并确认', 
         content: '最多输入500个字符',
         formType: 2
   }, function(textarea, index) {
         vus.close(index);
         vus.alert('用户名:'+ username +'\n密码:'+ pawwsord +'\n描述:'+ textarea);
      });
   });
});

//message(自动消失提示框)
vus.msg({
   icon: -1,
   title: '欢迎使用VusUI框架!'
});

//loading(Loading层)
vus.load({
   time: 5,
   title: '转呀转...'
});

//page(页面层)
vus.page({
   title: '用户登录',
   content: document.getElementById('page-1').innerHTML
});

带图标的Alert提示框、Confirm确认消息框:

类型:Number,默认:-1(无图标)
Alert提示框默认不显示图标。当你想显示图标时,可设置(0-4)来展示。

//成功
vus.alert('你成功了!', {
   icon: 0,
   title: '来自土豪的祝福'
});
vus.confirm('', {
   icon: 0,
   title: '成功!'
});

//警告
vus.alert('警告警告!!!前方高能。', {
   icon: 1,
   title: ''
});
vus.confirm('', {
   icon: 1,
   title: '警告!'
});

//危险、出错
vus.alert('由于你长得太帅已被列入危险名单!', {
   icon: 2,
   title: 'OMG'
});
vus.confirm('', {
   icon: 2,
   title: '出错!'
});

//信息
vus.alert('随便提示点什么都行!', {
   icon: 3,
});
vus.confirm('', {
   icon: 3,
   title: '信息!'
});

//询问
vus.alert('准备好使用VusUI了吗?', {
   icon: 4,
   title: false
});
vus.confirm('', {
   icon: 4,
   title: '询问!'
});

带图标的Msg自动消失提示框:

类型:Number,默认:0(成功)
可设置(0-3)来展示。

//成功
vus.msg({
   icon: 0,
   title: '成功!'
});

//警告
vus.msg({
   icon: 1,
   title: '警告!'
});

//危险、出错
vus.msg({
   icon: 2,
   title: '出错!'
});

//信息
vus.msg({
   icon: 3,
   title: '信息!'
});

loading风格:

类型:Boolean,默认:true

//无文字的Loading
vus.load({
   time: 5,
   title: false
});

//无图标的Loading
vus.load({
   time: 5,
   icon: false,
   title: 'Loading...'
});