Skip to content

Commit ddc6f4f

Browse files
author
ShiHao
committed
加入chart-flot库
1 parent c2fd75a commit ddc6f4f

File tree

6 files changed

+167
-8
lines changed

6 files changed

+167
-8
lines changed

‎bootstrap.csproj

+4-3
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,8 @@
180180
<Content Include="js\bootstrap\html5shiv.min.js" />
181181
<Content Include="js\bootstrap\respond.min.js" />
182182
<Content Include="js\jquery.animo\animo.min.js" />
183+
<Content Include="js\jquery.flot\jquery.flot.min.js" />
184+
<Content Include="js\jquery.fotorama\fotorama.js" />
183185
<Content Include="js\jquery.fullpage\jquery.fullPage.min.js" />
184186
<Content Include="js\jquery.hammer\hammer.min.js" />
185187
<Content Include="js\jquery.hammer\jquery.hammer.js" />
@@ -204,6 +206,7 @@
204206
<Content Include="sample\carousel\fullpage.html" />
205207
<Content Include="sample\carousel\owlcarousel.html" />
206208
<Content Include="sample\carousel\owlcarousel2.html" />
209+
<Content Include="sample\chart\flot.html" />
207210
<Content Include="sample\iframe\child.html" />
208211
<Content Include="sample\iframe\parent.html" />
209212
<Content Include="sample\pace.html" />
@@ -253,9 +256,7 @@
253256
<Content Include="video\ocean.ogv" />
254257
<Content Include="video\ocean.webm" />
255258
</ItemGroup>
256-
<ItemGroup>
257-
<Folder Include="js\jquery.fotorama\" />
258-
</ItemGroup>
259+
<ItemGroup />
259260
<PropertyGroup>
260261
<VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
261262
<VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>

‎chart.html

+41
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,47 @@
9090
<li class="active">Chart库</li>
9191
</ul>
9292
<div class="col-sm-12">
93+
<!--flot start-->
94+
<div class="row" id="chart-flot">
95+
<div class="page-header text-center">
96+
<h2>图表1</h2>
97+
</div>
98+
<div class="col-sm-6">
99+
<div class="form-group">
100+
<label for="inputEmail3" class="col-sm-2 control-label">插件名</label>
101+
<div class="col-sm-10">
102+
<p class="form-control-static">
103+
Flot
104+
</p>
105+
</div>
106+
</div>
107+
</div>
108+
<div class="col-sm-6">
109+
<div class="form-group">
110+
<label for="inputEmail3" class="col-sm-2 control-label">官网</label>
111+
<div class="col-sm-10">
112+
<a href="http://www.flotcharts.org/" class="btn btn-info" target="_blank">http://www.flotcharts.org/</a>
113+
</div>
114+
</div>
115+
</div>
116+
<div class="col-sm-12">
117+
<div class="form-group">
118+
<label for="inputEmail3" class="col-sm-1 control-label">特殊说明</label>
119+
<div class="col-sm-11">
120+
<p class="form-control-static">该特效依赖jquery库</p>
121+
</div>
122+
</div>
123+
</div>
124+
<div class="col-sm-6">
125+
<div class="form-group">
126+
<label for="inputEmail3" class="col-sm-2 control-label">使用效果</label>
127+
<div class="col-sm-10">
128+
<a class="btn btn-primary" href="sample/chart/flot.html" target="_blank">预览</a>
129+
</div>
130+
</div>
131+
</div>
132+
</div>
133+
<!--flot end-->
93134
</div>
94135
<!--我是主要内容 end-->
95136
</div>

‎css/jquery.superslides/superslides.css

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
#slides {
2+
position: relative;
3+
}
4+
#slides .slides-container {
5+
display: none;
6+
}
7+
#slides .scrollable {
8+
*zoom: 1;
9+
position: relative;
10+
top: 0;
11+
left: 0;
12+
overflow-y: auto;
13+
-webkit-overflow-scrolling: touch;
14+
height: 100%;
15+
}
16+
#slides .scrollable:after {
17+
content: "";
18+
display: table;
19+
clear: both;
20+
}
21+
22+
.slides-navigation {
23+
margin: 0 auto;
24+
position: absolute;
25+
z-index: 3;
26+
top: 46%;
27+
width: 100%;
28+
}
29+
.slides-navigation a {
30+
position: absolute;
31+
display: block;
32+
}
33+
.slides-navigation a.prev {
34+
left: 0;
35+
}
36+
.slides-navigation a.next {
37+
right: 0;
38+
}
39+
40+
.slides-pagination {
41+
position: absolute;
42+
z-index: 3;
43+
bottom: 0;
44+
text-align: center;
45+
width: 100%;
46+
}
47+
.slides-pagination a {
48+
border: 2px solid #222;
49+
border-radius: 15px;
50+
width: 10px;
51+
height: 10px;
52+
display: -moz-inline-stack;
53+
display: inline-block;
54+
vertical-align: middle;
55+
*vertical-align: auto;
56+
zoom: 1;
57+
*display: inline;
58+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=");
59+
margin: 2px;
60+
overflow: hidden;
61+
text-indent: -100%;
62+
}
63+
.slides-pagination a.current {
64+
background: #222;
65+
}

‎index.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -200,10 +200,6 @@ <h1>这是一套开源的基于bootstrap的简易框架</h1>
200200
<span class="badge">Carousel库&nbsp;2016.9.10</span>
201201
<a href="carousel.html?#carousel-fotorama">加入jquery-fotorama图片滚动库</a>
202202
</li>
203-
<li class="list-group-item">
204-
<span class="badge">Carousel库&nbsp;2016.9.10</span>
205-
<a href="carousel.html?#carousel-superslides">加入jquery-superslides图片滚动库</a>
206-
</li>
207203
<li class="list-group-item">
208204
<span class="badge">Carousel库&nbsp;2016.9.10</span>
209205
<a href="carousel.html?#carousel-owlcarousel2">加入jquery-owlcarousel2图片滚动库</a>
@@ -218,7 +214,11 @@ <h1>这是一套开源的基于bootstrap的简易框架</h1>
218214
</li>
219215
<li class="list-group-item">
220216
<span class="badge">UI库&nbsp;2016.9.10</span>
221-
<a href="ui.html?#ui-mmenu">加入jquery-mmenu库</a>
217+
<a href="ui.html?#ui-mmenu">加入jquery-mmenu Demo</a>
218+
</li>
219+
<li class="list-group-item">
220+
<span class="badge">Chart库&nbsp;2016.9.10</span>
221+
<a href="chart.html?chart-flot">加入jquery-flot库</a>
222222
</li>
223223
</ul>
224224
<ul class="list-group">

‎js/jquery.flot/jquery.flot.min.js

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sample/chart/flot.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link rel="icon" href="../../favicon.ico" />
8+
<script src="../../js/jquery.min.js"></script>
9+
<script src="../../js/jquery.flot/jquery.flot.min.js"></script>
10+
<style>
11+
.demo-container { box-sizing: border-box; width: 850px; height: 450px; padding: 20px 15px 15px 15px; margin: 15px auto 30px auto; border: 1px solid #ddd; background: #fff; background: linear-gradient(#f6f6f6 0, #fff 50px); background: -o-linear-gradient(#f6f6f6 0, #fff 50px); background: -ms-linear-gradient(#f6f6f6 0, #fff 50px); background: -moz-linear-gradient(#f6f6f6 0, #fff 50px); background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px); box-shadow: 0 3px 10px rgba(0,0,0,0.15); -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1); -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1); -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1); -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
12+
13+
.demo-placeholder { width: 100%; height: 100%; font-size: 14px; line-height: 1.2em; }
14+
</style>
15+
<script type="text/javascript">
16+
17+
$(function () {
18+
19+
var d1 = [];
20+
for (var i = 0; i < 14; i += 0.5) {
21+
d1.push([i, Math.sin(i)]);
22+
}
23+
24+
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
25+
26+
// A null signifies separate line segments
27+
28+
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
29+
30+
$.plot("#placeholder", [d1, d2, d3]);
31+
32+
});
33+
34+
</script>
35+
</head>
36+
<body>
37+
38+
<div class="demo-container">
39+
<div id="placeholder" class="demo-placeholder"></div>
40+
</div>
41+
42+
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)