-
Notifications
You must be signed in to change notification settings - Fork 0
/
union_list.html
143 lines (135 loc) · 5.16 KB
/
union_list.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, user-scalable=no" /><!--不允许用户缩放-->
<meta content="telephone=no" name="format-detection" /><!--忽略页面中的数字识别为电话号码-->
<meta content="yes" name="apple-mobile-web-app-capable" /><!--离线应用的另一个技巧-->
<meta content="black" name="apple-mobile-web-app-status-bar-style" /><!--指定的iphone中safari顶端的状态条的样式-->
<meta name="renderer" content="webkit"><!-- 启用360浏览器的极速模式(webkit) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 避免IE使用兼容模式 -->
<meta name="HandheldFriendly" content="true"><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="MobileOptimized" content="320"><!-- 微软的老式浏览器 -->
<meta name="full-screen" content="yes"><!-- UC强制全屏 -->
<meta name="x5-fullscreen" content="true"><!-- QQ强制全屏 -->
<meta name="browsermode" content="application"><!-- UC应用模式 -->
<meta name="x5-page-mode" content="app"><!-- QQ应用模式 -->
<meta name="msapplication-tap-highlight" content="no"><!-- windows phone 点击无高光 -->
<link rel="stylesheet" type="text/css" href="style/common.css"/>
<link rel="stylesheet" type="text/css" href="style/union.css"/>
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
<title>联盟列表</title>
</head>
<body class="pt">
<header class="commom_header">
<a href="javascript:history.go(-1)"><i class="fillfont icon-arrow_left"></i></a>
<h1>联盟列表</h1>
<a href="union_question.html" class="right_btn"><i class="fillfont icon-icon-question"></i>功能说明</a>
</header>
<section class="h2-sec union-folder">
<h2 onclick="folderBox(this);"><b>所属联盟</b><a class="fr rotate"><i class="linefont icon-arrowright"></i></a></h2>
<div class="unionList">
<div class="unionList-item">
<figure>
<img src="images/pic.png" alt="">
<h3>社群最新</h3>
</figure>
<p><span>主群</span></p>
</div>
</div>
</section>
<section class="h2-sec union-folder">
<h2 onclick="folderBox(this);"><b>更多联盟</b><a class="fr rotate"><i class="linefont icon-arrowright"></i></a></h2>
<div class="unionList">
<div class="search">
<a href="javascript:"><i class="fillfont icon-search"></i></a>
<input type="text" placeholder="请输入关键词">
</div>
<div class="unionList-item">
<figure onclick="openunionInfo(this);">
<img src="images/pic.png" alt="">
<h3>社群社群最新社群最新社群最新社群最新社群最新最新</h3>
</figure>
<p onclick="enterUnion(this);"><span class="btn_blue">申请加入</span></p>
</div>
<div class="unionList-item">
<figure onclick="openunionInfo(this);">
<img src="images/pic.png" alt="">
<h3>社群最新</h3>
</figure>
<p onclick="exitUnion(this);"><span class="btn_orange">退出</span></p>
</div>
<div class="unionList-item">
<figure onclick="openunionInfo(this);">
<img src="images/pic.png" alt="">
<h3>社群社群最新社群最新社群最新社群最新社群最新最新</h3>
</figure>
</div>
<p class="tc c-blue p10" id="loadMore">点击加载更多...</p>
</div>
</section>
<div class="unionInfoLayer none" id="unionInfoLayer">
<figure>
<img src="images/pic.png" alt="">
<figcaption>
<h3>社群最新</h3>
<h4>欢迎加入社群最新联盟</h4>
</figcaption>
</figure>
<ul>
<li><b>创建时间</b><span>2017-01-01</span></li>
<li><b>联盟群数</b><span>12</span></li>
<li><b>联盟人数</b><span>2017</span></li>
<li><b>入盟费</b><span>20</span></li>
</ul>
</div>
</body>
<script type="text/javascript" charset="utf-8" src="js/layer.js"></script>
<script>
//展开联盟信息
function folderBox(obj){
var _this=$(obj);
_this.find('a').toggleClass('rotate');
_this.siblings('.unionList').toggle()
}
//打开联盟详情
function openunionInfo(obj){
layer.open({
type:1,
title:'联盟详情',
content:$("#unionInfoLayer"),
id:'unionInfoLayer-wrapper'
})
}
//退出联盟
function exitUnion(obj){
layer.msg('退出成功',{icon:1,time:2000})
}
//申请加入联盟
function enterUnion(obj){
var str = '<textarea placeholder=\"请输入验证消息\" autofocus></textarea>'
layer.open({
type:1,
title:'请输入申请消息',
content:str,
scrollbar:false,
shadeClose: true, //点击遮罩关闭
btn:['申请加入'],
yes:function(index,layero){
//按钮【确定】的回调
layer.close(index);
}
})
}
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight == scrollHeight) {
// 此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
$("#loadMore").html('加载中...')
console.log(12)
}
});
</script>
</html>