LArea移動端城市選擇控制元件的使用

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

寫在前面：

大神寫的js控制元件，專案需要拿來使用，記錄下使用方法。

使用方法：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>城市選擇控制元件</title>
    <link rel="stylesheet" href="css/LArea.css">
</head>

<body>
    <div>
      <div class="content-block">
            <input id="demo1" type="text" readonly="" placeholder="城市選擇特效"  value="廣東省,深圳市,南山區"/>
            <input id="value1" type="hidden" value="20,234,504"/>
        </div>
       <div class="content-block">
            <input id="demo2" type="text" readonly="" placeholder="城市選擇特效" />
            <input id="value2" type="hidden" />
        </div>
    </div>
    <script src="js/LAreaData1.js"></script>
    <script src="js/LAreaData2.js"></script>
    <script src="js/LArea.js"></script>
    <script>
   var area1 = new LArea();
    area1.init({
        'trigger': '#demo1', //觸發選擇控制元件的文字框，同時選擇完畢後name屬性輸出到該位置
        'valueTo': '#value1', //選擇完畢後id屬性輸出到該位置
        'keys': {
            id: 'id',
            name: 'name'
        }, //繫結資料來源相關欄位 id對應valueTo的value屬性輸出 name對應trigger的value屬性輸出
        'type': 1, //資料來源型別
        'data': LAreaData //資料來源
    });
    area1.value=[1,13,3];//控制初始位置，注意：該方法並不會影響到input的value
    var area2 = new LArea();
    area2.init({
        'trigger': '#demo2',
        'valueTo': '#value2',
        'keys': {
            id: 'value',
            name: 'text'
        },
        'type': 2,
        'data': [provs_data, citys_data, dists_data]
    });
    </script>
</body>
</html>

效果：

特別說明：

設定預設選中時，該控制元件設定area1.value=[15,16,8];

這裡的數字，並非是ref中的值，也就是說並不是該城市對應的id，這裡設定的值與LAreaData1.js或LAreaData2.js中設定的id沒有關係，與該城市在列表中對應的索引有關。

例如圖中選擇為鄭州索引為0，駐馬店市索引為16，河南省索引為15，所以設定為15，16。與之對應的top=-16*2=-32em。

LArea移動端城市選擇控制元件的使用

寫在前面：大神寫的js控制元件，專案需要拿來使用，記錄下使用方法。使用方法： <!doctype html> <html> <head> <meta charset="utf-8" /> <

vue移動端城市三級聯動元件

先看效果圖以下元件程式碼 <template> <div class="address"> <div class="addressboxbg" @click="cancel"></div> <div

小程式自定義城市選擇控制元件

效果圖：介紹：對於微信小程式，微信提供了一個滾動選擇器和自身的城市滾動選擇器，但是開發中難免存在一些自定義的樣式，這時候就要自己來定義了。下面我來簡單介紹一下怎麼自定義: 1，首先微信提供了一個

自己動手豐衣足食之移動端城市選擇外掛

下載地址：http://download.csdn.net/detail/cometwo/9436021 接著上一篇純js移動端日期選擇外掛，話說今天同事又來諮詢省市縣聯動的效果在移動端中如何實現，還是老樣子，百度上一搜，誒~又全是基於jquery、zepto的，更加可恨的

移動端mobiscroll時間控制元件的使用

最近需要實現一個在手機上選擇時間的功能，當然首先想到的就是時間控制元件的使用，最後找到一個相對比較合適，在此記錄一下。相關例子程式碼： <span style="font-size:18px;"><!DOCTYPE htm

pc/手機端時間選擇控制元件

pc端 <input class="Wdate" type="text" onClick="WdatePicker()"> <font color=red><- 點我彈出日期控制元件</font> <in

jquery.mobiscroll 適合移動端使用的滑動選擇控制元件 -- 自定義選項示例

mobiscroll ：滑動選擇 2.13.2版本免費，官網（mobiscroll.com）收費另外官方還有線上例子：下載完成後，保留mobiscroll-2.13.2.full.min.css，mobiscroll-2.13.2.full.min.j

vue移動端城市列表按首字母排序元件包，有npm包，可直接下載使用

初衷，為各使用相關元件的小夥伴寫更少的相關程式碼實現功能，原始碼在我的被另一篇博文裡有，有興趣的可以去研究，使用過程中有問題的請即時反饋，謝了！qq（微信）591339209，有其他常用到的元件也可以反饋給我，酌情封裝！另外要是這個元件還有什麼需要優化，或者有哪裡使用還不方便

Android 城市列表選擇控制元件

封裝好了，只要呼叫一下這個控制元件，話不多說，上圖！（裡面的省市，地區，放在一個xml檔案中） public class CityPickerDialog extends Dialog implements android.view.View.OnClick

移動端地區選擇mobile-select-area插件的使用方法

lba 方法會有 width images 元素 hold inpu ges 顧名思義，mobile-select-area插件就是使用在移動端上的進行地區選擇的插件，而且使用方法簡單，我就說我是怎麽用的吧一、準備工作首先肯定要下載插件對應的css+js文件, 當

移動端權限控制--設置每個登錄用戶的sessionId

sessionid前言：在pc端，每個用戶首次登錄後，瀏覽器會返回一個sessionId,存放在瀏覽器的響應中。當再次訪問其他接口時，瀏覽器會自動將sessionId放在請求頭中的Cookie中。後臺會自動識別sessionId，判斷是哪個用戶發過來的請求。但是在移動端，瀏覽器沒有實現這個功

移動端日期選擇控件

滑動 format minute scale speed erro 圖片其它 image <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta n

手機端移動端的選擇框mobileSelect.js使用

ive http js 函數 ++ del ava res 部分手機端手機端移動端的選擇框mobileSelect.js使用文件地址：https://github.com/onlyhom/mobileSelect.js 請感興趣的自行下載使用過程 1 引入標簽

vue 移動端日期選擇組件 vue-mobile-calendar

日期 tar blank size end https hang fault from vue-mobile-calendar cnpm install vue-mobile-calendar -S import Vue from ‘vue‘ impo

數值範圍選擇控制元件RangeSlider

原文: 數值範圍選擇控制元件RangeSlider RangeSlider控制元件用於在一個指定上下限的範圍中選擇一個數值範圍，因此該控制元件的Maximum和Minimum屬性用於指定上下限；而SelectionStart和SelectionEnd用於指定選擇的範圍，還有一個Change屬性

關於rem換算、移動端通過js控制動態控制rem寬高比的一個函式

(function () { // rem換算zx var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; var do

Android實現顏色選擇控制元件

Android實現顏色選擇控制元件一、實現效果二、使用方式三、設計目標四、程式碼分析 1. 控制元件佈局結構 2. 定義`CircleColorButton` 3. 核心屬性

安卓:一個簡單的日期選擇控制元件

package com.example.listpickerdialog; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; impo

移動端圖片手勢控制雙指縮放單指移動

var pageX,pageY,position_top,position_left; function setGesture(el) { var obj = {}; //定義一個物件 var istouch = fals

bootstrap-duallistbox 多對多選擇控制元件

其是bootstrap下的控制元件，所以要引入bootstrap相關css與js以及jquery，並引入自己的 <link rel="stylesheet" href="{% static '

LArea移動端城市選擇控制元件的使用

相關推薦