基于jquery框架、google chart tools图形报表gvChart的应用心得

最新推荐文章于 2020-07-10 11:52:30 发布
最新推荐文章于 2020-07-10 11:52:30 发布
阅读量1w 收藏 9
点赞数
分类专栏： JS JQuery JS技术 文章标签： jquery 报表 google tools 框架 图形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songylwq/article/details/7452748
版权 

首先，介绍下gvChart：gvChart是一个利用Google Chart Tools来创建交互式图表（Charts）的jQuery插件。可创建的图表类型有Area、Line、Bar、Column和Pie五种。它使用HTML Tables做数据源来创建图表。

准备工作：引入JS

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery.gvChart-1.0.1.min.js" type="text/javascript"></script>
红色部分为google的chart tools框架的引用，必须要引用并在js方法中调用方法gvChartInit();才能正常使用，并且这么强大的报表功能只能在线使用，允许用户每天访问5W次，想要离线使用的话只能用其他的报表框架了，后面的博客中我会介绍一个还算不错的js图形报表框架
google官方的详细api： Google Chart API 参考 中文版

效果图1.



在页面中方法：

jQuery('#myTable1').gvChart({
             chartType: 'AreaChart',
             gvSettings: {
                 vAxis: { title: '金额' },
                 hAxis: { title: '月份' },
                 width: 720,
                 height: 300
             }
         });
数据：
 
<table id='myTable1'>
	<caption>报表分析</caption>
	<thead>
		<tr>
			<th></th><th>一月</th><th>二月</th><th>三月</th><th>四月</th><th>五月</th><th>六月</th>
			<th>七月</th><th>八月</th><th>九月</th><th>十月</th><th>十一月</th><th>十二月</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>实际完成</th>
			<td>900</td><td>600</td><td>327</td><td>359</td><td>376</td><td>398</td>
			<td>60</td><td>50</td><td>404</td><td>700</td><td>200</td><td>500</td>
		</tr>
		<tr>
			<th>计划任务</th>
			<td>1167</td><td>1110</td><td>691</td><td>165</td><td>135</td><td>157</td>
			<td>139</td><td>136</td><td>938</td><td>1120</td><td>55</td><td>55</td>
		</tr>
	</tbody>
</table>

效果2：

调用方法：

jQuery('#myTable2').gvChart({
             chartType: 'LineChart',
             gvSettings: {
                 vAxis: { title: '金额' },
                 hAxis: { title: '月份' },
                 width: 720,
                 height: 300
             }
         });

数据格式：

<table id='myTable1'>
	<caption>报表分析</caption>
	<thead>
		<tr>
			<th></th><th>一月</th><th>二月</th><th>三月</th><th>四月</th><th>五月</th><th>六月</th>
			<th>七月</th><th>八月</th><th>九月</th><th>十月</th><th>十一月</th><th>十二月</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>实际完成</th>
			<td>900</td><td>600</td><td>327</td><td>359</td><td>376</td><td>398</td>
			<td>60</td><td>50</td><td>404</td><td>700</td><td>200</td><td>500</td>
		</tr>
		<tr>
			<th>计划任务</th>
			<td>1167</td><td>1110</td><td>691</td><td>165</td><td>135</td><td>157</td>
			<td>139</td><td>136</td><td>938</td><td>1120</td><td>55</td><td>55</td>
		</tr>
	</tbody>
</table>


效果3：


方法调用：

jQuery('#myTable3').gvChart({
             chartType: 'BarChart',
             gvSettings: {
                 vAxis: { title: '金额' },
                 hAxis: { title: '月份' },
                 width: 720,
                 height: 300
             }
});
数据格式： 

<table id='myTable1'>
	<caption>报表分析</caption>
	<thead>
		<tr>
			<th></th><th>一月</th><th>二月</th><th>三月</th><th>四月</th><th>五月</th><th>六月</th>
			<th>七月</th><th>八月</th><th>九月</th><th>十月</th><th>十一月</th><th>十二月</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>实际完成</th>
			<td>900</td><td>600</td><td>327</td><td>359</td><td>376</td><td>398</td>
			<td>60</td><td>50</td><td>404</td><td>700</td><td>200</td><td>500</td>
		</tr>
		<tr>
			<th>计划任务</th>
			<td>1167</td><td>1110</td><td>691</td><td>165</td><td>135</td><td>157</td>
			<td>139</td><td>136</td><td>938</td><td>1120</td><td>55</td><td>55</td>
		</tr>
	</tbody>
</table>

效果4：

方法调用：

jQuery('#myTable5').gvChart({
             chartType: 'PieChart',
             gvSettings: {
                 vAxis: { title: '金额' },
                 hAxis: { title: '月份' },
                 width: 720,
                 height: 300
             }
});
数据格式： 

<table id='myTable1'>
	<caption>报表分析</caption>
	<thead>
		<tr>
			<th></th><th>一月</th><th>二月</th><th>三月</th><th>四月</th><th>五月</th><th>六月</th>
			<th>七月</th><th>八月</th><th>九月</th><th>十月</th><th>十一月</th><th>十二月</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>2001</th>
			<td>900</td><td>600</td><td>327</td><td>359</td><td>376</td><td>398</td>
			<td>60</td><td>50</td><td>404</td><td>700</td><td>200</td><td>500</td>
		</tr>
	</tbody>
</table>
示例全部代码： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
		<script src="jquery.gvChart-1.0.1.min.js" type="text/javascript"></script>
		<link href="js/themes/default/tabs.css" rel="stylesheet"
			type="text/css" />
		<link href="js/themes/icon.css" rel="stylesheet" type="text/css" />

		<script src="js/jquery.easyui.min.js" type="text/javascript"></script>

		<script type="text/javascript">      
   $(function() {
           $("#tabs").tabs();
       });
	</script>

		<script type="text/javascript">
	gvChartInit();
     jQuery(document).ready(function() {
         jQuery('#myTable1').gvChart({
             chartType: 'AreaChart',
             gvSettings: {
                 vAxis: { title: '金额' },
                 hAxis: { title: '月份' },
                 width: 720,
                 height: 300
             }
         });
		 
		 jQuery('#myTable2').gvChart({
             chartType: 'LineChart',
             gvSettings: {
                 vAxis: { title: '金额' },
                hAxis: { title: '月份' },
                 width: 720,
                 height: 300
             }
         });
		 
         jQuery('#myTable3').gvChart({
             chartType: 'BarChart',
             gvSettings: {
                 vAxis: { title: '金额' },
                 hAxis: { title: '月份' },
                width: 720,
                 height: 300
             }
         });

         jQuery('#myTable4').gvChart({
             chartType: 'ColumnChart',
             gvSettings: {
                 vAxis: { title: '金额' },
                 hAxis: { title: '月份' },
                 width: 720,
                 height: 300
             }
         });

         jQuery('#myTable5').gvChart({
             chartType: 'PieChart',
             gvSettings: {
                 vAxis: { title: '金额' },
                 hAxis: { title: '月份' },
                 width: 720,
                 height: 300
             }
         });
     });

    </script>

		<style type="text/css">
body {
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 12px;
}

a {
	text-decoration: none;
	font-weight: bold;
	color: #555;
}

a:hover {
	color: #000;
}

div.easyui-tabs {
	margin: auto;
	text-align: left;
	width: 720px;
}

div.clean {
	border: 1px solid #850000;
}

.clean td,.clean th {
	border: 2px solid #bbb;
	background: #ddd;
	padding: 5px 10px;
	text-align: center;
	border-radius: 2px;
}

.clean table {
	margin: auto;
	margin-top: 15px;
	margin-bottom: 15px;
}

.clean caption {
	font-weight: bold;
}

.gvChart,.clean {
	border: 2px solid #850000;
	border-radius: 5px;
	-moz-border-radius: 10px;
	width: 720px;
	margin: auto;
	margin-top: 20px;
}

pre {
	background: #eee;
	padding: 10px;
	border-radius: 10px;
	-moz-border-radius: 10px;
}
</style>
	</head>
	<body>



		<div class="easyui-tabs" fit="true" plain="true"
			style="height: 500px; width: 800px;">
			<div title="Title1" style="padding: 10px;">
				<h2 id="area">
					区域报表
				</h2>
				<table id='myTable1'>
					<caption>
						报表分析
					</caption>
					<thead>
						<tr>
							<th>
							</th>
							<th>
								一月

							</th>
							<th>
								二月

							</th>
							<th>
								三月

							</th>
							<th>
								四月

							</th>
							<th>
								五月

							</th>
							<th>
								六月

							</th>
							<th>
								七月

							</th>
							<th>
								八月

							</th>
							<th>
								九月

							</th>
							<th>
								十月

							</th>
							<th>
								十一月

							</th>
							<th>
								十二月

							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>
								实际完成

							</th>
							<td>
								900

							</td>
							<td>
								600

							</td>
							<td>
								327

							</td>
							<td>
								359

							</td>
							<td>
								376

							</td>
							<td>
								398

							</td>
							<td>
								60
							</td>
							<td>
								50
							</td>
							<td>
								404
							</td>
							<td>
								700
							</td>
							<td>
								200
							</td>
							<td>
								500
							</td>
						</tr>
						<tr>
							<th>
								计划任务

							</th>
							<td>
								1167

							</td>
							<td>
								1110

							</td>
							<td>
								691

							</td>
							<td>
								165

							</td>
							<td>
								135

							</td>
							<td>
								157

							</td>
							<td>
								139

							</td>
							<td>
								136

							</td>
							<td>
								938

							</td>
							<td>
								1120

							</td>
							<td>
								55

							</td>
							<td>
								55

							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div title="Title2" style="padding: 10px;">
				<h2 id="line">
					LineChart
				</h2>
				<table id='myTable2'>
					<caption>
						报表分析
					</caption>
					<thead>
						<tr>
							<th>
							</th>
							<th>
								一月

							</th>
							<th>
								二月

							</th>
							<th>
								三月

							</th>
							<th>
								四月

							</th>
							<th>
								五月

							</th>
							<th>
								六月

							</th>
							<th>
								七月

							</th>
							<th>
								八月

							</th>
							<th>
								九月

							</th>
							<th>
								十月

							</th>
							<th>
								十一月

							</th>
							<th>
								十二月

							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>
								实际完成

							</th>
							<td>
								900

							</td>
							<td>
								600

							</td>
							<td>
								327

							</td>
							<td>
								359

							</td>
							<td>
								376

							</td>
							<td>
								398

							</td>
							<td>
								60
							</td>
							<td>
								50
							</td>
							<td>
								404
							</td>
							<td>
								700
							</td>
							<td>
								200
							</td>
							<td>
								500
							</td>
						</tr>
						<tr>
							<th>
								计划任务

							</th>
							<td>
								1167

							</td>
							<td>
								1110

							</td>
							<td>
								691

							</td>
							<td>
								165

							</td>
							<td>
								135

							</td>
							<td>
								157

							</td>
							<td>
								139

							</td>
							<td>
								136

							</td>
							<td>
								938

							</td>
							<td>
								1120

							</td>
							<td>
								55

							</td>
							<td>
								55

							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div title="Title3" style="padding: 10px;">
				<h2 id="bar">
					BarChart
				</h2>
				<table id='myTable3'>
					<caption>
						报表分析
					</caption>
					<thead>
						<tr>
							<th>
							</th>
							<th>
								一月

							</th>
							<th>
								二月

							</th>
							<th>
								三月

							</th>
							<th>
								四月

							</th>
							<th>
								五月

							</th>
							<th>
								六月

							</th>
							<th>
								七月

							</th>
							<th>
								八月

							</th>
							<th>
								九月

							</th>
							<th>
								十月

							</th>
							<th>
								十一月

							</th>
							<th>
								十二月

							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>
								实际完成

							</th>
							<td>
								900

							</td>
							<td>
								600

							</td>
							<td>
								327

							</td>
							<td>
								359

							</td>
							<td>
								376

							</td>
							<td>
								398

							</td>
							<td>
								60
							</td>
							<td>
								50
							</td>
							<td>
								404
							</td>
							<td>
								700
							</td>
							<td>
								200
							</td>
							<td>
								500
							</td>
						</tr>
						<tr>
							<th>
								计划任务

							</th>
							<td>
								1167

							</td>
							<td>
								1110

							</td>
							<td>
								691

							</td>
							<td>
								165

							</td>
							<td>
								135

							</td>
							<td>
								157

							</td>
							<td>
								139

							</td>
							<td>
								136

							</td>
							<td>
								938

							</td>
							<td>
								1120

							</td>
							<td>
								55

							</td>
							<td>
								55

							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div title="Title4" style="padding: 10px;">
				<h2 id="column">
					ColumnChart
				</h2>
				<table id='myTable4'>
					<caption>
						报表分析
					</caption>
					<thead>
						<tr>
							<th>
							</th>
							<th>
								一月

							</th>
							<th>
								二月

							</th>
							<th>
								三月

							</th>
							<th>
								四月

							</th>
							<th>
								五月

							</th>
							<th>
								六月

							</th>
							<th>
								七月

							</th>
							<th>
								八月

							</th>
							<th>
								九月

							</th>
							<th>
								十月

							</th>
							<th>
								十一月

							</th>
							<th>
								十二月

							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>
								实际完成

							</th>
							<td>
								900

							</td>
							<td>
								600

							</td>
							<td>
								327

							</td>
							<td>
								359

							</td>
							<td>
								376

							</td>
							<td>
								398

							</td>
							<td>
								60
							</td>
							<td>
								50
							</td>
							<td>
								404
							</td>
							<td>
								700
							</td>
							<td>
								200
							</td>
							<td>
								500
							</td>
						</tr>
						<tr>
							<th>
								计划任务

							</th>
							<td>
								1167

							</td>
							<td>
								1110

							</td>
							<td>
								691

							</td>
							<td>
								165

							</td>
							<td>
								135

							</td>
							<td>
								157

							</td>
							<td>
								139

							</td>
							<td>
								136

							</td>
							<td>
								938

							</td>
							<td>
								1120

							</td>
							<td>
								55

							</td>
							<td>
								55

							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div title="Title5" style="padding: 10px;">
				<h2 id="pie">
					PieChart
				</h2>
				<table id='myTable5'>
					<caption>
						报表分析
					</caption>
					<thead>
						<tr>
							<th>
							</th>
							<th>
								一月

							</th>
							<th>
								二月

							</th>
							<th>
								三月

							</th>
							<th>
								四月

							</th>
							<th>
								五月

							</th>
							<th>
								六月

							</th>
							<th>
								七月

							</th>
							<th>
								八月

							</th>
							<th>
								九月

							</th>
							<th>
								十月

							</th>
							<th>
								十一月

							</th>
							<th>
								十二月

							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>
								2010

							</th>
							<td>
								125

							</td>
							<td>
								185

							</td>
							<td>
								327

							</td>
							<td>
								359

							</td>
							<td>
								376

							</td>
							<td>
								398

							</td>
							<td>
								0

							</td>
							<td>
								0

							</td>
							<td>
								0

							</td>
							<td>
								0

							</td>
							<td>
								0

							</td>
							<td>
								0

							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</body>
</html>

























songylwq
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于jQuery框架的医院HIS系统页面前端特效设计
04-16
文中针对医院HIS系统的前端页面需求改变，提出采用一种基于jQuery框架的医院系统前端页面特效设计方法。通过对前端页面开发的需求分析，并借助jQuery代码，实现HIS系统前端页面的交互和良好视觉效果，以此为广大的...
基于JQuery框架的AJAX实例代码
12-01
[removed][removed] [removed] $(document).ready(function(){//这个就是jQueryready ，它就像C语言的main 所有操作包含在它里面 $(“#button_login”).mousedown(function(){ login(); //点击ID为”butto
基于jquery框架，用gvChart处理后台数据制作图形报表
XjMartian的博客
07-10 1087
首先，介绍下gvChart： gvChart是一个利用Google Chart Tools来创建交互式图表（Charts）的jQuery插件。可创建的图表类型有Area、Line、Bar、Column和Pie五种。它使用HTML Tables做数据源来创建图表。 准备工作：引入JS <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" sr
2010年最佳jQuery插件
sam9901
12-04 142
在前两周国外知名博客WDL先后分享了“2010最佳系列”中的“最佳免费WordPress主题”和“最佳免费字体”，在这个星期又发布了2010年最佳jQuery插件。在2010年，JavaScript框架继续日渐普及，这使得大量的插件被开发出来。满目琳琅，难以选择心头之好。WDL的作者从大量的优秀jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best o...
jquery.flowchart：允许您绘制流程图的JQuery插件
02-04
jquery.flowchart Javascript jQuery插件，可让您绘制流程图。 看一下演示： : 描述 jquery.flowchart.js是一个开源Javascript jQuery ui插件，它允许您绘制和编辑流程图。 到目前为止提供的主要功能如下： 绘制...
基于SSH jQuery框架的餐饮Web App的设计与实现.pdf
08-26
基于SSH jQuery框架的餐饮Web App的设计与实现.pdf
2021年Java SSM框架实战案例：基于jQuery实现数据库全操作源码
最新发布
03-25
项目标题：2021年Java SSM框架实战案例：基于jQuery的数据库全操作源码实现 项目概述： 本项目采用Java语言开发，整合了SSM（Spring、SpringMVC、MyBatis）框架，通过前端jQuery技术实现了对数据库的全面操作，包括...
jQuery.gvChart-1.0.1
02-03
chartType You can use five different google charts, by setting chartType to one of: •AreaChart •LineChart •BarChart •ColumnChart •PieChart hideTable Default: true If set to false, it won't hide table while creating the chart.
web前端开发-动态生成图表jquery插件（gvchart_jb51net.rar）
05-16
用于web前端，jquery-gvchart动态生成图表
图形jquery.gvChart-1.0.1.min.js
01-10
/* @license * jQuery.print, version 1.3.2 * (c) Sathvik Ponangi, Doers' Guild * Licence: CC-By (http://creativecommons.org/licenses/by/3.0/) *--------------------------------------------------------------------------*/ (function ($) { "use strict"; // A nice closure for our definitions function getjQueryObject(string) { // Make string a vaild jQuery thing var jqObj = $(""); try { jqObj = $(string) .clone(); } catch (e) { jqObj = $("<span />") .html(string); } return jqObj; } function printFrame(frameWindow) { // Print the selected window/iframe var def = $.Deferred(); try { setTimeout(function () { // Fix for IE : Allow it to render the iframe frameWindow.focus(); try { // Fix for IE11 - printng the whole page instead of the iframe content if (!frameWindow.document.execCommand('print', false, null)) { // document.execCommand returns false if it failed -http://stackoverflow.com/a/21336448/937891 frameWindow.print(); } } catch (e) { frameWindow.print(); } frameWindow.close(); def.resolve(); }, 250); } catch (err) { def.reject(err); } return def; } function printContentInNewWindow(content) { // Open a new window and print selected content var w = window.open(); w.[removed](content); w.document.close(); return printFrame(w); } function isNode(o) { /* http://stackoverflow.com/a/384380/937891 */ return !!(typeof Node === "object" ? o instanceof Node : o && typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName === "string"); } $.print = $.fn.print = function () { // Print a given set of elements var options, $this, self = this; // console.log("Printing", this, arguments); if (self instanceof $) { // Get the node if it is a jQuery object self = self.get(0); } if (isNode(self)) { // If `this` is a HTML element, i.e. for // $(selector).print() $this = $(self); if (arguments.length > 0) { options = arguments[0]; } } else { if (arguments.length > 0) { // $.print(selector,options) $this = $(arguments[0]); if (isNode($this[0])) { if (arguments.length > 1) { options = arguments[1]; } } else { // $.print(options) options = arguments[0]; $this = $("html"); } } else { // $.print() $this = $("html"); } } // Default options var defaults = { globalStyles: true, mediaPrint: false, stylesheet: null, noPrintSelector: ".no-print", iframe: true, append: null, prepend: null, manuallyCopyFormValues: true, deferred: $.Deferred() }; // Merge with user-options options = $.extend({}, defaults, (options || {})); var $styles = $(""); if (options.globalStyles) { // Apply the stlyes from the current sheet to the printed page $styles = $("style, link, meta, title"); } else if (options.mediaPrint) { // Apply the media-print stylesheet $styles = $("link[media=print]"); } if (options.stylesheet) { // Add a custom stylesheet if given $styles = $.merge($styles, $('<link rel="stylesheet" href="' + options.stylesheet + '">')); } // Create a copy of the element to print var copy = $this.clone(); // Wrap it in a span to get the HTML markup string copy = $("<span/>") .append(copy); // Remove unwanted elements copy.find(options.noPrintSelector) .remove(); // Add in the styles copy.append($styles.clone()); // Appedned content copy.append(getjQueryObject(options.append)); // Prepended content copy.prepend(getjQueryObject(options.prepend)); if (options.manuallyCopyFormValues) { // Manually copy form values into the HTML for printing user-modified input fields // http://stackoverflow.com/a/26707753 copy.find("input") .each(function () { var $field = $(this); if ($field.is("[type='radio']") || $field.is("[type='checkbox']")) { if ($field.prop("checked")) { $field.attr("checked", "checked"); } } else { $field.attr("value", $field.val()); } }); copy.find("select").each(function () { var $field = $(this); $field.find(":selected").attr("selected", "selected"); }); copy.find("textarea").each(function () { // Fix for https://github.com/DoersGuild/jQuery.print/issues/18#issuecomment-96451589 var $field = $(this); $field.text($field.val()); }); } // Get the HTML markup string var content = copy.html(); // Notify with generated markup & cloned elements - useful for logging, etc try { options.deferred.notify('generated_markup', content, copy); } catch (err) { console.warn('Error notifying deferred', err); } // Destroy the copy copy.remove(); if (options.iframe) { // Use an iframe for printing try { var $iframe = $(options.iframe + ""); var iframeCount = $iframe.length; if (iframeCount === 0) { // Create a new iFrame if none is given $iframe = $('<iframe height="0" width="0" border="0" wmode="Opaque"/>') .prependTo('body') .css({ "position": "absolute", "top": -999, "left": -999 }); } var w, wdoc; w = $iframe.get(0); w = w.contentWindow || w.contentDocument || w; wdoc = w.document || w.contentDocument || w; wdoc.open(); wdoc.write(content); wdoc.close(); printFrame(w) .done(function () { // Success setTimeout(function () { // Wait for IE if (iframeCount === 0) { // Destroy the iframe if created here $iframe.remove(); } }, 100); }) .fail(function (err) { // Use the pop-up method if iframe fails for some reason console.error("Failed to print from iframe", err); printContentInNewWindow(content); }) .always(function () { try { options.deferred.resolve(); } catch (err) { console.warn('Error notifying deferred', err); } }); } catch (e) { // Use the pop-up method if iframe fails for some reason console.error("Failed to print from iframe", e.stack, e.message); printContentInNewWindow(content) .always(function () { try { options.deferred.resolve(); } catch (err) { console.warn('Error notifying deferred', err); } }); } } else { // Use a new window for printing printContentInNewWindow(content) .always(function () { try { options.deferred.resolve(); } catch (err) { console.warn('Error notifying deferred', err); } }); } return this; }; })(jQuery);
jQuery优秀插件（非常多非常全）
08-15
jQuery 优秀插件 包含jquery-ui AnythingSlider_滑动面板 autosprites_菜单 coda-slider-2.0_滑动面板 easyslider1.7_滑动面板 jqtransform-1.1_表单转换 jquery.chromatable-1.3.0_滚动表格 jquery.uploadify-v2.1.0_文件上传 colortips提示 jQuery.gvChart-1.0图表 jquery.yoxview-2.2-幻灯片浏览 nivo-slider2.3拥有9种过度效果的超级smooth slider quicksand.1.2.1重新排序 Jquery.tools.tabs tab 层旋转
网页添加统计图表折线图、扇形图（全，静动态，含4个插件）-gvchart统计图表
03-13
统计图表在网站也好，微信也好都很实用，能直观表示出数据，利于分析和修改。 第一步：引入gvchart文件； 第二步：数据。不管静态还是动态，格式一样就完事； 第三步：生成统计图表。
JS 循环遍历JSON数据
热门推荐
12-01 23万+
JSON数据如：{"options":"[{/"text/":/"王家湾/",/"value/":/"9/"},{/"text/":/"李家湾/",/"valu e/":/"10/"},{/"text/":/"邵家湾/",/"value/":/"13/"}]"} 用js可以写成： var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",
js 使用js的CreateElement方法创建元素、样式表动态引入
02-20 3万+
一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "tex
JS动态引入js,CSS——动态创建script/link/style标签
01-15 3万+
一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "tex
JS 实现中文的URI编码，URI编码转换成中文
01-13 3万+
JS的内置函数（encodeURIComponent()；decodeURI()）实现中文与URI间的转换 例子：     无标题文档 <!-- function test(){ var str = document.getElementById("srcStr").value; var strToUri = encodeURIComponent(str); docume
这些UI框架是基于jQuery库开发的吗？
06-08
不是全部都是基于jQuery库开发的，其中Bootstrap是基于jQuery库开发的，而其他的UI框架如Semantic UI、Materialize、Ant Design、Element都是基于其他的JavaScript框架开发的，如React、Vue等。事实上，随着...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值