Skip to content

Commit de067e3

Browse files
author
zhuxun.jb
committed
更新栅格渲染工具
1 parent 80d1ff1 commit de067e3

File tree

2 files changed

+252
-3
lines changed

2 files changed

+252
-3
lines changed

‎assets/makeGrid.less

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@
99
* @grid-name:grid; 一般为[grid/grid-thin/grid-fat] grid命名 可选视觉规范上的三种
1010
*/
1111

12-
.makeGrid(@grid-column-width, @grid-gutter-width, @grid-offset, @grid-name:grid) {
13-
@grid-columns: 12;
14-
12+
.makeGrid(@grid-column-width, @grid-gutter-width, @grid-offset, @grid-name:grid, @grid-columns:12) {
1513
.@{grid-name} {
1614
box-sizing:content-box;
1715
padding-left: @grid-offset;

‎tool.html

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta content="yes" name="apple-mobile-web-app-capable" />
6+
<meta content="yes" name="apple-touch-fullscreen" />
7+
<meta content="telephone=no,email=no" name="format-detection" />
8+
<link href="build/flexible.debug.css" rel="styleSheet" type="text/css"/>
9+
<script src="build/flexible.debug.js"></script>
10+
<script src="http://g.tbcdn.cn/mtb/lib-3rd/less/less.js"></script>
11+
<title>手机淘宝栅格系统</title>
12+
<style type="text/css">
13+
html {
14+
width: 100%;
15+
}
16+
17+
.grid > div,.grid-thin > div,.grid-fat > div {
18+
margin-bottom: 0.3rem;
19+
text-align: center;
20+
color: #fff;
21+
}
22+
23+
div[class^="col-"] > div {
24+
margin-top: 0.04rem;
25+
}
26+
27+
.grid>div {
28+
background-color: rgba(242,234,255,0.8);
29+
background-color: rgba(96,125,255,0.85);
30+
}
31+
.grid-thin>div {
32+
background-color: rgba(241,149,36,0.85);
33+
}
34+
.grid-fat>div {
35+
background-color: rgba(228,80,66,0.85);
36+
outline: 1px dashed #333;
37+
}
38+
.grid-fat-wrap .bg>div {
39+
outline: 1px solid #fff;
40+
}
41+
.grid-thin-wrap, .grid-wrap, .grid-fat-wrap {
42+
position: relative;
43+
background-color: rgba(241,149,36, 0.2);
44+
background-color: rgba(0,0,0, 0.05);
45+
padding-top: 0.4rem;
46+
}
47+
48+
.grid-thin-wrap .bg,.grid-wrap .bg,.grid-fat-wrap .bg {
49+
position: absolute;
50+
z-index: -1;
51+
top: 0;
52+
}
53+
54+
.grid-thin-wrap .bg > div[class^="col-"],
55+
.grid-wrap .bg > div[class^="col-"],
56+
.grid-fat-wrap .bg > div[class^="col-"]{
57+
height: 14.7rem;
58+
}
59+
60+
.grid-thin-wrap .bg>div,
61+
.grid-wrap .bg>div,
62+
.grid-fat-wrap .bg>div{
63+
background-color: rgba(0,0,0, 0.15);
64+
}
65+
66+
.global button{
67+
width: 3.2rem;
68+
padding: 0.1rem 0;
69+
margin: 0.1rem;
70+
font-size: inherit;
71+
}
72+
73+
.grid-config {
74+
margin-bottom: 0.2rem;
75+
}
76+
77+
.grid-config label{
78+
display: inline-block;
79+
padding: 0.4rem 0;
80+
width: 5rem;
81+
text-align: right;
82+
font-size: inherit;
83+
}
84+
85+
.grid-config input {
86+
display: inline-block;
87+
font-size: inherit;
88+
}
89+
90+
.grid-config button {
91+
display: block;
92+
width: 2rem;
93+
padding: 0.1rem;
94+
font-size: inherit;
95+
margin: auto;
96+
}
97+
98+
[data-dpr="1"] .grid-config, [data-dpr="1"] .global{
99+
font-size: 12px;
100+
}
101+
[data-dpr="2"] .grid-config, [data-dpr="2"] .global{
102+
font-size: 24px;
103+
}
104+
[data-dpr="3"] .grid-config, [data-dpr="3"] .global{
105+
font-size: 36px;
106+
}
107+
</style>
108+
</head>
109+
<body>
110+
<div class="global">
111+
<button data-json="{width:750,unita:6,amount:12,column:7,slot:3,padding:4}">750/12列方案</button>
112+
<button data-json="{width:750,unita:6,amount:6,column:17,slot:3,padding:4}">750/6列方案</button>
113+
<button data-json="{width:640,unita:4,amount:12,column:9,slot:4,padding:4}">640/12列方案</button>
114+
<button data-json="{width:640,unita:4,amount:6,column:22,slot:4,padding:4}">640/6列方案</button>
115+
</div>
116+
<div class="grid-config">
117+
<div><label>设计稿宽度（单位为：px）</label><input name="width" value="750"></div>
118+
<div><label>最小单位（单位为：px）</label><input name="unita" value="6"></div>
119+
<div><label>列数（单位为：列）</label><input name="amount" value="12"></div>
120+
<div><label>列宽（单位为：a）</label><input name="column" value="7"></div>
121+
<div><label>列间距（单位为：a）</label><input name="slot" value="3"></div>
122+
<div><label>边距（单位为：a）</label><input name="padding" value="4"></div>
123+
<div><button id="render">渲染</button></div>
124+
</div>
125+
<div class="grid-wrap"></div>
126+
<script type="text/template" id="grid-html">
127+
<div class="grid">
128+
<div class="col-2"><div class="info"></div><div class="a"></div></div>
129+
<div class="col-2"><div class="info"></div><div class="a"></div></div>
130+
<div class="col-2"><div class="info"></div><div class="a"></div></div>
131+
<div class="col-2"><div class="info"></div><div class="a"></div></div>
132+
<div class="col-2"><div class="info"></div><div class="a"></div></div>
133+
<div class="col-2"><div class="info"></div><div class="a"></div></div>
134+
</div>
135+
<div class="grid">
136+
<div class="col-3"><div class="info"></div><div class="a"></div></div>
137+
<div class="col-3"><div class="info"></div><div class="a"></div></div>
138+
<div class="col-3"><div class="info"></div><div class="a"></div></div>
139+
<div class="col-3"><div class="info"></div><div class="a"></div></div>
140+
</div>
141+
142+
<div class="grid">
143+
<div class="col-4"><div class="info"></div><div class="a"></div></div>
144+
<div class="col-4"><div class="info"></div><div class="a"></div></div>
145+
<div class="col-4"><div class="info"></div><div class="a"></div></div>
146+
</div>
147+
148+
<div class="grid">
149+
<div class="col-6"><div class="info"></div><div class="a"></div></div>
150+
<div class="col-6"><div class="info"></div><div class="a"></div></div>
151+
</div>
152+
153+
<div class="grid">
154+
<div class="col-12"><div class="info"></div><div class="a"></div></div>
155+
</div>
156+
157+
<div class="grid">
158+
<div class="col-11"><div class="info"></div><div class="a"></div></div>
159+
<div class="col-1"><div class="info"></div><div class="a"></div></div>
160+
</div>
161+
162+
<div class="grid">
163+
<div class="col-10"><div class="info"></div><div class="a"></div></div>
164+
<div class="col-2"><div class="info"></div><div class="a"></div></div>
165+
</div>
166+
167+
<div class="grid">
168+
<div class="col-5"><div class="info"></div><div class="a"></div></div>
169+
<div class="col-5"><div class="info"></div><div class="a"></div></div>
170+
<div class="col-2"><div class="info"></div><div class="a"></div></div>
171+
</div>
172+
<div class="grid">
173+
<div class="col-9"><div class="info"></div><div class="a"></div></div>
174+
<div class="col-3"><div class="info"></div><div class="a"></div></div>
175+
</div>
176+
<div class="grid">
177+
<div class="col-8"><div class="info"></div><div class="a"></div></div>
178+
<div class="col-4"><div class="info"></div><div class="a"></div></div>
179+
</div>
180+
<div class="grid">
181+
<div class="col-7"><div class="info"></div><div class="a"></div></div>
182+
<div class="col-5"><div class="info"></div><div class="a"></div></div>
183+
</div>
184+
<div class="grid bg">
185+
<div class="col-1"></div>
186+
<div class="col-1"></div>
187+
<div class="col-1"></div>
188+
<div class="col-1"></div>
189+
<div class="col-1"></div>
190+
<div class="col-1"></div>
191+
<div class="col-1"></div>
192+
<div class="col-1"></div>
193+
<div class="col-1"></div>
194+
<div class="col-1"></div>
195+
<div class="col-1"></div>
196+
<div class="col-1"></div>
197+
</div>
198+
</script>
199+
<script>
200+
document.querySelector('.global').addEventListener('click', function(e) {
201+
var target = e.target;
202+
if (target.tagName.toUpperCase() === 'BUTTON') {
203+
var json = eval('(' + target.getAttribute('data-json') + ')');
204+
for (var key in json) {
205+
document.querySelector('.grid-config input[name="' + key+ '"]').value = json[key];
206+
}
207+
}
208+
});
209+
210+
document.querySelector('#render').addEventListener('click', function() {
211+
var dpr = parseFloat(document.documentElement.getAttribute('data-dpr'));
212+
var fontSize = parseFloat(document.documentElement.style.fontSize);
213+
214+
var width = parseFloat(document.querySelector('.grid-config input[name="width"]').value);
215+
var unita = parseFloat(document.querySelector('.grid-config input[name="unita"]').value);
216+
var amount = parseFloat(document.querySelector('.grid-config input[name="amount"]').value);
217+
var column = parseFloat(document.querySelector('.grid-config input[name="column"]').value);
218+
var slot = parseFloat(document.querySelector('.grid-config input[name="slot"]').value);
219+
var padding = parseFloat(document.querySelector('.grid-config input[name="padding"]').value);
220+
221+
var ratio = unita / width * 10;
222+
223+
less.render('@import "assets/makeGrid.less";.makeGrid(' + (column * ratio) + 'rem, ' + (slot * ratio) + 'rem, ' + (padding * ratio) + 'rem, grid, ' + amount + ');', function() {
224+
225+
var style = document.createElement('style');
226+
style.innerHTML = arguments[1].css;
227+
document.querySelector('head').appendChild(style);
228+
229+
var html = document.querySelector('#grid-html').innerHTML;
230+
document.querySelector('.grid-wrap').innerHTML = html;
231+
232+
for (var i = 1; i <= amount; i++) {
233+
(function(j) {
234+
Array.prototype.slice.call(document.querySelectorAll('.grid .col-' + j)).forEach(function(el) {
235+
var info = el.querySelector('.info');
236+
var a = el.querySelector('.a');
237+
if (info) {
238+
info.innerHTML = 'c' + j;
239+
}
240+
if (a) {
241+
a.innerHTML = (column * j + slot * (j - 1)) + 'a';
242+
}
243+
});
244+
})(i);
245+
}
246+
});
247+
}, false);
248+
</script>
249+
</body>
250+
</html>
251+

0 commit comments

Comments
 (0)