蓝色欧美风格的管理面板源码下载



16 61 21



模板描述:蓝色欧美风格 管理面板 源码下载,蓝色欧美风格的管理面板源码下载html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href="css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.useso.com/css?family=Roboto:700,500,300,100italic,100,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/icon-font.min.css" type='text/css' />
<link href="css/barChart.css" rel='stylesheet' type='text/css' />
<link href="css/fabochart.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/vroom.css">

2. 引入JS

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/amcharts.js"></script>
<script src="js/serial.js"></script>
<script src="js/light.js"></script>
<script src="js/radar.js"></script>
<script src="js/css3clock.js"></script>
<script src="js/skycons.js"></script>
<script src="js/jquery.easydropdown.js"></script>
<script type="text/javascript" src="js/protovis-d3.2.js"></script>
<script type="text/javascript" src="js/vix.js"></script>
<script src="js/fabochart.js"></script>
<script src="js/Chart.js"></script>
<script type="text/javascript" src="js/vroom.js"></script>
<script type="text/javascript" src="js/TweenLite.min.js"></script>
<script type="text/javascript" src="js/CSSPlugin.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<script src="js/bootstrap.min.js"></script>

3. HTML代码

   <div class="page-container">
   <!--/content-inner-->
	<div class="left-content">
	   <div class="inner-content">
		<!-- header-starts -->
			<div class="header-section">
						<!--menu-right-->
						<div class="top_menu">
						        <div class="main-search">
											<form>
											   <input type="text" value="Search" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Search';}" class="text"/>
												<input type="submit" value="">
											</form>
									<div class="close"><img src="images/cross.png" /></div>
								</div>
									<div class="srch"><button></button></div>
									<script type="text/javascript">
										 $('.main-search').hide();
										$('button').click(function (){
											$('.main-search').show();
											$('.main-search text').focus();
										}
										);
										$('.close').click(function(){
											$('.main-search').hide();
										});
									</script>
							<!--/profile_details-->
								<div class="profile_details_left">
									<ul class="nofitications-dropdown">
											<li class="dropdown note dra-down">
													   <div id="dd" class="wrapper-dropdown-3" tabindex="1">
																			<span>Italy</span>
																			<ul class="dropdown">
																				<li><a class="deutsch">France</a></li>
																				<li><a class="english"> Italy</a></li>
																				<li><a class="espana">Brazil</a></li>
																				<li><a class="russian">Usa</a></li>
																			</ul>
																		</div>
																		<script type="text/javascript">
																	function DropDown(el) {
																		this.dd = el;
																		this.placeholder = this.dd.children('span');
																		this.opts = this.dd.find('ul.dropdown > li');
																		this.val = '';
																		this.index = -1;
																		this.initEvents();
																	}
																	DropDown.prototype = {
																		initEvents : function() {
																			var obj = this;
																			obj.dd.on('click', function(event){
																				$(this).toggleClass('active');
																				return false;
																			});
																			obj.opts.on('click',function(){
																				var opt = $(this);
																				obj.val = opt.text();
																				obj.index = opt.index();
																				obj.placeholder.text(obj.val);
																			});
																		},
																		getValue : function() {
																			return this.val;
																		},
																		getIndex : function() {
																			return this.index;
																		}
																	}
																	$(function() {
																		var dd = new DropDown( $('#dd') );
																		$(document).click(function() {
																			// all dropdowns
																			$('.wrapper-dropdown-3').removeClass('active');
																		});
																	});
																</script>
										    </li>
									       <li class="dropdown note">
											<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope-o"></i> <span class="badge">3</span></a>
													<ul class="dropdown-menu two first">
														<li>
															<div class="notification_header">
																<h3>You have 3 new messages  </h3> 
															</div>
														</li>
														<li><a href="#">
														   <div class="user_img"><img src="images/1.jpg" alt=""></div>
														   <div class="notification_desc">
															<p>Lorem ipsum dolor sit amet</p>
															<p><span>1 hour ago</span></p>
															</div>
														   <div class="clearfix"></div>	
														 </a></li>
														 <li class="odd"><a href="#">
															<div class="user_img"><img src="images/in.jpg" alt=""></div>
														   <div class="notification_desc">
															<p>Lorem ipsum dolor sit amet </p>
															<p><span>1 hour ago</span></p>
															</div>
														  <div class="clearfix"></div>	
														 </a></li>
														<li><a href="#">
														   <div class="user_img"><img src="images/in1.jpg" alt=""></div>
														   <div class="notification_desc">
															<p>Lorem ipsum dolor sit amet </p>
															<p><span>1 hour ago</span></p>
															</div>
														   <div class="clearfix"></div>	
														</a></li>
														<li>
															<div class="notification_bottom">
																<a href="#">See all messages</a>
															</div> 
														</li>
													</ul>
										</li>
							<li class="dropdown note">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell-o"></i> <span class="badge">5</span></a>
									<ul class="dropdown-menu two">
										<li>
											<div class="notification_header">
												<h3>You have 5 new notification</h3>
											</div>
										</li>
										<li><a href="#">
											<div class="user_img"><img src="images/in.jpg" alt=""></div>
										   <div class="notification_desc">
											<p>Lorem ipsum dolor sit amet</p>
											<p><span>1 hour ago</span></p>
											</div>
										  <div class="clearfix"></div>	
										 </a></li>
										 <li class="odd"><a href="#">
											<div class="user_img"><img src="images/in5.jpg" alt=""></div>
										   <div class="notification_desc">
											<p>Lorem ipsum dolor sit amet </p>
											<p><span>1 hour ago</span></p>
											</div>
										   <div class="clearfix"></div>	
										 </a></li>
										 <li><a href="#">
											<div class="user_img"><img src="images/in8.jpg" alt=""></div>
										   <div class="notification_desc">
											<p>Lorem ipsum dolor sit amet </p>
											<p><span>1 hour ago</span></p>
											</div>
										   <div class="clearfix"></div>	
										 </a></li>
										 <li>
											<div class="notification_bottom">
												<a href="#">See all notification</a>
											</div> 
										</li>
									</ul>
							</li>	
						<li class="dropdown note">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i> <span class="badge blue1">9</span></a>
										<ul class="dropdown-menu two">
										<li>
											<div class="notification_header">
												<h3>You have 9 pending task</h3>
											</div>
										</li>
										<li><a href="#">
												<div class="task-info">
												<span class="task-desc">Database update</span><span class="percentage">40%</span>
												<div class="clearfix"></div>	
											   </div>
												<div class="progress progress-striped active">
												 <div class="bar yellow" style="width:40%;"></div>
											</div>
										</a></li>
										<li><a href="#">
											<div class="task-info">
												<span class="task-desc">Dashboard done</span><span class="percentage">90%</span>
											   <div class="clearfix"></div>	
											</div>
											<div class="progress progress-striped active">
												 <div class="bar green" style="width:90%;"></div>
											</div>
										</a></li>
										<li><a href="#">
											<div class="task-info">
												<span class="task-desc">Mobile App</span><span class="percentage">33%</span>
												<div class="clearfix"></div>	
											</div>
										   <div class="progress progress-striped active">
												 <div class="bar red" style="width: 33%;"></div>
											</div>
										</a></li>
										<li><a href="#">
											<div class="task-info">
												<span class="task-desc">Issues fixed</span><span class="percentage">80%</span>
											   <div class="clearfix"></div>	
											</div>
											<div class="progress progress-striped active">
												 <div class="bar  blue" style="width: 80%;"></div>
											</div>
										</a></li>
										<li>
											<div class="notification_bottom">
												<a href="#">See all pending task</a>
											</div> 
										</li>
									</ul>
							</li>		   							   		
							<div class="clearfix"></div>	
								</ul>
							</div>
							<div class="clearfix"></div>	
							<!--//profile_details-->
						</div>
						<!--//menu-right-->
					<div class="clearfix"></div>
				</div>
					<!-- //header-ends -->
						<div class="outter-wp">
								<!--custom-widgets-->
												<div class="custom-widgets">
												   <div class="row-one">
														<div class="col-md-3 widget">
															<div class="stats-left ">
																<h5>Today</h5>
																<h4> Users</h4>
															</div>
															<div class="stats-right">
																<label>90</label>
															</div>
															<div class="clearfix"> </div>	
														</div>
														<div class="col-md-3 widget states-mdl">
															<div class="stats-left">
																<h5>Today</h5>
																<h4>Visitors</h4>
															</div>
															<div class="stats-right">
																<label> 85</label>
															</div>
															<div class="clearfix"> </div>	
														</div>
														<div class="col-md-3 widget states-thrd">
															<div class="stats-left">
																<h5>Today</h5>
																<h4>Tasks</h4>
															</div>
															<div class="stats-right">
																<label>51</label>
															</div>
															<div class="clearfix"> </div>	
														</div>
														<div class="col-md-3 widget states-last">
															<div class="stats-left">
																<h5>Today</h5>
																<h4>Alerts</h4>
															</div>
															<div class="stats-right">
																<label>30</label>
															</div>
															<div class="clearfix"> </div>	
														</div>
														<div class="clearfix"> </div>	
													</div>
												</div>
												<!--//custom-widgets-->
												<!--/candile-->
													<div class="candile"> 
															<div class="candile-inner">
																	<h3 class="sub-tittle">Candlestick Chart </h3>
															    <div id="center"><div id="fig">
																<script type="text/javascript+protovis">
															/* Parse dates. */
															var dateFormat = pv.Format.date("%d-%b-%y");
															vix.forEach(function(d) d.date = dateFormat.parse(d.date));
															/* Scales. */
															var w =1220,
																h = 300,
																x = pv.Scale.linear(vix, function(d) d.date).range(0, w),
																y = pv.Scale.linear(vix, function(d) d.low, function(d) d.high).range(0, h).nice();
															var vis = new pv.Panel()
																.width(w)
																.height(h)
																.margin(10)
																.left(30);
															/* Dates. */
															vis.add(pv.Rule)
																 .data(x.ticks())
																 .left(x)
																 .strokeStyle("#eee")
															   .anchor("bottom").add(pv.Label)
																 .text(x.tickFormat);
															/* Prices. */
															vis.add(pv.Rule)
																 .data(y.ticks(7))
																 .bottom(y)
																 .left(-10)
																 .right(-10)
																 .strokeStyle(function(d) d % 10 ? "#ddd" : "#ddd")
															   .anchor("left").add(pv.Label)
																 .textStyle(function(d) d % 10 ? "#999" : "#ddd")
																 .text(y.tickFormat);
															/* Candlestick. */
															vis.add(pv.Rule)
																.data(vix)
																.left(function(d) x(d.date))
																.bottom(function(d) y(Math.min(d.high, d.low)))
																.height(function(d) Math.abs(y(d.high) - y(d.low)))
																.strokeStyle(function(d) d.open < d.close ? "#052963" : "#00C6D7")
															  .add(pv.Rule)
																.bottom(function(d) y(Math.min(d.open, d.close)))
																.height(function(d) Math.abs(y(d.open) - y(d.close)))
																.lineWidth(10);
															vis.render();
																</script>
															</div>
														</div>
															</div>
														</div>
													<!--/candile-->
												<!--/charts-->
												<div class="charts">
												  <div class="chrt-inner">
												    <div class="chrt-bars">
														<div class="col-md-6 chrt-two">
														 <h3 class="sub-tittle">Bar Chart </h3>
															<div id="chart2"></div>
															<script>
															$(document).ready(function () {
																data = {
																  '2010' : 300, 
																  '2011' : 200,
																  '2012' : 100,
																  '2013' : 500,
																  '2014' : 400,
																  '2015' : 200
																};
																$("#chart1").faBoChart({
																  time: 500,
																  animate: true,
																  instantAnimate: true,
																  straight: false,
																  data: data,
																  labelTextColor : "#002561",
																});
																$("#chart2").faBoChart({
																  time: 2500,
																  animate: true,
																  data: data,
																  straight: true,
																  labelTextColor : "#002561",
																});
															});
															</script>
														</div>
															<div class="col-md-6 chrt-three">
															<h3 class="sub-tittle">Error Chart </h3>
																<div id="chartdiv"></div>	
																			<script>
																			   var chart = AmCharts.makeChart( "chartdiv", {
																					  "type": "serial",
																					  "theme": "light",
																					  "dataProvider": [ {
																						"year": 2005,
																						"value": 11.5,
																						"error": 5
																					  }, {
																						"year": 2006,
																						"value": 26.2,
																						"error": 5
																					  }, {
																						"year": 2007,
																						"value": 30.1,
																						"error": 5
																					  }, {
																						"year": 2008,
																						"value": 29.5,
																						"error": 7
																					  }, {
																						"year": 2009,
																						"value": 24.6,
																						"error": 10
																					  } ],
																					  "balloon": {
																						"textAlign": "left"
																					  },
																					  "valueAxes": [ {
																						"id": "v1",
																						"axisAlpha": 0
																					  } ],
																					  "startDuration": 1,
																					  "graphs": [ {
																						"balloonText": "value:<b>[[value]]</b><br>error:<b>[[error]]</b>",
																						"bullet": "yError",
																						"bulletSize": 10,
																						"errorField": "error",
																						"lineThickness": 2,
																						"valueField": "value",
																						"bulletAxis": "v1",
																						"fillAlphas": 0
																					  }, {
																						"bullet": "round",
																						"bulletBorderAlpha": 1,
																						"bulletBorderColor": "#FFFFFF",
																						"lineAlpha": 0,
																						"lineThickness": 2,
																						"showBalloon": false,
																						"valueField": "value"
																					  } ],
																					  "chartCursor": {
																						"cursorAlpha": 0,
																						"cursorPosition": "mouse",
																						"graphBulletSize": 1,
																						"zoomable": false
																					  },
																					  "categoryField": "year",
																					  "categoryAxis": {
																						"gridPosition": "start",
																						"axisAlpha": 0
																					  },
																					  "export": {
																						"enabled": true
																					  }
																					} );
																			</script>
																</div>
																<div class="clearfix"> </div>
															</div>										
												<!--/float-charts-->
												<div class="pie">
														<div class="col-md-6 chrt-two">
														<h3 class="sub-tittle">Reversed Value Axis Chart</h3>
														<div id="chartdiv2"></div>	
														<script>
															var chart = AmCharts.makeChart("chartdiv2", {
																	"type": "serial",
																	"theme": "patterns",
																	"legend": {
																		"useGraphSettings": true
																	},
																	"dataProvider": [{
																		"year": 1930,
																		"italy": 1,
																		"germany": 5,
																		"uk": 3
																	}, {
																		"year": 1934,
																		"italy": 1,
																		"germany": 2,
																		"uk": 6
																	}, {
																		"year": 1938,
																		"italy": 2,
																		"germany": 3,
																		"uk": 1
																	}, {
																		"year": 1950,
																		"italy": 3,
																		"germany": 4,
																		"uk": 1
																	}, {
																		"year": 1954,
																		"italy": 5,
																		"germany": 1,
																		"uk": 2
																	}, {
																		"year": 1958,
																		"italy": 3,
																		"germany": 2,
																		"uk": 1
																	}, {
																		"year": 1962,
																		"italy": 1,
																		"germany": 2,
																		"uk": 3
																	}, {
																		"year": 1966,
																		"italy": 2,
																		"germany": 1,
																		"uk": 5
																	}, {
																		"year": 1970,
																		"italy": 3,
																		"germany": 5,
																		"uk": 2
																	}, {
																		"year": 1974,
																		"italy": 4,
																		"germany": 3,
																		"uk": 6
																	}, {
																		"year": 1978,
																		"italy": 1,
																		"germany": 2,
																		"uk": 4
																	}],
																	"valueAxes": [{
																		"integersOnly": true,
																		"maximum": 6,
																		"minimum": 1,
																		"reversed": true,
																		"axisAlpha": 0,
																		"dashLength": 5,
																		"gridCount": 10,
																		"position": "left",
																		"title": "Place taken"
																	}],
																	"startDuration": 0.5,
																	"graphs": [{
																		"balloonText": "place taken by Italy in [[category]]: [[value]]",
																		"bullet": "round",
																		"hidden": true,
																		"title": "Italy",
																		"valueField": "italy",
																		"fillAlphas": 0
																	}, {
																		"balloonText": "place taken by Germany in [[category]]: [[value]]",
																		"bullet": "round",
																		"title": "Germany",
																		"valueField": "germany",
																		"fillAlphas": 0
																	}, {
																		"balloonText": "place taken by UK in [[category]]: [[value]]",
																		"bullet": "round",
																		"title": "United Kingdom",
																		"valueField": "uk",
																		"fillAlphas": 0
																	}],
																	"chartCursor": {
																		"cursorAlpha": 0,
																		"zoomable": false
																	},
																	"categoryField": "year",
																	"categoryAxis": {
																		"gridPosition": "start",
																		"axisAlpha": 0,
																		"fillAlpha": 0.05,
																		"fillColor": "#000000",
																		"gridAlpha": 0,
																		"position": "top"
																	},
																	"export": {
																		"enabled": true,
																		"position": "bottom-right"
																	 }
																});
																</script>
														 </div>
														<div class="col-md-6 chrt-three second">
															<h3 class="sub-tittle">Radar chart</h3>
														<div id="chartdiv4"></div>	
														      <script>
															    var chart = AmCharts.makeChart( "chartdiv4", {
																	  "type": "radar",
																	  "theme": "light",
																	  "dataProvider": [ {
																		"direction": "N",
																		"value": 8
																	  }, {
																		"direction": "NE",
																		"value": 9
																	  }, {
																		"direction": "E",
																		"value": 4.5
																	  }, {
																		"direction": "SE",
																		"value": 3.5
																	  }, {
																		"direction": "S",
																		"value": 9.2
																	  }, {
																		"direction": "SW",
																		"value": 8.4
																	  }, {
																		"direction": "W",
																		"value": 11.1
																	  }, {
																		"direction": "NW",
																		"value": 10
																	  } ],
																	  "valueAxes": [ {
																		"gridType": "circles",
																		"minimum": 0,
																		"autoGridCount": false,
																		"axisAlpha": 0.2,
																		"fillAlpha": 0.05,
																		"fillColor": "#FFFFFF",
																		"gridAlpha": 0.08,
																		"guides": [ {
																		  "angle": 225,
																		  "fillAlpha": 0.7,
																		  "fillColor": "#052963",
																		  "tickLength": 0,
																		  "toAngle": 315,
																		  "toValue": 14,
																		  "value": 0,
																		  "lineAlpha": 0,
																		}, {
																		  "angle": 45,
																		  "fillAlpha": 0.6,
																		  "fillColor": "#ea4c89",
																		  "tickLength": 0,
																		  "toAngle": 135,
																		  "toValue": 14,
																		  "value": 0,
																		  "lineAlpha": 0,
																		} ],
																		"position": "left"
																	  } ],
																	  "startDuration": 1,
																	  "graphs": [ {
																		"balloonText": "[[category]]: [[value]] m/s",
																		"bullet": "round",
																		"fillAlphas": 0.3,
																		"valueField": "value"
																	  } ],
																	  "categoryField": "direction",
																	  "export": {
																		"enabled": true
																	  }
																	} );
															  </script>
														</div>
																<div class="clearfix"> </div>
														</div>
												<div class="area">
												<div class="col-md-6 chrt-two area">
															<h3 class="sub-tittle">Line Multi Chart</h3>
															 <div style="area">
																	<canvas id="canvas" style="width:100%;height:100%"></canvas>
																</div>
																<button id="randomizeData">Randomize Data</button>
																<script>
																var randomScalingFactor = function() {
																	return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
																};
																var randomColor = function(opacity) {
																	return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
																};
																var lineChartData = {
																	labels: ["January", "February", "March", "April", "May", "June", "July"],
																	datasets: [{
																		label: "My First dataset",
																		data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
																		yAxisID: "y-axis-1",
																	}, {
																		label: "My Second dataset",
																		data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
																		yAxisID: "y-axis-2"
																	}]
																};
																$.each(lineChartData.datasets, function(i, dataset) {
																	dataset.borderColor = randomColor(0.4);
																	dataset.backgroundColor = randomColor(1);
																	dataset.pointBorderColor = randomColor(0.7);
																	dataset.pointBackgroundColor = randomColor(0.5);
																	dataset.pointBorderWidth = 1;
																});
																console.log(lineChartData);
																window.onload = function() {
																	var ctx = document.getElementById("canvas").getContext("2d");
																	window.myLine = Chart.Line(ctx, {
																		data: lineChartData,
																		options: {
																			hoverMode: 'label',
																			stacked: false,
																			scales: {
																				xAxes: [{
																					display: true,
																					gridLines: {
																						offsetGridLines: false
																					}
																				}],
																				yAxes: [{
																					type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
																					display: true,
																					position: "left",
																					id: "y-axis-1",
																				}, {
																					type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
																					display: true,
																					position: "right",
																					id: "y-axis-2",
																					// grid line settings
																					gridLines: {
																						drawOnChartArea: false, // only want the grid lines for one axis to show up
																					},
																				}],
																			}
																		}
																	});
																};
																$('#randomizeData').click(function() {
																	lineChartData.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
																	lineChartData.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
																	window.myLine.update();
																});
																</script>
															</div>
															<div class="col-md-6 chrt-three">
															<h3 class="sub-tittle">Stacked bar chart</h3>
															    <div id="chartdiv1"></div>	
																<script>
																var chart = AmCharts.makeChart("chartdiv1", {
																				  "type": "serial",
																				  "theme": "light",
																				  "rotate": true,
																				  "marginBottom": 50,
																				  "dataProvider": [{
																					"age": "85+",
																					"male": -0.1,
																					"female": 0.3
																				  }, {
																					"age": "80-54",
																					"male": -0.2,
																					"female": 0.3
																				  }, {
																					"age": "75-79",
																					"male": -0.3,
																					"female": 0.6
																				  }, {
																					"age": "70-74",
																					"male": -0.5,
																					"female": 0.8
																				  }, {
																					"age": "65-69",
																					"male": -0.8,
																					"female": 1.0
																				  }, {
																					"age": "60-64",
																					"male": -1.1,
																					"female": 1.3
																				  }, {
																					"age": "55-59",
																					"male": -1.7,
																					"female": 1.9
																				  }, {
																					"age": "50-54",
																					"male": -2.2,
																					"female": 2.5
																				  }, {
																					"age": "45-49",
																					"male": -2.8,
																					"female": 3.0
																				  }, {
																					"age": "40-44",
																					"male": -3.4,
																					"female": 3.6
																				  }, {
																					"age": "35-39",
																					"male": -4.2,
																					"female": 4.1
																				  }, {
																					"age": "30-34",
																					"male": -5.2,
																					"female": 4.8
																				  }, {
																					"age": "25-29",
																					"male": -5.6,
																					"female": 5.1
																				  }, {
																					"age": "20-24",
																					"male": -5.1,
																					"female": 5.1
																				  }, {
																					"age": "15-19",
																					"male": -3.8,
																					"female": 3.8
																				  }, {
																					"age": "10-14",
																					"male": -3.2,
																					"female": 3.4
																				  }, {
																					"age": "5-9",
																					"male": -4.4,
																					"female": 4.1
																				  }, {
																					"age": "0-4",
																					"male": -5.0,
																					"female": 4.8
																				  }],
																				  "startDuration": 1,
																				  "graphs": [{
																					"fillAlphas": 0.8,
																					"lineAlpha": 0.2,
																					"type": "column",
																					"valueField": "male",
																					"title": "Male",
																					"labelText": "[[value]]",
																					"clustered": false,
																					"labelFunction": function(item) {
																					  return Math.abs(item.values.value);
																					},
																					"balloonFunction": function(item) {
																					  return item.category + ": " + Math.abs(item.values.value) + "%";
																					}
																				  }, {
																					"fillAlphas": 0.8,
																					"lineAlpha": 0.2,
																					"type": "column",
																					"valueField": "female",
																					"title": "Female",
																					"labelText": "[[value]]",
																					"clustered": false,
																					"labelFunction": function(item) {
																					  return Math.abs(item.values.value);
																					},
																					"balloonFunction": function(item) {
																					  return item.category + ": " + Math.abs(item.values.value) + "%";
																					}
																				  }],
																				  "categoryField": "age",
																				  "categoryAxis": {
																					"gridPosition": "start",
																					"gridAlpha": 0.2,
																					"axisAlpha": 0
																				  },
																				  "valueAxes": [{
																					"gridAlpha": 0,
																					"ignoreAxisWidth": true,
																					"labelFunction": function(value) {
																					  return Math.abs(value) + '%';
																					},
																					"guides": [{
																					  "value": 0,
																					  "lineAlpha": 0.2
																					}]
																				  }],
																				  "balloon": {
																					"fixedPosition": true
																				  },
																				  "chartCursor": {
																					"valueBalloonsEnabled": false,
																					"cursorAlpha": 0.05,
																					"fullWidth": true
																				  },
																				  "allLabels": [{
																					"text": "Male",
																					"x": "28%",
																					"y": "97%",
																					"bold": true,
																					"align": "middle"
																				  }, {
																					"text": "Female",
																					"x": "75%",
																					"y": "97%",
																					"bold": true,
																					"align": "middle"
																				  }],
																				 "export": {
																					"enabled": true
																				  }   
																				});
																		</script>
																</div>
																<div class="clearfix"></div>
												</div>
													<!--//weather-charts-->
														<div class="graph-visualization">
															<div class="col-md-6 map-1">
																<h3 class="sub-tittle">Weather </h3>
																	<div class="weather">
																	<div class="weather-top">
																		<div class="weather-top-left">
																			<div class="degree">
																			<figure class="icons">
																				<canvas id="partly-cloudy-day" width="64" height="64">
																				</canvas>
																			</figure>
																			<span>37°</span>
																			<div class="clearfix"></div>
																			</div>
																<script>
																			 var icons = new Skycons({"color": "#002561"}),
																				  list  = [
																					"clear-night", "partly-cloudy-day",
																					"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
																					"fog"
																				  ],
																				  i;
																			  for(i = list.length; i--; )
																				icons.set(list[i], list[i]);
																			  icons.play();
																		</script>
																			<p>FRIDAY
																				<label>13</label>
																				<sup>th</sup>
																				AUG
																			</p>
																		</div>
																		<div class="weather-top-right">
																			<p><i class="fa fa-map-marker"></i>Location</p>
																			<label>Lorem ipsum</label>
																		</div>
																		<div class="clearfix"> </div>
																	</div>
																	<div class="weather-bottom">
															<div class="weather-bottom1">
																<div class="weather-head">
																<h4>Cloudy</h4>
																<figure class="icons">
																	<canvas id="cloudy" width="40" height="40"></canvas>
																</figure>					
																	<script>
																			 var icons = new Skycons({"color": "#00C6D7"}),
																				  list  = [
																					"clear-night", "cloudy",
																					"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
																					"fog"
																				  ],
																				  i;
																			  for(i = list.length; i--; )
																				icons.set(list[i], list[i]);
																			  icons.play();
																		</script>
																<h6>20°</h6>
																<div class="bottom-head">
																	<p>Monday</p>
																</div>
															</div>
															</div>
															<div class="weather-bottom1 ">
																<div class="weather-head">
															<h4>Sunny</h4>
															<figure class="icons">
																<canvas id="clear-day" width="40" height="40">
																</canvas>	
															</figure>					
																	<script>
																			 var icons = new Skycons({"color": "#00C6D7"}),
																				  list  = [
																					"clear-night", "clear-day",
																					"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
																					"fog"
																				  ],
																				  i;
																			  for(i = list.length; i--; )
																				icons.set(list[i], list[i]);
																			  icons.play();
																		</script>
															<h6>37°</h6>
															<div class="bottom-head">
																	<p>Tuesday</p>
																</div>
															</div>
															</div>
															<div class="weather-bottom1">
																<div class="weather-head">
																<h4>Rainy</h4>
																<figure class="icons">
																	<canvas id="sleet" width="40" height="40">
																	</canvas>
																</figure>
																<script>
																			 var icons = new Skycons({"color": "#00C6D7"}),
																				  list  = [
																					"clear-night", "clear-day",
																					"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
																					"fog"
																				  ],
																				  i;
																			  for(i = list.length; i--; )
																				icons.set(list[i], list[i]);
																			  icons.play();
																		</script>
																<h6>7°</h6>
																<div class="bottom-head">
																	<p>Wednesday</p>
																</div>
															</div>
															</div>
															<div class="weather-bottom1 ">
																<div class="weather-head">
															<h4>Snowy</h4>
															<figure class="icons">
																	<canvas id="snow" width="40" height="40">
																	</canvas>
																</figure>
																<script>
																			 var icons = new Skycons({"color": "#00C6D7"}),
																				  list  = [
																					"clear-night", "clear-day",
																					"partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
																					"fog"
																				  ],
																				  i;
																			  for(i = list.length; i--; )
																				icons.set(list[i], list[i]);
																			  icons.play();
																		</script>
															<h6>-10°</h6>
															<div class="bottom-head">
																	<p>Thursday</p>
																</div>
																</div>
															</div>
															<div class="clearfix"> </div>
														</div>
																</div>
															</div>
															<div class="col-md-6 map-2">
																 <div class="profile-nav alt">
																	<section class="panel">
																		<div class="user-heading alt clock-row terques-bg">
																			<h3 class="sub-tittle clock">Easy Clock </h3>
																		</div>
																			<ul id="clock">
																				<li id="sec"></li>
																				<li id="hour"></li>
																				<li id="min"></li>
																			</ul>
																		<ul class="clock-category">
																			<li>
																				<a href="#" class="active">
																					<img src="images/time.png" alt="">
																					<span>Clock</span>
																				</a>
																			</li>
																			<li>
																				<a href="#">
																					<img src="images/alarm.png" alt="">
																					<span>Alarm</span>
																				</a>
																			</li>
																			<li>
																				<a href="#">
																					<img src="images/watch.png" alt="">
																					<span>Stop watch</span>
																				</a>
																			</li>
																			<li>
																				<a href="#">
																					<img src="images/timer.png" alt="">
																					<span>Timer</span>
																				</a>
																			</li>
																		</ul>
																	</section>
																</div>
															</div>
															<div class="clearfix"> </div>
														</div>
												<!--//charts-->
												<div class="area-charts">
													<div class="col-md-6 panel-chrt">
													 <h3 class="sub-tittle dyna">Dynamic Speedometer </h3>
														<div id="wrapper">
																			<div id="left">
																				<div>
																					<label for='miles'>Miles:</label> <input type="text" name="miles" id="miles" />
																				</div>
																				<div>
																					<label for='kilometers'>Kilometers:</label> <input type="text" name="kilometers" id="kilometers" />
																				</div>
																				<p id="errmsg"></p>
																			</div>
																			<div id="gauge">
																				<div id="circle"></div>
																				<div id="numbers"></div>
																				<div id="mi-km"></div>
																				<div id="needle"></div>
																				</div>
																	</div>
															</div>
														<div class="col-md-6 tini-time-line">
														 <h3 class="sub-tittle">Time line </h3>
															<ul class="timeline">
																<li>
																  <div class="timeline-badge info"><i class="fa fa-smile-o"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title">Title</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>Description...</p>
																	</div>
																  </div>
																</li>
																<li>
																  <div class="timeline-badge primary"><i class="fa fa-star-o"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title">Title</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>Description...</p>
																	</div>
																  </div>
																</li>
																<li>
																  <div class="timeline-badge danger"><i class="fa fa-times-circle-o"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title">Title</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>Description...</p>
																	</div>
																  </div>
																</li>
																<li>
																  <div class="timeline-badge success"><i class="fa fa-check-circle-o"></i></div>
																  <div class="timeline-panel">
																	<div class="timeline-heading">
																	  <h4 class="timeline-title">Title</h4>
																	</div>
																	<div class="timeline-body">
																	  <p>Description...</p>
																	</div>
																  </div>
																</li>
															</ul>
														</div>
															<div class="clearfix"></div>		
													</div>
										<!--/bottom-grids-->		 
									<div class="bottom-grids">
										<div class="dev-table">    
											<div class="col-md-4 dev-col">                                    
                                            <div class="dev-widget dev-widget-transparent">
                                                <h2 class="inner one">Server Usage</h2>
                                                <p>Today server usage in percentages</p>                                        
                                                <div class="dev-stat"><span class="counter">68</span>%</div>                                                                                
                                                <div class="progress progress-bar-xs">
                                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
                                                </div>                                        
                                                <p>We Todayly recommend you change your plan to <strong>Pro</strong>. Click here to get more details.</p>
                                                <a href="#" class="dev-drop">Take a closer look <span class="fa fa-angle-right pull-right"></span></a>
                                            </div>
                                        </div>
                                        <div class="col-md-4 dev-col mid">                                    
                                            <div class="dev-widget dev-widget-transparent dev-widget-success">
                                                 <h3 class="inner">Today Earnings</h3>
                                                <p>This is Today earnings per last year</p>                                        
                                                <div class="dev-stat">$<span class="counter">75,332</span></div>                                                                                
                                                <div class="progress progress-bar-xs">
                                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 79%;"></div>
                                                </div>                                        
                                                <p>We happy to notice you that you become an Elite customer, and you can get some custom sugar.</p>
                                                <a href="#" class="dev-drop">Take a closer look <span class="fa fa-angle-right pull-right"></span></a>
                                            </div>
                                        </div>
                                        <div class="col-md-4 dev-col">                                    
                                            <div class="dev-widget dev-widget-transparent dev-widget-danger">
                                                 <h3 class="inner">Your Balance</h3>
                                                <p>All your earnings for this time</p>
                                                <div class="dev-stat">$<span class="counter">5,321</span></div>                                                                                
                                                <div class="progress progress-bar-xs">
                                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
                                                </div>                                        
                                                <p>You can withdraw this money in end of each month. Also you can spend it on our marketplace.</p>
                                                <a href="#" class="dev-drop">Take a closer look <span class="fa fa-angle-right pull-right"></span></a>                                        
                                            </div>
                                        </div>
										<div class="clearfix"></div>		
										</div>
										</div>
									<!--//bottom-grids-->
									</div>
									<!--/charts-inner-->
									</div>
										<!--//outer-wp-->
									</div>
									 <!--footer section start-->
										<footer>
										   <p>&copy 2016 Augment . All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">xmoban.cn.</a></p>
										</footer>
									<!--footer section end-->
								</div>
							</div>
				<!--//content-inner-->
			<!--/sidebar-menu-->
				<div class="sidebar-menu">
					<header class="logo">
					<a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a> <a href="index.html"> <span id="logo"> <h1>Augment</h1></span> 
					<!--<img id="logo" src="" alt="Logo"/>--> 
				  </a> 
				</header>
			<div style="border-top:1px solid rgba(69, 74, 84, 0.7)"></div>
			<!--/down-->
							<div class="down">	
									  <a href="index.html"><img src="images/admin.jpg"></a>
									  <a href="index.html"><span class=" name-caret">Jasmin Leo</span></a>
									 <p>System Administrator in Company</p>
									<ul>
									<li><a class="tooltips" href="index.html"><span>Profile</span><i class="lnr lnr-user"></i></a></li>
										<li><a class="tooltips" href="index.html"><span>Settings</span><i class="lnr lnr-cog"></i></a></li>
										<li><a class="tooltips" href="index.html"><span>Log out</span><i class="lnr lnr-power-switch"></i></a></li>
										</ul>
									</div>
							   <!--//down-->
                           <div class="menu">
									<ul id="menu" >
										<li><a href="index.html"><i class="fa fa-tachometer"></i> <span>Dashboard</span></a></li>
										 <li id="menu-academico" ><a href="#"><i class="fa fa-table"></i> <span> Tabs &amp; Panels</span> <span class="fa fa-angle-right" style="float: right"></span></a>
										   <ul id="menu-academico-sub" >
											<li id="menu-academico-avaliacoes" ><a href="tabs.html"> Tabs &amp; Panels</a></li>
											<li id="menu-academico-boletim" ><a href="widget.html">Widgets</a></li>
											<li id="menu-academico-avaliacoes" ><a href="calender.html">Calendar</a></li>
										  </ul>
										</li>
										 <li id="menu-academico" ><a href="#"><i class="fa fa-file-text-o"></i> <span>Ui Elements</span> <span class="fa fa-angle-right" style="float: right"></span></a>
											 <ul id="menu-academico-sub" >
												<li id="menu-academico-avaliacoes" ><a href="forms.html">Forms</a></li>
												<li id="menu-academico-boletim" ><a href="validation.html">Validation Forms</a></li>
												<li id="menu-academico-boletim" ><a href="table.html">Tables</a></li>
												<li id="menu-academico-boletim" ><a href="buttons.html">Buttons</a></li>
											  </ul>
										 </li>
									<li><a href="typography.html"><i class="lnr lnr-pencil"></i> <span>Typography</span></a></li>
									<li id="menu-academico" ><a href="#"><i class="lnr lnr-book"></i> <span>Pages</span> <span class="fa fa-angle-right" style="float: right"></span></a>
										  <ul id="menu-academico-sub" >
										    <li id="menu-academico-avaliacoes" ><a href="login.html">Login</a></li>
										    <li id="menu-academico-boletim" ><a href="register.html">Register</a></li>
											<li id="menu-academico-boletim" ><a href="404.html">404</a></li>
											<li id="menu-academico-boletim" ><a href="sign.html">Sign up</a></li>
											<li id="menu-academico-boletim" ><a href="profile.html">Profile</a></li>
										  </ul>
									 </li>
									 <li><a href="#"><i class="lnr lnr-envelope"></i> <span>Mail Box</span><span class="fa fa-angle-right" style="float: right"></span></a>
									   <ul>
										<li><a href="inbox.html"><i class="fa fa-inbox"></i> Inbox</a></li>
										<li><a href="compose.html"><i class="fa fa-pencil-square-o"></i> Compose Mail</a></li>
										<li><a href="editor.html"><span class="lnr lnr-highlight"></span> Editors Page</a></li>
									  </ul>
									</li>
							        <li id="menu-academico" ><a href="#"><i class="lnr lnr-layers"></i> <span>Components</span> <span class="fa fa-angle-right" style="float: right"></span></a>
										 <ul id="menu-academico-sub" >
											<li id="menu-academico-avaliacoes" ><a href="grids.html">Grids</a></li>
											<li id="menu-academico-boletim" ><a href="media.html">Media Objects</a></li>
										  </ul>
									 </li>
									<li><a href="chart.html"><i class="lnr lnr-chart-bars"></i> <span>Charts</span> <span class="fa fa-angle-right" style="float: right"></span></a>
									  <ul>
										<li><a href="map.html"><i class="lnr lnr-map"></i> Maps</a></li>
										<li><a href="graph.html"><i class="lnr lnr-apartment"></i> Graph Visualization</a></li>
									</ul>
									</li>
									<li id="menu-comunicacao" ><a href="#"><i class="fa fa-smile-o"></i> <span>More</span><span class="fa fa-angle-double-right" style="float: right"></span></a>
									  <ul id="menu-comunicacao-sub" >
										<li id="menu-mensagens" style="width:120px" ><a href="project.html">Projects <i class="fa fa-angle-right" style="float: right; margin-right: -8px; margin-top: 2px;"></i></a>
										  <ul id="menu-mensagens-sub" >
											<li id="menu-mensagens-enviadas" style="width:130px" ><a href="ribbon.html">Ribbons</a></li>
											<li id="menu-mensagens-recebidas"  style="width:130px"><a href="blank.html">Blank</a></li>
										  </ul>
										</li>
										<li id="menu-arquivos" ><a href="500.html">500</a></li>
									  </ul>
									</li>
								  </ul>
								</div>
							  </div>
							  <div class="clearfix"></div>		
							</div>
							<script>
							var toggle = true;
							$(".sidebar-icon").click(function() {                
							  if (toggle)
							  {
								$(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
								$("#menu span").css({"position":"absolute"});
							  }
							  else
							  {
								$(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
								setTimeout(function() {
								  $("#menu span").css({"position":"relative"});
								}, 400);
							  }
											toggle = !toggle;
										});
							</script>
<!--js -->
<!-- Bootstrap Core JavaScript -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 分类 响应式 自适应 设备 风格 颜色 bootstrap bootstrap自适应 bootstrap响应式 蓝色 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 后台系统 后台 系统

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到