美文网首页
手机端增加地址选择插件

手机端增加地址选择插件

作者: 阿喜吧 | 来源:发表于2017-07-22 11:17 被阅读0次

需求：当点击收货地址从下面时弹出地址选择的页面，类似美团的实现

实现方式：用  SUI Mobile  

使用方式：

1. 引用静态资源

我们提供了CDN地址可以直接使用，并且强烈建议使用我们的CDN而不是下载到本地。

<!--资源引用--> 

 <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">

 <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">

js资源

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> 

<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script> 

<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>

 <script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>

给对应的input绑定id和默认值        id='city-picker'        value="广东 广州 天河区"

然后再页面底部添加如下代码：

<script>

 $("#city-picker").cityPicker({

         toolbarTemplate: "<header class='bar bar-nav'>\ <button class='button button-link pull-right close-              picker'>确定</button>\ <h1 class='title'>选择收货地址</h1></header>" 

 });

 </script>

然后就实现了再点击地址输入框的时候弹出地址选择页面

相关文章

网友评论

      本文标题：手机端增加地址选择插件

      本文链接：https://www.haomeiwen.com/subject/totukxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|手机端增加地址选择插件|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！