基於mui.popover的支援多選的彈出列表元件改造以及mui.prompt新增自定義內容
阿新 • • 發佈：2021-06-23
在開發過程中總能遇到一些似曾相識有新鮮的玩意兒，此次要介紹的內容是在開發移動app過程中基於mui的popover進行改造的一個支援多選操作的底部彈出列表元件，以及如何往mui的prompt彈出輸入式對話方塊中新增自定義的 input或textarea 內容，js操作，話不多說，具體程式碼如下：
JavaScript：
var customPopverData = [ {'id': 'id1', 'name': '測試標題1', 'size': 12}, {'id': 'id2', 'name': '測試2', 'size': 13}, {'id': 'id3', 'name': '標題3', 'size': 8}, {'id': 'id5', 'name': '標題5', 'size': 3}, {'id': 'id6', 'name': '測試6', 'size': 1}, {'id': 'id7', 'name': '測試7', 'size': 0}, {'id': 'id8', 'name': '測試8', 'size': 2}, {'id': 'id9', 'name': '標題9', 'size': 6}, ] mui.init() (function(doc) { var favoriteDiv = doc.createElement('div'); favoriteDiv.setAttribute('id', 'favorites'); favoriteDiv.setAttribute('class', 'mui-popover mui-popover-action custom-popover favorites'); favoriteDiv.innerHTML = '<ul class="mui-table-view table-view-top">\ <li class="mui-table-view-cell center">\ <a href="#favorites" class="mui-icon mui-icon-closeempty"></a>\ <span class="title">選擇項</span>\ </li>\ <li class="mui-table-view-cell">\ <a id="createF" href="#favorites" style="color: #0091FF;">+ 新建項</a>\ </li>\ </ul>\ <ul class="mui-table-view table-view-middle">\ <li class="mui-scroll-wrapper">\ <div class="mui-scroll"><ul class="mui-table-view"></ul></div>\ </li>\ </ul>'; // 此元件中間列表區域原結構是 <ul class="mui-table-view table-view-middle"></ul> 在安卓機中會出現無法滾動的現象 // 為解決無法滾動 特新增 mui-scroll-wrapper mui-scroll 結構 並使用mui('.mui-scroll-wrapper').scroll() 進行初始化 doc.body.appendChild(favoriteDiv); mui('.mui-scroll-wrapper').scroll({ bounce: true, indicators: true, deceleration: 0.0006 }); var promptExt = '<textarea class="favorite-tips" rows="3" \ style="font-size: 14px; width: 100%; padding: 5px; margin: 10px 0 -10px 0; border-radius: 0;" \ placeholder="請輸入收藏夾說明"></textarea>' // 初始化元件列表 initPopover(); // 新建按鈕點選事件監聽 doc.getElementById('createF').addEventListener('tap', function() { mui.prompt('新建項', '請輸入名稱', ' ', ['取消', '確認'], function(e) { // e.index為propmpt的按鈕陣列 ['取消', '確認'] 的索引值 e.index==0：取消按鈕 e.index==1：確認按鈕 if (e.index == 1) { // 關於trim方法可參考部落格 js去空 去除空格 var name = trim(doc.querySelector('.mui-popup-input input').value) var tips = trim(doc.querySelector('.mui-popup-input textarea.favorite-tips').value) if (!name || name.length < 2 || name.length > 10) { mui.toast('名稱 2~10 個字元') doc.querySelector('.mui-popup-input input').value = !name ? '' : name; return false; } if (tips > 200) { mui.toast('收藏夾說明200個字元內') return false; } // 這裡可以執行自己的ajax請求進行資料儲存操作 // 執行ajax後 重新渲染初始化mui.popover底部彈出元件 initPopover(); mui.showLoading() // 自定義 mui loading 可參考部落格 mui擴充套件外掛mui.showLoading載入框
} },'div') // 一定要在執行mui.prompt方法後在執行一下方法 往prompt中新增自定義的 input或textarea 內容 var popupInput = doc.querySelector('.mui-popup').querySelector('.mui-popup-input') popupInput.innerHTML = popupInput.innerHTML + promptExt }, false); // popover列表元件關閉按鈕監聽 doc.querySelector('.mui-icon.mui-icon-closeempty').addEventListener('tap', function() { // dosomething }, false); // 初始化或更新popover列表元件內容 function initPopover() { var html = ''; // alert('init favorite popup -> init popup -> ') // 獲取當前情況下的收藏夾列表進行初始化操作 for (var i in customPopverData) { var checked = customPopverData[i].include ? 'checked' : ''; html += '<li class="mui-table-view-cell">\ <div class="mui-input-row mui-checkbox">\ <label>\ <div class="title">' + customPopverData[i].name + '</div>\ <div class="tips"><span class="num">' + customPopverData[i].size + '</span>個內容</div>\ </label>\ <input name="favoriteCategory" value="' + customPopverData[i].id + '" \ type="checkbox" ' + checked + '>\ </div>\ </li>' } // type="checkbox" ' + checked + ' onchange="favoriteChange(this)">\ html += '' // html += '<li class="mui-table-view-cell" style="height: 60px;"></li>' doc.querySelector('.mui-table-view.table-view-middle .mui-table-view').innerHTML = html listnerFavoriteChange() } // 監聽元件中的複選框狀態 function listnerFavoriteChange() { var checkboxs = doc.querySelectorAll('input[name="favoriteCategory"]') // alert('len -> ' + checkboxs.length) mui.each(checkboxs, function(index, ele) { ele.addEventListener('change', function() { // alert('checked -> ' + ele.checked + '\nvalue -> ' + ele.value) var num = ele.parentNode.querySelector('span.num').innerHTML var id = ele.value if (ele.checked) { // 複選框選中 alert('checked -> ' + ele.checked + '\nnum -> ' + num + '\nid -> ' + id) } else { // 複選框取消選中 alert('checked -> ' + ele.checked + '\nnum -> ' + num + '\nid -> ' + id) } }, false) }) } }(document));
建立custom.popover.css 檔案寫入一下內容：
.mui-popover.custom-popover { position: fixed; } .mui-popover.custom-popover, .mui-popover.custom-popover * { font-size: 16px; } .mui-popover.mui-popover-action.custom-popover .mui-table-view { margin: 0; text-align: left; border-radius: 0; } .mui-popover.custom-popover .mui-table-view.table-view-middle { height: 200px; } .mui-popover.custom-popover .mui-table-view:after { height: 1px; } .mui-popover.custom-popover .mui-table-view.table-view-middle:after { height: 0; } .mui-popover.custom-popover .mui-table-view.table-view-bottom.fixed-btn-box { background: #035495; border-radius: 6px; position: fixed; z-index: 999; color: white; bottom: 6px; width: 90%; left: 5%; } .mui-popover.custom-popover .mui-table-view.table-view-bottom.fixed-btn-box:after { height: 0; } .mui-popover.custom-popover .mui-table-view .mui-table-view-cell { padding: 11px 25px; } .mui-popover.custom-popover .mui-table-view .mui-table-view-cell.center { text-align: center; } .mui-popover.custom-popover .mui-table-view.table-view-top .mui-table-view-cell { padding: 11px 20px; } .mui-popover.custom-popover .mui-table-view.table-view-bottom.fixed-btn-box .mui-table-view-cell { padding: 0; border-radius: 5px; } .mui-popover .mui-table-view.table-view-top li.mui-table-view-cell a.mui-icon-closeempty { top: 18px; left: 20px; padding: 0; color: #999999; display: inline; font-size: 30px; font-weight: bold; position: absolute; border-bottom: none; } .mui-popover .mui-table-view.table-view-top li.mui-table-view-cell span.title { color: #3a3a3a; font-weight: 600; } .mui-popover.custom-popover .mui-table-view .mui-table-view-cell:last-child:after { height: 0; } .mui-popover.custom-popover .mui-table-view .mui-table-view-cell .mui-input-row.mui-checkbox label, .mui-popover.custom-popover .mui-table-view .mui-table-view-cell .mui-input-row.mui-radio label { text-align: left; padding: 0 30px 0 0; } .mui-popover.custom-popover .mui-table-view .mui-table-view-cell .mui-input-row.mui-checkbox label>.title, .mui-popover.custom-popover .mui-table-view .mui-table-view-cell .mui-input-row.mui-radio label>.title { line-height: 25px; font-weight: 600; color: #000000; height: 25px; } .mui-popover.custom-popover .mui-table-view .mui-table-view-cell .mui-input-row.mui-checkbox label>.tips>span.num, .mui-popover.custom-popover .mui-table-view .mui-table-view-cell .mui-input-row.mui-radio label>.tips>span.num, .mui-popover.custom-popover .mui-table-view .mui-table-view-cell .mui-input-row.mui-checkbox label>.tips, .mui-popover.custom-popover .mui-table-view .mui-table-view-cell .mui-input-row.mui-radio label>.tips { line-height: 20px; font-size: 12px; color: #999999; height: 20px; } .mui-popover.custom-popover .mui-table-view .mui-table-view-cell .mui-input-row.mui-checkbox input[type=checkbox], .mui-popover.custom-popover .mui-table-view .mui-table-view-cell .mui-input-row.mui-radio input[type=radio] { top: 5; right: 0; } .mui-popover.custom-popover .mui-table-view.table-view-bottom.fixed-btn-box .mui-table-view-cell .btn { margin: 0; height: 50px; line-height: 50px; border-radius: 5px; } a.research-laws-info-operation-frame2-font.collect-btn { width: 100%; height: 100%; margin: 9px 0; line-height: 1; } a.research-laws-info-operation-frame2-font.collect-btn>span.mui-icon { top: -1px; font-size: 18px; position: relative; margin-right: 10px; }
html：
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> <link href="../css/custom.popover.css" rel="stylesheet" /> </head> <body> <header class="mui-bar mui-bar-nav" style="background: #ffffff; box-shadow: none;"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">基於mui.popover的底部彈出列表元件和mui.prompt</h1> </header> <div class="mui-content"> <a href="#favorites" class="mui-btn mui-btn-outlined" style="margin: 30px 30%;">mui.custom.popover</a> </div> </body> <script src="../js/mui.min.js"></script> </html>
效果展示：
以此做個記錄，
如有不足之處還望多多留言指教！