Fixie.js sitebuildereknek – kódolj hatékonyabban!

Találtam ma egy nagyon hasznos JS-t (fixie.js), amely arra hivatott, hogy a sitebuilderek életét kicsit megkönnyítse. Méghozzá azáltal, hogy a fixie.js használatával nem kell az egyes HTML elemekhez mintatartalmat adni, megteszi helyettünk ezt ez a kis javascript.

fixie.js használata sitebuildereknek a hatékonyabb kódolás érdekében

Miért éri meg a fixie.js-t használni?

  • Nem a mintatartalmat kell beszerkeszteni a HTML kódba
  • Nem kell a fejlesztés végén kivenni
  • Fejlesztés közben sokkal átláthatóbb marad a HTML szerkezet
  • Mindezek által időt spórolsz meg.

Próbaképpen, hogy vackot ne ajánljak Nektek, kipróbáltam én is nagyon gyorsan egy kódon (a kód minőségét most ne figyeljétek), hogy mégis mennyire hatékony ezzel a munka. Jelentem tényleg nagyon kényelmes így dolgozni. :) Nagy könnyebbség, hogy nem kell a dummy text részekkel foglalkozni.

A használata

Nagyon egyszerű, 2 lépésre kell csak figyelni:

A /body elé tegyétek be a scriptet:

1

<script type="text/javascript" src="https://raw.github.com/rthprog/fixie/master/fixie_min.js"></script>

Ahhoz a HTML elemhez, melybe tartalmat akartok generálni, adjátok hozzá a class=”fixie” -t

Mintakód a használatára

Én is írtam pár perc alatt egy kódot, hogy megnézzem hogy működik, ennek a forrását alább, az eredményét pedig itt lehet megtekinteni: fixie.js demo

Az eredeti minta is megtekinthető itt: sample.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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

<!DOCTYPE html>
<html dir="ltr" lang="hu-HU">
<head>
<meta charset="UTF-8" />
<title>fixie.js demo</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css" media="screen">
	#wrapper {width:900px;margin:10px auto;}
	#header {border-bottom:2px solid black;}
	#header img {width:300px;height:100px;}
	#header ul {padding-left:0px}
	#header ul li {float:left;list-style-type:none;margin-right:20px;}
	#col-left {width:600px;float:left}
	#col-right {width:270px;float:right}
	.clear {clear:both;}
	img {width:600px;height:300px;}
	.box img {width:75px;height:75px;float:left;margin:0px 20px 10px 0px;}
	#author {border-top:1px dotted grey}
	#author img {width:100px;height:100px;float:left;margin:0px 20px 0px 0px;}
	#footer {border-top:2px solid black;margin-top:20px}
</style>
</head>
<body>
<div id="wrapper" class="fixie">
	<div id="header">
		<img />
		<ul>
			<li><a href="" title=""></a></li>
			<li><a href="" title=""></a></li>
			<li><a href="" title=""></a></li>
			<li><a href="" title=""></a></li>
		</ul>
		<div class="clear">&nbsp;</div>
	</div>
	<div id="content" class="clear">
		<div id="col-left">
			<h1></h1>
			<div id="infos">
			</div>
			<div id="lead">				
			</div>
			<div id="article">
				<p></p>
				<p></p>
				<h2></h2>
				<p></p>
				<ul>
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<p></p>
				<h2></h2>
				<p></p>
				<h3></h3>
				<p></p>
				<h3></h3>
				<p></p>
				<h3></h3>
				<p></p>
				<p></p>
			</div>
			<div id="author">
				<h4>About the author</h4>
				<img />
				<p></p>
				<p></p>
			</div>
		</div>
		<div id="col-right">
			<div class="box">
				<h4></h4>
				<img />
				<p></p>
			</div>
			<div class="box clear">
				<h4></h4>
				<p></p>
			</div>
			<div class="box clear">
				<h4></h4>
				<p></p>
			</div>
			<div class="box clear">
				<h4></h4>
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div id="footer">
		<p></p>
	</div>
</div>
<script type="text/javascript" src="https://raw.github.com/rthprog/fixie/master/fixie_min.js"></script>
</body>
</html>

A használatához annyit hozzáfűznék, hogy a /body elé kell tenni, ne a head-be pakoljátok, úgy nem fog működni.

Ha bármi miatt az idők folyamán megszűnne a raw.github.com-os elérés, akkor ide is feltettem, hogy le tudjátok tölteni: https-__raw.github.com_rthprog_fixie_master_fixie_min.js

A fixie.js honlap elérhetősége: http://fixiejs.com

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

4 HOZZÁSZÓLÁS

  2. … és megnyitod a HTML-t a böngészőben. :) Ha 2 dologra figyeltél (js-t a /body elé és class=”fixie”-t hozzáadtad az elemhez), akkor működnie kell. Ha nem, dobd fel vhova a kódot és megnézem.

  4. A tartalom random generálódik vagy én mondom meg, hogy listát vagy bekezdést vagy képet stb. -t akarok?

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét