高德接口无排序选项,本示例只做插件演示
自定义 types 字段,激活时查看当前排序项目的 class 类名;
并为其添加对应样式
并为其添加对应样式
示例代码:
CSS:
1
2
3
4
5
6
7
// 自定义样式类
.cdlist-sort-type-mydown:after {
content: "*mydown*";
}
.cdlist-sort-type-myup:after {
content: "*myup*";
}
JAVASCRIPT:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
var DEFAULT_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAk1BMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ROyVeAAAAMHRSTlMA3remQMMv+eu2RzznyrysmJNlRA8G7+TVv7KnooyEelopIxMK4F5JNAH284d0VR38f9wYAAAA2UlEQVQoz52Q6Q6CMBCEC7a2pdy3HIKA99X3fzq3+EMQSIybdLLNl53MLvq5oizRnrPESBt7M0tKgsR1N2e2vyPM5oindci1zlOwlRg1tJ6CSj5QVFhTgKUP4dipC8MvYusgR9PJuF210HY4CAID4vhSwPdce+XW3audcmoyxlLjQKvPeJuA0IPAWDiSekPnHJ7W9osQMTpSrMhJtY47jmkqslbtajXOSZaIry0RwpfI7eOWF0MQWkVPptmOMgA1w/7+cT0MIBvQOM10ricbi3D9Xdy+lBH6p15BIw0F5vgmRQAAAABJRU5ErkJggg==';
// 初始化排序插件
var sort = window.sort = new CdList.addons.Sort({
datas: [
{
key: 'default',
name: '默认'
},
{
key: 'price',
name: '价格排序',
// 自定义数据
types: [
'myup',
'mydown'
]
}
]
});
var cdList = window.cdlist = new CdList({
ulClass: 'amap-list',
addons: [sort],
getUrl: function (data) {
var param = {
key: '6a8449ec9b2da3fcff320383bfc69e92',
extensions: 'all',
offset: 10,
city: 'beijing'
};
if (data.sort) {
param.sort_key = data.sort.key;
param.sort_type= data.sort.type;
}
return 'https://restapi.amap.com/v3/place/text?' + $.param(param);
},
empty: function () {
return '<div class="amap-list-empty">抱歉,没有您查找的 POI </div>'
},
getAjaxData: function (url) {
return $.ajax({
url: url,
dataType: 'jsonp'
});
},
rows: function (item) {
var html = ['<li>',
'<div class="img" style="background-image:url(' + (item.photos[0] && (item.photos[0].url + '?operate=merge&w=160&h=150&position=5') || DEFAULT_IMAGE) + ')"/>',
'<div class="item-main">',
'<div class="item-name">' + item.name + '</div>',
'<div class="item-address">详细地址' + item.address + '</div>',
'</div>',
'</li>'].join('');
return html;
},
getRowsData: function (json) {
return json.pois;
}
}, '#cdlist-wrap');
cdList.getList();