jQuery省市區鎮城市菜單聯動插件



169 672 225



特效描述:jQuery 省市區鎮城市 菜單聯動插件,jQuery省市區鎮四級聯動插件,選擇城市多級菜單插件代碼。 引用方法:1、 jquery.js (請把這個放首位引入)。2、 city-picker.data.js (全國省市區數據都在這個文件里面)。3、city-picker.js (js實現功能邏輯)。4、 city-picker.css (省市區縣選擇器樣式,這個也可以不用,可以自己寫個更好看的) 。

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
<link href="css/city-picker.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">

2. 引入JS

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/city-picker.data.js"></script>
<script type="text/javascript" src="js/city-picker.js"></script>
<script type="text/javascript" src="js/main.js"></script>

3. HTML代碼

<input id="addrValue" name="formMap.addrs"   type="hidden" value="">
<!-- Content -->
<div class="container">
    <h1 class="page-header" id="getting-started">Getting started</h1>
    <h2>Installation</h2>
    <h5>Include files:</h5>
    <pre class="prettyprint">&lt;script src=&quot;/path/to/jquery.js&quot;&gt;&lt;/script&gt;&lt;!-- jQuery is required --&gt;
&lt;script src=&quot;/path/to/city-picker.data.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/path/to/city-picker.js&quot;&gt;&lt;/script&gt;</pre>
    <h5>Create HTML elements:</h5>
    <pre class="prettyprint">&lt;div style="position: relative;"&gt;&lt;!-- container --&gt;
  &lt;input readonly type="text"&gt;
&lt;/div&gt;</pre>
    <h2 class="page-header">Initialize with <code>data-toggle="city-picker"</code> attribute</h2>
    <h3>Basic</h3>
    <h5>HTML:</h5>
    <pre class="prettyprint">&lt;div data-toggle="city-picker"&gt;
   &lt;input readonly type="text" data-toggle="city-picker" &gt;
&lt;/div&gt;</pre>
    <h5>Demo:</h5>
    <form class="form-inline">
        <div style="position: relative;">
            <input class="form-control" readonly type="text" data-toggle="city-picker">
        </div>
    </form>
    <h3>Level</h3>
    <h5>HTML:</h5>
    <pre class="prettyprint">&lt;div style="position: relative;"&gt;&lt;!-- container --&gt;
  &lt;input readonly type="text" data-toggle="city-picker" placeholder="請選擇省/市" data-level="city" &gt;
&lt;/div&gt;</pre>
    <h5>Demo:</h5>
    <form class="form-inline">
        <div style="position: relative;">
            <input class="form-control" readonly type="text" data-toggle="city-picker" data-level="city"
                   placeholder="請選擇省/市">
        </div>
    </form>
    <h3>Custom placeholders</h3>
    <h5>HTML:</h5>
    <pre class="prettyprint">&lt;div style="position: relative;"&gt;&lt;!-- container --&gt;
  &lt;input readonly type="text" data-toggle="city-picker" placeholder="點擊從下拉面板中選擇省/市/區/縣"&gt;
&lt;/div&gt;</pre>
    <h5>Demo:</h5>
    <form class="form-inline">
        <div style="position: relative;">
            <input class="form-control" readonly type="text" data-toggle="city-picker" placeholder="點擊從下拉面板中選擇省/市/區">
        </div>
    </form>
    <h3>Simple Address</h3>
    <h5>HTML:</h5>
    <pre class="prettyprint">&lt;div style="position: relative;"&gt;&lt;!-- container --&gt;
  &lt;input readonly type="text" data-toggle="city-picker" data-simple="true" &gt;
&lt;/div&gt;</pre>
    <h5>Demo:</h5>
    <form class="form-inline">
        <div style="position: relative;">
            <input class="form-control" readonly type="text" data-toggle="city-picker" data-simple="true">
        </div>
    </form>
    <h3>Responsive Width</h3>
    <h5>HTML:</h5>
    <pre class="prettyprint">&lt;div style="position: relative;"&gt;&lt;!-- container --&gt;
  &lt;input readonly type="text" data-toggle="city-picker" style="width:50%;"&gt;
&lt;/div&gt;</pre>
    <h5>Demo:</h5>
    <form class="form-inline">
        <div style="position: relative;">
            <input class="form-control" readonly type="text" data-responsive="true" data-toggle="city-picker"
                   style="width:50%;">
        </div>
    </form>
    <h3>Custom Province / City / District</h3>
    <h5>HTML:</h5>
    <pre class="prettyprint">&lt;div style="position: relative;"&gt;&lt;!-- container --&gt;
  &lt;input readonly type="text" data-toggle="city-picker" value="廣東/廣州市/番禺區/石樓鎮"&gt;
&lt;/div&gt;</pre>
    <h5>Demo:</h5>
    <form class="form-inline">
        <div style="position: relative;">
            <input class="form-control" readonly type="text" data-toggle="city-picker" value="廣東/廣州市/番禺區/石樓鎮">
        </div>
    </form>
    <br>
    <p class="alert alert-warning"><i class="glyphicon glyphicon-exclamation-sign"></i> The districts must be existed in
        the <strong class="text-primary">city-picker.data.js</strong> file!</p>
    <h2 class="page-header">Initialize with <code>$.fn.citypicker</code> method</h2>
    <h3>Basic</h3>
    <h5>HTML:</h5>
    <pre class="prettyprint">&lt;div style="position: relative;"&gt;&lt;!-- container --&gt;
  &lt;input id="city-picker1" readonly type="text"&gt;
&lt;/div&gt;</pre>
    <h5>JavaScript:</h5>
    <pre class="prettyprint">$(&quot;#city-picker1&quot;).citypicker();</pre>
    <h5>Demo:</h5>
    <form class="form-inline">
        <div style="position: relative;">
            <input id="city-picker1" class="form-control" readonly type="text">
        </div>
    </form>
    <h3>Custom Province / City / District</h3>
    <h5>HTML:</h5>
    <pre class="prettyprint">&lt;div style="position: relative;"&gt;&lt;!-- container --&gt;
  &lt;input id="city-picker2" readonly type="text"&gt;
&lt;/div&gt;</pre>
    <h5>JavaScript:</h5>
    <pre class="prettyprint">$(&quot;#city-picker2&quot;).citypicker({
  province: &quot;廣東&quot;,
  city: &quot;廣州市&quot;,
  district: &quot;番禺區&quot;,
  district: &quot;石樓鎮&quot;
});</pre>
    <h5>Demo:</h5>
    <form class="form-inline">
        <div style="position: relative;">
            <input id="city-picker2" class="form-control" readonly type="text">
        </div>
    </form>
    <br>
    <p class="alert alert-warning"><i class="glyphicon glyphicon-exclamation-sign"></i> The districts must be existed in
        the <strong class="text-primary">city-picker.data.js</strong> file!</p>
    <h2 class="page-header">Methods</h2>
    <div class="docs-methods">
        <form class="form-inline">
            <div id="distpicker">
                <div class="form-group">
                    <div style="position: relative;">
                        <input id="city-picker3" class="form-control" readonly type="text" value="廣東/廣州市/番禺區/石樓鎮"
                               data-toggle="city-picker">
                    </div>
                </div>
                <div class="form-group">
                    <button class="btn btn-warning" id="reset" type="button">reset</button>
                    <button class="btn btn-danger" id="destroy" type="button">destroy</button>
                    <div class="dropup">
                        <button id="code-count" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="text">Full Code</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:void(0);" data-count="">Full Code</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="javascript:void(0);" data-count="province">Province Code</a></li>
                            <li><a href="javascript:void(0);" data-count="city">City Code</a></li>
                            <li><a href="javascript:void(0);" data-count="district">District Code</a></li>
                        </ul>
                    </div>
                    <button class="btn btn-success" id="get-code" type="button">getCode<span class="code"></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Footer -->
<footer class="docs-footer">
    <div class="container">
        <span class="hearts"></span>
    </div>
</footer>
<!-- Scripts -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 視頻切換 三級聯動 城市選擇 城市選擇器
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子