Skip to content

Commit 3a698f5

Browse files
puagpuag
committed
1. add appendTo
1 parent b7b3ded commit 3a698f5

File tree

8 files changed

+131
-247
lines changed

8 files changed

+131
-247
lines changed

‎CNAME‎

Whitespace-only changes.

‎common/test.html‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
<div class="a b">111</div>
1616
<div class="a b c">222</div>
1717
<div class="a c b">333</div>
18-
18+
<div id="test2">
19+
<p>这里是p2的内容</p>
20+
</div>
1921
<script type="text/javascript" src="../js/jing.js"></script>
2022
<script type="text/javascript" src="../js/pop.js"></script>
2123
<!--<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>-->
@@ -33,11 +35,13 @@
3335
// $('.a').removeClass('b');
3436
// console.log($.browser);
3537

36-
// new $.pop();
38+
var p = new $.pop();
39+
console.log(p);
3740

38-
var test = $('#test').clone();
39-
console.log(test);
40-
$('body').append(test);
41+
// var test = $('#test').clone();
42+
// $('#test2').append(test);
43+
// var d = $('#test').appendTo('#test2');
44+
// console.log(d);
4145
// console.log(test);
4246

4347
</script>

‎index.html‎

Lines changed: 49 additions & 221 deletions
Original file line numberDiff line numberDiff line change
@@ -1,232 +1,60 @@
1-
<!DOCTYPE HTML>
1+
<!doctype html>
22
<html>
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6-
<meta name="Keywords" content="blog"/>
7-
<meta name="Description" content="blog"/>
8-
<title>Simple</title>
9-
<link rel="shortcut icon" href="/static/favicon.png"/>
10-
<link rel="stylesheet" type="text/css" href="main.css" />
5+
<title>豪情-前端作品集合</title>
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
7+
<meta name="keywords" content="豪情-前端开发"/>
8+
<meta name="description" content="豪情-前端开发"/>
9+
<link rel="stylesheet" type="text/css" href="css/common.css"/>
10+
<link rel="stylesheet" type="text/css" href="css/home.css"/>
11+
<link rel="shortcut icon" href="images/favicon.ico"/>
12+
<script type="text/javascript">
13+
if (top.location !== self.location) {
14+
top.location=self.location;
15+
}
16+
</script>
1117
</head>
1218
<body>
13-
<div class="main">
14-
<div class="header">
15-
<ul id="pages">
16-
<li>
17-
<a href="/">home</a>
18-
</li>
19-
<li>
20-
<a href="/#/tags">tags</a>
21-
</li>
22-
<li>
23-
<a href="/#/archive">archive</a>
24-
</li>
25-
</ul>
26-
</div>
27-
<div class="wrap-header">
28-
<h1>
29-
<a href="/" id="title"></a>
30-
</h1>
31-
</div>
32-
<div class="innermain" id="main">
33-
</div>
34-
<div class="footer">
35-
<p>© Copyright 2014 by isnowfy, Designed by isnowfy</p>
36-
</div>
37-
</div>
38-
<script src="main.js"></script>
39-
<script id="itemTemplate" type="text/mustache">
40-
{{#posts}}
41-
<div class="item">
42-
<div class="date">
43-
<div class="little">
44-
</div>
45-
{{date}}
19+
<div class="container">
20+
<div id="sideBar" class="sidebar">
21+
<div class="sider-title">
22+
<h1>豪情</h1>
4623
</div>
47-
<div class="title">
48-
<h2>
49-
<a href="{{path}}">{{title}}</a>
50-
</h2>
24+
<div class="sider-content">
25+
<ul id="siderList" class="sider-list">
26+
<li>
27+
<a href="#"><i class="icon-font">&#xe003;</i>常用效果</a>
28+
<ul class="sub-menu">
29+
<li><a target="iframe" href="common/pop.html"><i class="icon-font">&#xe008;</i>弹出层</a></li>
30+
<li><a target="iframe" href=""><i class="icon-font">&#xe008;</i>模拟select</a></li>
31+
<li><a target="iframe" href=""><i class="icon-font">&#xe008;</i>图片轮换</a></li>
32+
<li><a target="iframe" href=""><i class="icon-font">&#xe008;</i>日历</a></li>
33+
<li><a target="iframe" href=""><i class="icon-font">&#xe008;</i>百叶窗效果</a></li>
34+
<li><a target="iframe" href=""><i class="icon-font">&#xe008;</i>分页效果</a></li>
35+
<li><a target="iframe" href=""><i class="icon-font">&#xe008;</i>网页进度条</a></li>
36+
<li><a target="iframe" href=""><i class="icon-font">&#xe008;</i>联动下拉菜单</a></li>
37+
<li><a target="iframe" href=""><i class="icon-font">&#xe008;</i>延迟菜单</a></li>
38+
<li><a target="iframe" href=""><i class="icon-font">&#xe008;</i>多图片无缝切换</a></li>
39+
</ul>
40+
</li>
41+
<li>
42+
<a href="#"><i class="icon-font">&#xe003;</i>组件</a>
43+
<ul class="sub-menu">
44+
<li><a href="#"><i class="icon-font">&#xe008;</i>弹出层</a></li>
45+
</ul>
46+
</li>
47+
</ul>
5148
</div>
5249
</div>
53-
{{/posts}}
54-
<ul class="pages">
55-
Pages:
56-
{{#pages}}
57-
<li>
58-
{{#select}}
59-
<span class="selected">{{num}}</span>
60-
{{/select}}
61-
{{^select}}
62-
<a href="{{path}}">{{num}}</a>
63-
{{/select}}
64-
</li>
65-
{{/pages}}
66-
</ul>
67-
</script>
68-
<script id="archiveTemplate" type="text/mustache">
69-
{{#group}}
70-
{{name}}
71-
{{#posts}}
72-
<div class="archive">
73-
<span>{{date}}</span>
74-
<a href="{{path}}">{{title}}</a>
50+
<!--/siderbar-->
51+
<div class="main">
52+
<iframe id="mainIframe" name="iframe" scroll="no" src="main.html" frameborder="0"></iframe>
7553
</div>
76-
{{/posts}}
77-
{{/group}}
78-
</script>
79-
<script id="pagesTemplate" type="text/mustache">
80-
{{#pages}}
81-
<li>
82-
<a href="{{path}}">{{title}}</a>
83-
</li>
84-
{{/pages}}
85-
</script>
86-
<script id="tagsTemplate" type="text/mustache">
87-
<ul style="list-style: none">
88-
{{#tags}}
89-
<li style="display:inline; margin: 15px;">
90-
<a href="{{path}}" style="font-size: {{size}}%">{{name}}</a>
91-
</li>
92-
{{/tags}}
93-
</ul>
94-
</script>
95-
<script>
96-
$(document).ready(function() {
97-
$.ajax({
98-
url: "main.json",
99-
type: "GET",
100-
dataType: "json",
101-
success: function(data) {
102-
$("#title").html(data.name);
103-
data.posts.sort(function(a, b){
104-
if (a.date > b.date)
105-
return -1;
106-
if (a.date < b.date)
107-
return 1;
108-
return 0;
109-
});
110-
console.log(data.posts);
111-
var per = data.number_of_posts_per_page;
112-
var n = data.posts.length;
113-
var num = Math.floor((n-1)/per)+1;
114-
var arr = [];
115-
var tmp = [];
116-
for (var i = 0; i < n; ++i) {
117-
if (i != 0 && i % per == 0) {
118-
arr.push(tmp)
119-
tmp = [];
120-
}
121-
tmp.push(data.posts[i]);
122-
}
123-
if (tmp.length > 0)
124-
arr.push(tmp);
125-
var pages = [{"select": true, "num": 1, "path": "#/page/1"}];
126-
for (var i = 1; i < num; ++i)
127-
pages.push({"select": false, "num": i+1, "path": "#/page/"+(i+1)});
128-
var itemTemplate = Hogan.compile($("#itemTemplate").html());
129-
var itemHtml = itemTemplate.render({"posts": arr[0], "pages": pages});
130-
$("#main").html(itemHtml);
131-
var pagesTemplate = Hogan.compile($("#pagesTemplate").html());
132-
var pagesHtml = pagesTemplate.render({"pages": data.pages});
133-
$("#pages").append(pagesHtml);
134-
var App = Spine.Controller.sub({
135-
el: $("#main"),
136-
init: function() {
137-
this.routes({
138-
"/page/:page": function(page) {this.go(page);},
139-
"/tags": function() {this.tags();},
140-
"/tag/:tag": function(param) {this.tag(param);},
141-
"/archive": function() {this.archive();}
142-
});
143-
Spine.Route.setup();
144-
},
145-
go: function(page) {
146-
page = Math.floor(page.page);
147-
for (var i = 0; i < pages.length; ++i)
148-
pages[i].select = false;
149-
pages[page-1].select = true;
150-
var tmppages = pages;
151-
if (page > 2 && pages.length > 4)
152-
tmppages = pages.slice(page-3);
153-
if (tmppages.length > 5)
154-
tmppages = tmppages.slice(0, 5);
155-
if (pages.length > 4 && tmppages.length < 5)
156-
tmppages = pages.slice(-5);
157-
itemHtml = itemTemplate.render({"posts": arr[page-1], "pages": tmppages});
158-
$("#main").html(itemHtml);
159-
},
160-
tags: function() {
161-
var ts = {};
162-
var posts = data.posts;
163-
var tf = function() {
164-
for (var i = 0; i < posts.length; ++i) {
165-
var tmp = posts[i].tags.split(" ");
166-
for (var j = 0; j < tmp.length; ++j) {
167-
if (tmp[j].length == 0)
168-
continue;
169-
if (!(tmp[j] in ts))
170-
ts[tmp[j]] = 0;
171-
ts[tmp[j]]++;
172-
}
173-
}
174-
}
175-
tf();
176-
posts = data.pages;
177-
tf();
178-
var ans = [];
179-
for (var k in ts) {
180-
ans.push({"name": "#"+k, "size": 100+Math.sqrt(ts[k]-1)*30, "path": "#/tag/"+k});
181-
}
182-
var tagsTemplate = Hogan.compile($("#tagsTemplate").html());
183-
var tagsHtml = tagsTemplate.render({"tags": ans});
184-
$("#main").html(tagsHtml);
185-
},
186-
tag: function(param) {
187-
var tag = param.tag;
188-
var group = [{"name": "#"+tag}];
189-
var posts = [];
190-
for (var i = 0; i < data.posts.length; ++i) {
191-
var tmp = data.posts[i].tags.split(" ");
192-
if (tmp.indexOf(tag) != -1)
193-
posts.push(data.posts[i]);
194-
}
195-
for (var i = 0; i < data.pages.length; ++i) {
196-
var tmp = data.pages[i].tags.split(" ");
197-
if (tmp.indexOf(tag) != -1)
198-
posts.push(data.pages[i]);
199-
}
200-
group[0].posts = posts;
201-
var tmpTemplate = Hogan.compile($("#archiveTemplate").html());
202-
var tmpHtml = tmpTemplate.render({"group": group});
203-
$("#main").html(tmpHtml);
204-
},
205-
archive: function() {
206-
var group = [];
207-
var posts = data.posts;
208-
var now = -1;
209-
var name = "";
210-
for (var i = 0; i < posts.length; ++i) {
211-
if (name != posts[i].date.slice(0,4)) {
212-
name = posts[i].date.slice(0,4);
213-
group.push({"name": name, "posts": []});
214-
now++;
215-
}
216-
group[now].posts.push(posts[i]);
217-
}
218-
var tmpTemplate = Hogan.compile($("#archiveTemplate").html());
219-
var tmpHtml = tmpTemplate.render({"group": group});
220-
$("#main").html(tmpHtml);
221-
}
222-
});
223-
new App();
224-
},
225-
error: function(e) {
226-
console.log("init error");
227-
}
228-
});
229-
});
230-
</script>
54+
<!--/main-->
55+
</div>
56+
<!--/container-->
57+
<script type="text/javascript" src="js/libs/require.js"></script>
58+
<script type="text/javascript" src="js/init/home.init.js"></script>
23159
</body>
23260
</html>

0 commit comments

Comments
 (0)