mui開發APP教程之省市區級聯

阿新 • • 發佈：2019-01-24

在前一章我們寫了年月日級聯，這次我們來寫省市級聯，同樣，實現級聯的功能是基於mui的picker選擇器，
所以到匯入檔案，這次要匯入mui.picker.css、mui.poppiker.js以及用來儲存地址資訊得city.data-3.js（三級級聯，二級級聯，則可使用city.data.js）,
檔案獲取途徑，見上篇年月日級聯

廢話不多說，我們來看程式碼：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title 
>Document</title>
    <meta name="viewport" 
,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/mui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mui.picker.css"/>
</head>
<body>

    <header class 
="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
            <span style="color: #202020; font-size: 20px;">省市區級聯</span>
        </a>
    </header>  
    <div class="mui-content">
        <div id="showAddress"> 
 省、市、區</div>
    </div>

    <script src="./mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="./mui.picker.js" type="text/javascript" charset="utf-8"></script>
    <script src="./mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
    <script src="./city.data-3.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
         mui.plusReady(function () {
        document.getElementById('showAddress').addEventListener('tap', function () {

            var adressStr = '';
            //顯示幾層，我們要顯示省、市、區，所以我們這裡寫三層，如果不寫預設是一層
            var addressPicker = new mui.PopPicker({
                layer: 3
            });
            addressPicker.setData(cityData3);
            //city.data-3.js中的資料

            addressPicker.show(function (selectItems) {
                //將選擇的省、市、區顯示到螢幕上
                for (var i = 0; i < selectItems.length; i++) {
                    adressStr += selectItems[i].text;
                }
                document.getElementById('showAddress').innerHTML = adressStr;
            });
        })
         });
    </script>
</body>
</html>

本文寫於2017年4月，如果使用的是最新版本的mui程式碼，可能會出現不相容的情況。
另外，所有引入的js檔案在我的github均可以下載下來。

超級簡單

mui開發APP教程之省市區級聯

demo預覽省市區級聯在前一章我們寫了年月日級聯，這次我們來寫省市級聯，同樣，實現級聯的功能是基於mui的picker選擇器，所以到匯入檔案，這次要匯入mui.picker.css、mui.

mui開發APP教程之建立專案

mui是一個基於H5+的前端框架，最近做畢業設計基於HTML5的APP，用的就是該框架，其中遇到不少坑，接下來貨闡述遇到的坑以及解決方法。至於mui是幹嘛的，有什麼優點就不說了，官網（http://de

mui開發APP教程之mui.ajax請求後出現“載入中”

利用mui.ajax向伺服器請求資料會出現請求超時的情況，一般若是10S之後還沒有響應，就會定義為超時，那麼出錯了的時候，這10秒鐘不可能給使用者白屏，即便是請求成功之後開啟一個新頁面，那麼這個間隔時間也給使用者響應。但是mui 的ajax並沒有實現類似jq

mui開發app之plusready和init區別

除了function定義函式之外，全都寫在plusReady之中，function呼叫也放在其中，畢竟做app開發呼叫html5+api十分的頻繁，就像jq的$(document).ready()一樣的道理，尤其是出現plus物件的一定放在plusReady裡面！

mui開發app之多圖壓縮與上傳（仿qq空間說說發表）

應廣大讀者建議，已經將該專案原始碼提交到地址： https://download.csdn.net/download/u014466109/10465677 與本部落格相關的多圖壓縮上傳程式碼在dashen/service/ask.html，請解壓專案並移動

HBuilder開發App教程03-定制圖標，啟動頁以及打包

頂部版本默認升級 clas art app名稱支付新版 helloworld 上次說到了helloworld。你應該已經能夠新建項目。真機調試了，這次來說說圖標的定制，啟動頁的定制以及打包。圖標定制假設不定制圖標的話，默認會是博文頂部圖表的樣子，

asp.net mvc+jquery easyui開發實戰教程之網站後臺管理系統開發2-Model層建立

ack 前端 strong syn eee 名稱 lar led tegra 上篇(asp.net mvc+jquery easyui開發實戰教程之網站後臺管理系統開發1-準備工作)文章講解了開發過程中的準備工作，主要創建了項目數據庫及項目，本文主要講解項目M層的實現，M層

基於Element UI Cascader 級聯選擇器的中國省市區級聯數據

省市區三級聯動 col 在線演示例如三級聯動 nbsp bsp html 中國安裝 npm install element-china-area-data -save 在線演示：https://plortinus.github.io/element-china-a

PHP開發APP介面之封裝通訊介面

PHP開發APP介面之封裝通訊介面按json方式輸出通訊資料 /** * 按json方式輸出通訊資料 * @param integer $code 狀態碼 * @param string $message 提示資訊 * @p

HBuilder Mui 開發App 實現ajax呼叫Java後臺的測試程式碼--仿照山西太原專案現實

1 HBuilder url:'http://192.168.8.199:8089/data',====對應伺服器地址 dataType:"

h5與mui開發app標題的滑動實現和樣式追蹤

mui.init({ gestureConfig: { longtap: true //預設為false }, swipe:true, //啟用右滑關閉功能 pullRefresh : { container:".mui-scroll-wrappe

Java開發學習教程之物件的建立與使用

java面向物件中的物件建立與使用。類是物件的抽象，為物件定義了屬性和行為，但類本身既不帶任何資料，也不存在於記憶體空間中。而物件是類的一個具體存在，既擁有獨立的記憶體空間，也存在獨特的屬性和行為，屬性還可以隨著自身的行為而發生改變。接下來演示如何用類建立物件，建立物件之前，必須先宣告物件，其

HBuilder開發App教程06-首頁

實戰前面幾節基本是一些概念的普及，正如前面提到的，本教程會以滴石作為範例進行講解，有興趣的可以先行下載體驗一下，或者下載原始碼研究下。新建專案開啟HBuilder，在專案管理器中右鍵——新建——移動app，或者直接ctrl+n，a，見到如下介面，填入專案名稱

HBuilder開發App教程13-ios除錯以及釋出【完結】

完結不知不覺，教程就完結了，感覺很快，有可能是app過於簡單吧，或者自己講的不是很詳細？不管怎麼樣，總算完結了，附一張美女圖片，犒勞下~ ios除錯之前的真機除錯一直是用的android真機，今天用了下iphone6，感覺也沒啥難度，具體如下： 1.首先你需要有一

百為STM32開發板教程之十二——NAND FLASH

參考資料:百為stm32開發板光碟V3\百為stm32開發板光碟\晶片資料手冊\K9F1208.pdf百為stm32開發板光碟\st官方參考資料\Application notes\AN2784 Using the high-density STM32F10xxx FSMC

Linux (x86) Exploit 開發系列教程之十使用 Malloc Maleficarum 的堆溢位

使用 Malloc Maleficarum 的堆溢位預備條件：從 2004 年末開始，glibc malloc 變得更可靠了。之後，類似 unlink 的技巧已經廢棄，攻擊者沒有線索。但是在 2005 年末，Phantasmal Phatasma

HBuilder開發App教程08-幾種頁面開啟方式

說明上節說了list頁面的實現，其中關於幾種頁面的開啟方式沒有詳細述說，本節詳細述說下幾種頁面開啟方式的區別。幾種開啟頁面的方式 1.初始化時建立子頁面 2.直接開啟新頁面 3.預載入頁面示例 1.初始化時建立子頁面 mui.init({ subpage

Linux (x86) Exploit 開發系列教程之二(整數溢出)

exec spa 整數 rcp argc roc arp 密碼 b+ （1）漏洞代碼 //vuln.c #include <stdio.h> #include <string.h> #include <stdlib.h> v

Linux (x86) Exploit 開發系列教程之三(Off-By-One 漏洞 (基於棧))

字符串長度教程緩沖實現長度溢出 att 測試 div （1）原理：將源字符串復制到目標緩沖區可能會導致off by one。當源字符串長度等於目標緩沖區長度時，單個NULL字節將被復制到目標緩沖區上方。這裏由於目標緩沖區位於堆棧中，所以單個NULL字節可以覆蓋

HTML5+開發移動app教程3-mui開發示例

除錯（android為例）連線手機首先需要連線手機執行選擇執行——手機執行——在xx裝置上執行或者使用快捷鍵ctrl+r 效果現在你就可以在手機上看效果了注意需要開啟開發者模式打包 dcloud證書打包選擇發行——App打包——選擇Android以及dcloud公用證書，如下：引數

mui開發APP教程之省市區級聯

相關推薦