mirror of
https://github.com/wahyd4/jQuery.print.git
synced 2026-08-09 04:46:31 +10:00
113 lines
5.5 KiB
HTML
113 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
|
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
|
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
|
<!--[if gt IE 8]><!-->
|
|
<html class="no-js">
|
|
<!--<![endif]-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>jQuery.Print</title>
|
|
<meta name="description" content="jQuery.print is a plugin for printing specific parts of a page">
|
|
<meta name="viewport" content="width=device-width">
|
|
<link rel="stylesheet" href="css/normalize.min.css">
|
|
<style type='text/css'>
|
|
.a {
|
|
background: black;
|
|
color: white;
|
|
}
|
|
.b {
|
|
color: #aaa;
|
|
}
|
|
</style>
|
|
<!--[if lt IE 9]>
|
|
<script src="js/vendor/html5-3.6-respond-1.1.0.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<!--[if lt IE 9]>
|
|
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
|
|
<![endif]-->
|
|
<h3><a href="https://github.com/DoersGuild/jQuery.print" id="view-on-github" class="btn"><span>View jQuery.print on GitHub</span></a></h3>
|
|
<div id="content_holder">
|
|
<div id="ele1" class="a">
|
|
<h3>Element 1</h3>
|
|
<p>
|
|
Some random text.
|
|
<input type="text" value="Dummy input text" />
|
|
</p>
|
|
<button class="print-link no-print" onclick="jQuery('#ele1').print()">
|
|
Print this (jQuery('#ele1').print())
|
|
</button>
|
|
</div>
|
|
<div id="ele2" class="b">
|
|
<h3>Element 2</h3>
|
|
<p>
|
|
Some other random text.
|
|
</p>
|
|
<button class="print-link no-print">
|
|
Print this ($.print("#ele2")) and skip the button
|
|
</button>
|
|
</div>
|
|
<div id="ele3" class="a">
|
|
<h3>Element 3</h3>
|
|
<p class="no-print">
|
|
Some more random text that is not to be printed.
|
|
</p>
|
|
<button class="print-link" onclick="jQuery.print('#ele3')">
|
|
Print this (jQuery.print('#ele3'))
|
|
</button>
|
|
</div>
|
|
<div id="ele4" class="b">
|
|
<h3 class='avoid-this'>Element 4</h3>
|
|
<p>
|
|
Some really random text.
|
|
</p>
|
|
<button class="print-link avoid-this">
|
|
Print this in a new window, without this button and the title
|
|
</button>
|
|
</div>
|
|
<br/>
|
|
<button class="print-link" onclick="jQuery.print()">
|
|
Print page
|
|
</button>
|
|
</div>
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
<script>
|
|
window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')
|
|
</script>
|
|
<script src="../jQuery.print.js"></script>
|
|
<script type='text/javascript'>
|
|
//<![CDATA[
|
|
$(function() {
|
|
$("#ele2").find('.print-link').on('click', function() {
|
|
//Print ele2 with default options
|
|
$.print("#ele2");
|
|
});
|
|
$("#ele4").find('button').on('click', function() {
|
|
//Print ele4 with custom options
|
|
$("#ele4").print({
|
|
//Use Global styles
|
|
globalStyles : false,
|
|
//Add link with attrbute media=print
|
|
mediaPrint : false,
|
|
//Custom stylesheet
|
|
stylesheet : "http://fonts.googleapis.com/css?family=Inconsolata",
|
|
//Print in a hidden iframe
|
|
iframe : false,
|
|
//Don't print this
|
|
noPrintSelector : ".avoid-this",
|
|
//Add this at top
|
|
prepend : "Hello World!!!<br/>",
|
|
//Add this on bottom
|
|
append : "<br/>Buh Bye!"
|
|
});
|
|
});
|
|
// Fork https://github.com/sathvikp/jQuery.print for the full list of options
|
|
});
|
|
//]]>
|
|
</script>
|
|
</body>
|
|
</html>
|