forked from ant-design/antd-mobile-samples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
cdn-demo.html
89 lines (88 loc) · 2.92 KB
/
cdn-demo.html
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/antd-mobile/dist/antd-mobile.min.css">
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="//cdn.bootcss.com/react/15.4.1/react.min.js"></script>
<script src="//cdn.bootcss.com/react/15.4.1/react-dom.min.js"></script>
<script src="https://unpkg.com/antd-mobile/dist/antd-mobile.min.js"></script>
<script>
window.data = {
picker: [{
value: 'bj',
label: '北京市',
}, {
value: 'zj',
label: '浙江省',
}, {
value: 'gd',
label: '广东省',
}, {
value: 'hn',
label: '海南省',
}, {
value: 'cq',
label: '重庆市',
}, {
value: 'sc',
label: '四川省',
}],
};
</script>
<script type="text/jsx">
console.log(window['antd-mobile'])
const Button = window['antd-mobile'].Button;
const SearchBar = window['antd-mobile'].SearchBar;
const Picker = window['antd-mobile'].Picker;
const List = window['antd-mobile'].List;
const NoticeBar = window['antd-mobile'].NoticeBar;
const CheckboxItem = window['antd-mobile'].Checkbox.CheckboxItem;
const App = React.createClass({
getInitialState() {
return {
pickerValue: [],
};
},
render() {
return <div>
<NoticeBar mode="link">国庆期间余额宝收益和转出到账时间</NoticeBar>
<SearchBar placeholder="pp" />
<Button>Button</Button>
<List>
<CheckboxItem onChange={(e) => {console.log('checkbox', e);}}>CheckboxItem</CheckboxItem>
<Picker
data={window.data.picker}
title="选择地区"
extra="请选择(可选)"
value={this.state.pickerValue}
onChange={(v) => this.setState({ pickerValue: v })}
>
<List.Item arrow="horizontal">省市区选择</List.Item>
</Picker>
</List>
<List style={{height: document.documentElement.clientHight}}>
{_.map(new Array(200), (i, index) => (
<List.Item key={index}>我是第{index}个item</List.Item>
))}
</List>
</div>
}
});
ReactDOM.render(<App />, document.getElementById('root'));
</script>
<script>
if ('addEventListener' in document) {
window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);
}
</script>
</body>
</html>