weui.js java_WEUI控件JS用法

1 /*dialog*/

2 document.querySelector('#alertBtn').addEventListener('click', function() {3 _weui2.default.alert('自定义标题的alert', function() {4 console.log('ok');5 }, {6 title: '自定义标题'

7 });8 });9

10 /*confirm*/

11 document.querySelector('#confirmBtn').addEventListener('click', function() {12 _weui2.default.confirm('自定义标题的confirm', function() {13 console.log('yes');14 }, function() {15 console.log('no');16 }, {17 title: '自定义标题'

18 });19 });20

21 /*toast*/

22 document.querySelector('#toastBtn').addEventListener('click', function() {23 _weui2.default.toast('操作成功', {24 duration: 3000,25 className: "bears"

26 });27 });28

29 /*loading*/

30 document.querySelector('#loadingBtn').addEventListener('click', function() {31 var loading = _weui2.default.loading('loading');32 setTimeout(function() {33 loading.hide();34 }, 3000);35 });36

37 /*actionSheet*/

38 document.querySelector('#actionSheetBtn').addEventListener('click', function() {39 _weui2.default.actionSheet([{40 label: '拍照',41 onClick: functiononClick() {42 console.log('拍照');43 }44 }, {45 label: '从相册选择',46 onClick: functiononClick() {47 console.log('从相册选择');48 }49 }, {50 label: '其他',51 onClick: functiononClick() {52 console.log('其他');53 }54 }], [{55 label: '取消',56 onClick: functiononClick() {57 console.log('取消');58 }59 }], {60 className: "custom-classname"

61 });62 });63

64 /*topTips*/

65 document.querySelector('#topTipsBtn').addEventListener('click', function() {66 _weui2.default.topTips('请填写正确的字段', {67 duration: 3000,68 className: "custom-classname",69 callback: functioncallback() {70 console.log('close');71 }72 });73 });74

75 /*picker*/

76 //普通选择器

77 document.querySelector('#pickerBtn').addEventListener('click', function() {78 _weui2.default.picker([{79 label: '飞机票',80 value: 0

81 }, {82 label: '火车票(disabled)',83 disabled: true,84 value: 1

85 }, {86 label: '的士票(disabled)',87 disabled: true,88 value: 2

89 }, {90 label: '住宿费',91 value: 3

92 }, {93 label: '礼品费',94 value: 11

95 }, {96 label: '活动费',97 value: 5

98 }, {99 label: '通讯费',100 value: 6

101 }, {102 label: '补助',103 value: 7

104 }, {105 label: '通讯费',106 value: 8

107 }, {108 label: '其他',109 value: 9

110 }], {111 defaultValue: [11],112 className: 'custom-classname',113 onChange: functiononChange(result) {114 //console.log(item, index);

115 console.log(result);116 },117 onConfirm: functiononConfirm(result) {118 console.log(result);119 },120 id: 'picker'

121 });122 });123

124 //时间选择器

125 document.querySelector('#datePickerBtn').addEventListener('click', function() {126 _weui2.default.datePicker({127 start: '2016-12-29',128 end: '2030-12-29',129 /**130 * https://zh.wikipedia.org/wiki/Cron131 * cron 表达式后三位132 * 示例：133 * * * * 每天134 * 5 * * 每个月的5日135 * 1-10 * * 每个月的前10日136 * 1,5,10 * * 每个月的1号、5号、10号137 * *\/2 * * 每个月的 1、3、5、7...日，注意写的时候斜杠“/”前面没有反斜杠“\”，这是因为是注释所以需要转义138 * * 2 0 2月的每个周日139 * * * 0,6 每个周末140 * * * 3 每周三141 */

142 cron: '* */2 0',143 defaultValue: [2017, 7, 9],144 onChange: functiononChange(result) {145 console.log(result);146 },147 onConfirm: functiononConfirm(result) {148 console.log(result);149 },150 id: 'datePicker'

151 });152 });153

154 //多列选择器

155 document.querySelector('#multiPickerBtn').addEventListener('click', function() {156 _weui2.default.picker([{157 label: '1',158 value: '1'

159 }, {160 label: '2',161 value: '2'

162 }, {163 label: '3',164 value: '3'

165 }], [{166 label: 'A',167 value: 'A'

168 }, {169 label: 'B',170 value: 'B'

171 }, {172 label: 'C',173 value: 'C'

174 }], {175 defaultValue: ['3', 'A'],176 onChange: functiononChange(result) {177 console.log(result);178 },179 onConfirm: functiononConfirm(result) {180 console.log(result);181 },182 id: 'multiPickerBtn'

183 });184 });185

186 //级联选择器

187 document.querySelector('#cascadePickerBtn').addEventListener('click', function() {188 _weui2.default.picker([{189 label: '广东',190 value: 0,191 children: [{192 label: '广州',193 value: 0,194 children: [{195 label: '海珠',196 value: 0

197 }, {198 label: '番禺',199 value: 1

200 }]201 }, {202 label: '佛山',203 value: 1,204 children: [{205 label: '禅城',206 value: 0

207 }, {208 label: '南海',209 value: 1

210 }]211 }]212 }, {213 label: '广西',214 value: 1,215 children: [{216 label: '南宁',217 value: 0,218 children: [{219 label: '青秀',220 value: 0

221 }, {222 label: '兴宁',223 value: 1

224 }]225 }, {226 label: '桂林',227 value: 1,228 children: [{229 label: '象山',230 value: 0

231 }, {232 label: '秀峰',233 value: 1

234 }]235 }]236 }], {237 depth: 3,238 defaultValue: [0, 1, 1],239 onChange: functiononChange(result) {240 console.log(result);241 },242 onConfirm: functiononConfirm(result) {243 console.log(result);244 },245 id: 'cascadePicker'

246 });247 });248

249 /*searchbar*/

250 _weui2.default.searchBar('#searchBar');251

252 /*slider 因为需要获取长度，所以必须要在slider显示的时候才调用weui.slider*/

253 var isSetSlider = false;254 functionsetSlider() {255 if (isSetSlider) return;256 isSetSlider = true;257

258 //普通slider

259 var sliderValue = document.getElementById("sliderValue");260 _weui2.default.slider('#slider', {261 defaultValue: 50,262 onChange: functiononChange(percent) {263 sliderValue.innerHTML =Math.round(percent);264 console.log(percent);265 }266 });267

268 //带step的slider

269 var sliderStepValue = document.getElementById("sliderStepValue");270 _weui2.default.slider('#sliderStep', {271 step: 10,272 defaultValue: 40,273 onChange: functiononChange(percent) {274 sliderStepValue.innerHTML =Math.round(percent);275 console.log(percent);276 }277 });278

279 //分块的slider

280 var sliderBlockValue = document.getElementById("sliderBlockValue");281 _weui2.default.slider('#sliderBlock', {282 step: 100 / 3,283 defaultValue: 33.333,284 onChange: functiononChange(percent) {285 sliderBlockValue.innerHTML =Math.round(percent);286 console.log(percent);287 }288 });289 }290

291 /*tab*/

292 _weui2.default.tab('#tab', {293 defaultIndex: 0,294 onChange: functiononChange(index) {295 console.log(index);296

297 if (index == 3) {298 setSlider(); //设置slider

299 }300 }301 });302

303 /*form*/

304 //约定正则

305 var regexp ={306 regexp: {307 IDNUM: /(?:^\d{15}$)|(?:^\d{18}$)|^\d{17}[\dXx]$/,308 VCODE: /^.{4}$/

309 }310 };311

312 //失去焦点时检测

313 _weui2.default.form.checkIfBlur('#form', regexp);314

315 //表单提交

316 document.querySelector('#formSubmitBtn').addEventListener('click', function() {317 _weui2.default.form.validate('#form', function(error) {318 console.log(error);319 if (!error) {320 var loading = _weui2.default.loading('提交中...');321 setTimeout(function() {322 loading.hide();323 _weui2.default.toast('提交成功', 3000);324 }, 1500);325 }326 }, regexp);327 });328

329 /*图片自动上传*/

330 var uploadCount = 0,331 uploadList =[];332 var uploadCountDom = document.getElementById("uploadCount");333 _weui2.default.uploader('#uploader', {334 url: 'http://' + location.hostname + ':8002/upload',335 auto: true,336 type: 'file',337 fileVal: 'fileVal',338 compress: {339 width: 1600,340 height: 1600,341 quality: .8

342 },343 onBeforeQueued: functiononBeforeQueued(files) {344 if (["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0) {345 _weui2.default.alert('请上传图片');346 return false;347 }348 if (this.size > 10 * 1024 * 1024) {349 _weui2.default.alert('请上传不超过10M的图片');350 return false;351 }352 if (files.length > 5) {353 //防止一下子选中过多文件

354 _weui2.default.alert('最多只能上传5张图片，请重新选择');355 return false;356 }357 if (uploadCount + 1 > 5) {358 _weui2.default.alert('最多只能上传5张图片');359 return false;360 }361

362 ++uploadCount;363 uploadCountDom.innerHTML =uploadCount;364 },365 onQueued: functiononQueued() {366 uploadList.push(this);367 console.log(this);368 },369 onBeforeSend: functiononBeforeSend(data, headers) {370 console.log(this, data, headers);371 //$.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数

372 //$.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部

373

374 //return false; // 阻止文件上传

375 },376 onProgress: functiononProgress(procent) {377 console.log(this, procent);378 },379 onSuccess: functiononSuccess(ret) {380 console.log(this, ret);381 },382 onError: functiononError(err) {383 console.log(this, err);384 }385 });386

387 //缩略图预览

388 document.querySelector('#uploaderFiles').addEventListener('click', function(e) {389 var target =e.target;390

391 while (!target.classList.contains('weui-uploader__file') &&target) {392 target =target.parentNode;393 }394 if (!target) return;395

396 var url = target.getAttribute('style') || '';397 var id = target.getAttribute('data-id');398

399 if(url) {400 url = url.match(/url\((.*?)\)/)[1].replace(/"/g, '');401 }402 var gallery = _weui2.default.gallery(url, {403 className: 'custom-name',404 onDelete: functiononDelete() {405 _weui2.default.confirm('确定删除该图片？', function() {406 --uploadCount;407 uploadCountDom.innerHTML =uploadCount;408

409 for (var i = 0, len = uploadList.length; i < len; ++i) {410 var file =uploadList[i];411 if (file.id ==id) {412 file.stop();413 break;414 }415 }416 target.remove();417 gallery.hide();418 });419 }420 });421 });422

423 /*图片手动上传*/

424 var uploadCustomFileList =[];425

426 //这里是简单的调用，其余api请参考文档

427 _weui2.default.uploader('#uploaderCustom', {428 url: 'http://localhost:8002/upload',429 auto: false,430 onQueued: functiononQueued() {431 uploadCustomFileList.push(this);432 }433 });434

435 //手动上传按钮

436 document.getElementById("uploaderCustomBtn").addEventListener('click', function() {437 uploadCustomFileList.forEach(function(file) {438 file.upload();439 });440 });441

442 //缩略图预览

443 document.querySelector('#uploaderCustomFiles').addEventListener('click', function(e) {444 var target =e.target;445

446 while (!target.classList.contains('weui-uploader__file') &&target) {447 target =target.parentNode;448 }449 if (!target) return;450

451 var url = target.getAttribute('style') || '';452 var id = target.getAttribute('data-id');453

454 if(url) {455 url = url.match(/url\((.*?)\)/)[1].replace(/"/g, '');456 }457 var gallery = _weui2.default.gallery(url, {458 onDelete: functiononDelete() {459 _weui2.default.confirm('确定删除该图片？', function() {460 varindex;461 for (var i = 0, len = uploadCustomFileList.length; i < len; ++i) {462 var file =uploadCustomFileList[i];463 if (file.id ==id) {464 index =i;465 break;466 }467 }468 if (index) uploadCustomFileList.splice(index, 1);469

470 target.remove();471 gallery.hide();472 });473 }474 });475 });