Dialog.d

一个简单的对话交互ui,附带自己常用到的工具函数,详情看D.utils包含的方法,支持amd

View the Project on GitHub ddd702/dialog.d

运行

demo

alert用法

D.alert('ddd',function(){alert('ddd')})
运行

notify用法

默认配置
                  {
                    rmTime: 3000, //消失时间,单位毫秒
                    autoRm: true, //是否自动消失,false为一直显示
                    operate: true, //notify 出现的同时能否执行其他操作
                    fn: function() {} //同时执行的回调
                  }
              

1.一般用法

D.notify('ddd')
运行

2.根据配置diy

D.notify('你好',{rmTime:5000,fn:function(){console.log('好')}})
运行
D.notify('你好',{rmTime:5000,operate:false})
运行

3.不自动消失的notify

D.notify('你好',{autoRm:false})
运行

4.清除notify

D.rmNotify()
运行

confirm用法

默认配置
                  {
                    title: '',
                    content: '你确定?',
                    btnY: '确定',
                    btnN: '取消',
                    fnY: function(t) {
                        console.log('你按了确定');
                        return true;
                    },
                    fnN: function(t) {
                        console.log('你按了取消');
                        return false;
                    }
                  }
              

1.一般用法

D.confirm({title:'标题',content:'你选择?'})
运行

prompt用法

默认配置
              {
                  title: '',
                  content: '填入信息',
                  btnY: '确定',
                  btnN: '取消',
                  fnY: function(t) {
                      console.log('你填入了:' + t);
                      return true;
                  },
                  fnN: function(t) {
                      console.log('你按了取消');
                      return false;
                  }
                }
              

1.一般用法

D.prompt({title:'标题',content:'你的姓名',fnY:function(t){
                D.alert('你好!'+t)
              },fnN:function(t){
                D.alert('为啥按取消呢');
              }})
运行

utils.arrUniq

去除数组中的相同元素,不支持对象数组

var a=[1,1,1,2,2,323,243,545,45,45,5,1,2,'你好','的','你好'];
console.log(D.utils.arrUniq(a))
                
运行

utils.byteConvert

byte单位转换

D.alert(D.utils.byteConvert(1212121212));
                
运行

utils.timeFormat

输入微秒数(1000微秒=1秒),输出格式化对象

console.log(D.utils.timeFormat(13233000));
                
运行

utils.createStyle

异步向页面添加样式

D.utils.createStyle('body{background:#333;color:#fff}');
                
运行

utils.dateFormat

将时间戳传入,按设置的时间格式返回

var b=D.utils.dateFormat(new Date().getTime(),'yyyy-MM-dd hh:mm:ss');
D.alert('现在时间:'+b);
                
运行

utils.indexOfArr

返回val在arr数组中最后出现的坐标

                    var a='你是什么人啊你个混蛋?'.split('');
                    var b=D.utils.indexOfArr('你',a);
                    D.alert('你在的位置是:'+b);
                
运行

utils.getWeek

传入时间戳返回该时间戳是周几

var a=D.utils.getWeek(new Date().getTime());
D.alert(a)
                
运行

utils.extend

对象的浅度合并,推荐使用es6的Object.assign

var a=D.utils.extend({a:'bc',name:'ddd'},{name:'邓',age:26});
console.log(a)
                
运行

utils.clone

对象的浅度克隆

var b={name:'邓',age:26}
var a=D.utils.clone(b);
console.log(a)
                
运行

utils.render

类似underscore的_.template函数,请将下面代码copy到控制台运行

var data={a:['ddd','213','煞笔']};
var str=`<&a.forEach(function(el,index){&><&=index&>:<&=el&><&});&>`;
var b=D.utils.render(str,data);
document.querySelector('#j-render').innerHTML=b;
                

utils.getRequest

获取url上的参数

1.获取传入的url上的参数

var b='ie=UTF-8&tn=92821989_s_hao_pg=&wd=jquery%20ajax';
console.log(D.utils.getRequest(b))
                
运行

2.获取本url上的参数

console.log(D.utils.getRequest())
                
运行

utils.browserVer

获取浏览器信息

    { //移动终端浏览器版本信息
        chrome: u.indexOf('Chrome') > -1,
        trident: u.indexOf('Trident') > -1, //IE内核
        presto: u.indexOf('Presto') > -1, //opera内核
        webkit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, //火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
        iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
        iPad: u.indexOf('iPad') > -1, //是否iPad
        webApp: u.indexOf('Safari') === -1, //是否web应该程序,没有头部与底部
        weixin: u.indexOf('MicroMessenger') > -1, //is weixin browser
        info: u //返回完整的userAgent信息
    }
                

判断是否是android浏览器

D.alert(D.utils.browserVer.android)
                
运行

utils.setCookie,utils.getCookie

cookie的操作

    D.utils.setCookie('name','ddd');
    var a=D.utils.getCookie('name');
    D.alert(a);
                
运行

utils.viewUploadImage

图片文件的预览

D.notify('现在可以点击选择文件按钮上传图片了!')
var a=document.querySelector('[name="viewUploadImageFile"]');
var b=document.querySelector('.j-viewImg img');
a.addEventListener('change',function(){
    D.utils.viewUploadImage(a,b);
});

                
运行