apicloud apicloud

注册
查看: 4566|回复: 23

[模块教程] UICityList(城市列表)模块demo

老司机

UID:253706

主题:
177
帖子:
16974
云币:
8007

[模块教程] UICityList(城市列表)模块demo

4566 23 | 发表于 2017-12-18 20:27:51 |阅读模式 | |
本帖最后由 gigie 于 2017-12-19 20:35 编辑

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
                <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
                <title>title</title>
                <link rel="stylesheet" type="text/css" href="../css/api.css"/>
                <style>
                        body {
                        }
                        html, body {
                                height: 100%
                        }
                        body {
                                background-color: #fff;
                                margin: 0;
                        }
                        #wrap {
                                height: 100%;
                                position: relative;
                        }
                        #header {
                                padding-top: 20px;
                                background-color: #5082c2;
                                height: 44px;
                                position: relative;
                        }
                        #header h1 {
                                font-size: 20px;
                                height: 44px;
                                line-height: 44px;
                                margin: 0em;
                                color: #fff;
                                margin-left: 100px;
                                margin-right: 100px;
                                text-align: center;
                        }
                        #main {
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-box-pack: center;
                        }
                        a.button {
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-box-pack: center;
                                -webkit-box-align: center;
                                height: 32px;
                                margin: 8px;
                                background-color: rgba(240,240,240,1.0);
                                border-color: rgba(220,220,220,1.0);
                                border-width: 2px;
                                border-style: solid;
                        }
                        a.active {
                                background-color: rgba(240,240,240,0.7);
                        }
                </style>
        </head>
        <body>
                <a class="button" tapmode="active">打开UICityList</a>
                <a class="button" tapmode="active">关闭UICityList</a>
                <a class="button" tapmode="active">显示UICityList</a>
                <a class="button" tapmode="active">隐藏UICityList</a>
        </body>
        <script type="text/javascript" src="../script/api.js"></script>
        <script type="text/javascript">
                apiready = function() {
                        api.addEventListener({
                                name : 'shake'
                        }, function(ret, err) {
                                //close_U()
                                hide_U()
                        });
                };
                function open_U() {
                        var UICityList = api.require('UICityList');
                        UICityList.open({
                                rect : {
                                        x : 0,
                                        y : 0,
                                        w : api.frameWidth,
                                        h : api.frameHeight
                                },
                                resource : 'widget://res/UICityList.json',
                                topCitys : [{
                                        'city' : '北京', //字符串类型;城市
                                        'id' : 110001, //字符串类型;城市编号
                                        'pinyin' : 'beijing' //(可选项)字符串类型;本字段可不传,若不传模块内会生成该城市名的pinyin,以防止城市名中的多音字乱序问题
                                }],
                                styles : {
                                        searchBar : {
                                                bgColor : '#696969',
                                                cancelColor : '#E3E3E3'
                                        },
                                        location : {
                                                color : '#696969',
                                                size : 12
                                        },
                                        sectionTitle : {
                                                bgColor : '#eee',
                                                color : '#000',
                                                size : 12
                                        },
                                        item : {
                                                bgColor : '#fff',
                                                activeBgColor : '#696969',
                                                color : '#000',
                                                size : 14,
                                                height : 40
                                        },
                                        indicator : {
                                                bgColor : '#fff',
                                                color : '#696969'
                                        }
                                },
                                searchType : 'initial',
                                currentCity : '北京',
                                locationWay : 'GPS',
                                hotTitle : '热门城市',
                                fixedOn : api.frameName,
                                placeholder : '输入城市名或首字母查询'
                        }, function(ret, err) {
                                if (ret) {
                                        alert(JSON.stringify(ret));
                                } else {
                                        alert(JSON.stringify(err));
                                }
                        });
                }

                function close_U() {
                        var UICityList = api.require('UICityList');
                        UICityList.close();
                }

                function show_U() {
                        var UICityList = api.require('UICityList');
                        UICityList.show();
                }

                function hide_U() {
                        var UICityList = api.require('UICityList');
                        UICityList.hide();
                }
        </script>
</html>
             UICityList模块demo,可以直接用AppLoader看效果




本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

1

查看全部评分

主题:
61
帖子:
37573
云币:
17564
发表于 2017-12-19 20:30:48 |

驾校小白

UID:694099

主题:
1
帖子:
7
云币:
23
发表于 2018-8-19 21:54:40 |
请教一下:在frame打开cityList后,如果不想选,直接关闭cityList要怎么操作?

新手上路

UID:7462

主题:
27
帖子:
111
云币:
238
发表于 2018-9-7 17:35:49 |
lf8871 发表于 2018-8-19 21:54
请教一下:在frame打开cityList后,如果不想选,直接关闭cityList要怎么操作?

加一个按钮   然后触发 close()或者 hide()

驾校小白

UID:714825

主题:
1
帖子:
2
云币:
3
发表于 2018-10-31 15:28:56 |
请问选中之后跳回怎么弄

驾校小白

UID:708311

主题:
0
帖子:
3
云币:
5
发表于 2018-10-31 15:45:07 |
鼓掌 感谢感谢

主题:
0
帖子:
1
云币:
1
发表于 2018-11-1 11:56:19 |
打开后我左右滑动会影响页面中的framgroup,怎样禁止

主题:
5
帖子:
14
云币:
19
发表于 2018-11-27 12:26:43 |
请问如何为左上角的按钮添加事件

驾校小白

UID:682569

主题:
0
帖子:
1
云币:
1
发表于 2019-1-21 17:24:57 |
不传pinyin字段的情况下,重庆会识别为zhongqing是z开头啊

主题:
98
帖子:
279
云币:
384
发表于 2019-2-21 17:08:58 |
这个插件中间不能有断的啊,a b c d 如果没有c开头的,点击c会定位到d,往下走的话 o p q 如果o有也会往后移
123下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表