Skip to content

Commit dc60973

Browse files
pingan1927pingan1927
committed
add mobile demo
1 parent 70dc473 commit dc60973

36 files changed

+2546
-0
lines changed

‎index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
6+
<title>Ant Mobile</title>
7+
<meta name="apple-mobile-web-app-capable" content="yes" />
8+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
9+
<meta name="format-detection" content="telephone=no" />
10+
<meta name="format-detection" content="email=no" />
11+
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
12+
<link rel="stylesheet" type="text/css" href="./mobile.css"/>
13+
</head>
14+
<body>
15+
<div id="react-content"></div>
16+
</body>
17+
<script src="https://a.alipayobjects.com/static/fastclick/1.0.6/fastclick.min.js"></script>
18+
<!--<script src="./common.js"></script>-->
19+
<script src="./mobile.js"></script>
20+
</html>

‎mobile/common/Item.jsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React, { PropTypes } from 'react';
2+
import './Item.less';
3+
4+
const Item = React.createClass({
5+
PropTypes: {
6+
logo: PropTypes.string,
7+
title: PropTypes.string,
8+
subtitle: PropTypes.string,
9+
onClick: PropTypes.func,
10+
},
11+
getDefaultProps() {
12+
return {
13+
logo: '',
14+
title: '',
15+
subtitle: '',
16+
onClick: () => {},
17+
};
18+
},
19+
_handleTouchStart() {
20+
this.refs.demoitem.style.backgroundColor = '#f2f2f2';
21+
},
22+
_handleTouchEnd() {
23+
this.refs.demoitem.style.backgroundColor = '#fff';
24+
},
25+
render() {
26+
const { logo, title, subtitle, onClick } = this.props;
27+
const width = (Math.floor(document.documentElement.clientWidth / 3) - 18) + 'px';
28+
return (
29+
<section className="am-demo-item" onClick={onClick} onTouchStart={this._handleTouchStart} onTouchEnd={this._handleTouchEnd} onTouchCancel={this._handleTouchEnd} ref="demoitem" style={{ height: width }}>
30+
<div className="am-demo-item-logo" style={{ backgroundImage: 'url(' + logo + ')' }}/>
31+
<h1 className="am-demo-item-title">{title}</h1>
32+
<h2 className="am-demo-item-subtitle">{subtitle}</h2>
33+
</section>
34+
);
35+
}
36+
});
37+
38+
export default Item;

‎mobile/common/Item.less

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.am-demo-item {
2+
padding-top: 18px;
3+
& &-logo {
4+
width: 32px;
5+
height: 32px;
6+
background-size: 32px 32px;
7+
margin: 0 auto 10px auto;
8+
}
9+
& &-title,
10+
& &-subtitle {
11+
color: #333;
12+
height: 20px;
13+
line-height: 20px;
14+
font-size: 13px;
15+
text-align: center;
16+
font-weight: normal;
17+
overflow: hidden;
18+
text-overflow: ellipsis;
19+
white-space: nowrap;
20+
padding: 0 10px;
21+
}
22+
}

‎mobile/common/Page.jsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { PropTypes } from 'react';
2+
import './Page.less';
3+
4+
const Page = React.createClass({
5+
PropTypes: {
6+
title: PropTypes.string,
7+
subtitle: PropTypes.string,
8+
children: PropTypes.any,
9+
isIndex: PropTypes.bool,
10+
logo: PropTypes.string
11+
},
12+
getDefaultProps() {
13+
return {
14+
logo: '',
15+
title: '',
16+
subtitle: '',
17+
isApp: 0,
18+
};
19+
},
20+
componentDidMount() {
21+
this.initScroller();
22+
},
23+
componentWillUnmount() {
24+
if(this.props.isIndex) {
25+
window.scrolltopNumber = document.querySelector('.am-demo-page').scrollTop;
26+
}
27+
},
28+
initScroller() {
29+
this.refs.demoPage.style.height = document.documentElement.clientHeight + 'px';
30+
this.refs.demoPage.style.overflowY = 'scroll';
31+
if(this.props.isIndex) {
32+
document.querySelector('.am-demo-page').scrollTop = window.scrolltopNumber;
33+
} else {
34+
document.querySelector('.am-demo-page').scrollTop = 0;
35+
}
36+
},
37+
render() {
38+
const { logo, title, subtitle, children } = this.props;
39+
const logoDom = logo !== '' ? <div className="logo" style={{ backgroundImage: 'url(' + logo + ')' }}/> : null;
40+
return (
41+
<section className="am-demo-page" ref="demoPage">
42+
<div className="am-demo-hd">
43+
{logoDom}
44+
<h1 className="am-demo-title">{title}</h1>
45+
<h2 className="am-demo-subtitle">{subtitle}</h2>
46+
</div>
47+
<div className="am-demo-bd">
48+
{children}
49+
</div>
50+
</section>
51+
);
52+
}
53+
});
54+
55+
export default Page;

‎mobile/common/Page.less

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.am-demo-page {
2+
background-color: #fbfbfb;
3+
-webkit-overflow-scrolling: touch;
4+
.am-demo-hd {
5+
padding: 2rem 0;
6+
color: #0ae;
7+
.logo {
8+
width: 120px;
9+
height: 120px;
10+
margin: 0 auto;
11+
background-size: 120px 120px;
12+
}
13+
.am-demo-title,
14+
.am-demo-subtitle {
15+
text-align: center;
16+
}
17+
.am-demo-title {
18+
font-size: 34px;
19+
font-weight: normal;
20+
}
21+
22+
.am-demo-subtitle {
23+
font-size: 14px;
24+
color: #888;
25+
font-weight: normal;
26+
}
27+
}
28+
.am-demo-bd {
29+
.antm-demo-flex {
30+
background: #fff;
31+
//border-top: 1px solid #d9d9d9;
32+
//border-bottom: 1px solid #d9d9d9;
33+
.am-flexbox-item {
34+
margin-left: 0;
35+
}
36+
}
37+
}
38+
}

‎mobile/common/lib.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import '../../style/index.jsx';
2+
import '../../components/flex/style';
3+
import '../../components/list/style';
4+
import '../../components/white-space/style';
5+
import '../../components/wing-blank/style';
6+
7+
import '../../components/button/style';
8+
import '../../components/captcha-item/style';
9+
import '../../components/checkbox-item/style';
10+
import '../../components/input-item/style';
11+
import '../../components/list-date-picker/style';
12+
import '../../components/list-picker/style';
13+
import '../../components/list-selector/style';
14+
import '../../components/modal/style';
15+
import '../../components/search-bar/style';
16+
import '../../components/select-item/style';
17+
import '../../components/switch-item/style';
18+
import '../../components/textarea-item/style';
19+
20+
import '../../components/article/style';
21+
import '../../components/card/style';
22+
import '../../components/message/style';
23+
import '../../components/page-result/style';
24+
import '../../components/process/style';
25+
import '../../components/result/style';
26+
import '../../components/toast/style';
27+
import '../../components/top-notice/style';
28+
29+
import '../../components/segmented-control/style';
30+
import '../../components/tab/style';

‎mobile/component/ArticleExample.jsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import Page from '../common/Page';
3+
import { Article } from '../../index.js';
4+
// import Article from '../../components/article/index.jsx';
5+
6+
const ArticleExample = React.createClass({
7+
render() {
8+
return (
9+
<Page title="文章" subtitle="&lt;Article title='标题' time='时间' onMoreClick={() => {}}/&gt;">
10+
<Article
11+
title="中石化加油卡办卡章程"
12+
time="2013-11-23 12:20:00"
13+
img="http://lorempixel.com/290/200/nature/2/"
14+
onMoreClick={() => {alert(0);}}
15+
>
16+
文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容
17+
</Article>
18+
</Page>
19+
);
20+
},
21+
});
22+
23+
export default ArticleExample;

0 commit comments

Comments
 (0)