jquery-component是自己在开发中遇到问题，总结，形成自己的开发组件，有待继续完善 浏览器支持：开发主流浏览器
展示样例：http://www.mwcxs.top/static/jquery-component/toast/tipToast.html
- 调用方式
1、在页面上引入
<script type="text/javascript" src="tip.js"></script>2、js头部引入
var toastTip = new Tip(); toastTip._ready();3、在该页面需要的场景
toastTip._show('网络异常')- 入参结构
Tip: { showTime:100, //进入时间 delay:3000, //toast显示时间 hideTime:500 //消失时间 }- 举例
var toastTip = new Tip(); //使用默认时间 var toastTip = new Tip({showTime:100,delay:3000,hideTime:500}); //使用自己设定时间展示样例：http://www.mwcxs.top/static/jquery-component/dialog/dialog.html
- 调用方式
1、在页面上引用css和js
<link rel="stylesheet" type="text/css" href="common.css"> <link rel="stylesheet" type="text/css" href="dialog.css"> <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="dialog.js"></script> <button id="btn1" class="button">打开对话框</button> <div class="dialog dialog1">你确认删除吗？</div>2、页面相应场景引入js
$(".dialog1").dialog({ 'title':'警告', 'buttons':{ '确定':function(api){ api.setTitle('温馨提示'); api.setContent('删除成功！'); console.log('ajax请求') }, '取消':function(api){ api.close(); } } },function(api){ $('#btn1').click(function(){ api.open(); }); });说明： 1、弹窗的dom调用dialog(object,function);包含两个参数，一个参数是json对象--弹窗里的内容，第二参数是函数--触发弹窗的事件 2、还在完善其他函数部分，比如调用前的方法，调用后的方法等等
加载动画 展示样例：http://www.mwcxs.top/static/jquery-component/loading/loading.html
- 调用方式
1、页面引入css
<link rel="stylesheet" href="loading.css">2、该页面需要的场景
<div class="scale-ball"> <div class="scale-ball-a"></div> <div class="scale-ball-b"></div> <div class="scale-ball-c"></div> </div> 使用的flatpickr的组件 展示样例：http://www.mwcxs.top/static/jquery-component/timePicker/timePicker.html
- 调用方式
1、页面引入css，js，html
<link rel="stylesheet" type="text/css" href="flatpickr.min.css"> <script type="text/javascript" src="flatpickr.js"></script> <input style="margin-left: -3px;" type="text" class="birthday dataPicker">2、在该页面需要的场景
$(".dataPicker").flatpickr({ enableTime: false, //true为带时间，false为不带时间 dateFormat: "Y-m-d", //日期格式为'年-月-日' minDate: "1900-1-1", //最小的日期 maxDate: "today", //最大的日期，today为今天 defaultDate: ["1990-1-1"], //初始化默认的日期 locale: { weekdays: { shorthand: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], longhand: [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", ], }, months: { shorthand: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月", ], longhand: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月", ], }, rangeSeparator: " 至 ", weekAbbreviation: "周", scrollTitle: "滚动切换", toggleTitle: "点击切换 12/24 小时时制", }, //设置为中文 });基于jquery 展示样例：http://www.mwcxs.top/static/jquery-component/drag/drag.html
- 调用方式 1、页面引用
<script src="drag.js"></script>2、场景应用
$.init("父元素","被拖动的元素","被拖动的样式","被替换元素的样式")说明
- pElem 父元素的className 如 ".option"
- cElem 子元素(要拖拽的元素)的className 如 ".option-list"
- style1:被拖动的样式
- style2:被替换的样式
3、举例
$.init(".options",".option-list",{'border-color':'#1F8CEB','background':'green'},{'border-color':'#5579ee','background':'red'});主要是模仿的是webkit内核的颜色选择器 展示样例：http://www.mwcxs.top/static/jquery-component/colorPicker/colorPicker.html
- 调用方式
1、页面引用
<script src="colorPicker.js"></script>2、需要的场景
Colorpicker.create({ bindClass:'inputPicker', change: function(elem,hex){ elem.value = hex; document.getElementById('inputPicker').value = hex; document.getElementById('pickerShow').style.backgroundColor = hex; } })展示样例（查看console）：http://www.mwcxs.top/static/jquery-component/replaceAll/replaceAll.html
原生js中并没有replaceAll方法，只有replace，如果要将字符串替换，一般使用replace
var str = '2016-09-19'; var result = str.replace('-',''); console.log(result); 201609-19- 调用方式
1、在页面上引入
<script type="text/javascript" src="replaceAll.js"></script>2、js头部引入
var str = '2016-09-19'; var result = str.replaceAll('-','.');展示样例（查看console）：http://www.mwcxs.top/static/jquery-component/timeStamp/timeStamp.html 用 new Date(时间戳) 格式转化获得当前时间
function timeFormat(item) { var date = new Date(parseInt(item)); var Y = date.getFullYear() + '-'; var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'; var D = date.getDate() + ' '; var h = date.getHours() + ':'; var m = date.getMinutes() + ':'; var s = date.getSeconds(); return Y+M+D+h+m+s; } timeFormat(1526485239098); 2018-5-16 23:40:39- 调用方式
1、在页面上引入
<script type="text/javascript" src="timeStamp.js"></script>2、自己js格式化
timeFormat('时间戳字符') //建议用该种方式 或者 translate('时间戳字符') //因为toLocaleDateString()方法是因浏览器而异的，IE和搜过浏览器展示有差异3、举例子
timeFormat(1526485239098) //建议用该种方式 或者 translate(1526485239098) //因为toLocaleDateString()方法是因浏览器而异的，IE和搜过浏览器展示有差异