Skip to content

Commit 79ab409

Browse files
pablohesspablohess
committed
new layout for basic examples site
1 parent eb1afa0 commit 79ab409

17 files changed

Lines changed: 972 additions & 32 deletions

‎examples/basic.html‎

Lines changed: 47 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,25 @@
22
<html>
33
<head>
44
<title>jsPDF</title>
5+
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.17.custom.css">
56
<link rel="stylesheet" type="text/css" href="css/main.css">
7+
8+
<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
9+
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.17.custom.min.js"></script>
610
<script type="text/javascript" src="../libs/base64.js"></script>
711
<script type="text/javascript" src="../libs/sprintf.js"></script>
812
<script type="text/javascript" src="../jspdf.js"></script>
913
<script type="text/javascript" src="js/basic.js"></script>
14+
15+
<script>
16+
$(function() {
17+
$("#accordion").accordion({
18+
autoHeight: false,
19+
navigation: true
20+
});
21+
$(".button").button();
22+
});
23+
</script>
1024
</head>
1125

1226
<body>
@@ -15,27 +29,28 @@ <h1>jsPDF Demos</h1>
1529

1630
<p>Examples for using jsPDF with Data URIs below. Go <a href="https://github.com/MrRio/jsPDF">back to project homepage</a>.</p>
1731

18-
<h2>Simple two-page text document</h2>
19-
<pre>var doc = new jsPDF();
32+
<div id="accordion">
33+
<h2><a href="#">Simple two-page text document</a></h2>
34+
<div><p><pre>var doc = new jsPDF();
2035
doc.text(20, 20, 'Hello world!');
2136
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
2237
doc.addPage();
2338
doc.text(20, 20, 'Do you like that?');
2439

2540
// Output as Data URI
2641
doc.output('datauri');</pre>
27-
<a href="javascript:demoTwoPageDocument()">Run Code</a>
42+
<a href="javascript:demoTwoPageDocument()" class="button">Run Code</a></p></div>
2843

29-
<h2>Landscape document</h2>
30-
<pre>var doc = new jsPDF('landscape');
44+
<h2><a href="#">Landscape document</a></h2>
45+
<div><p><pre>var doc = new jsPDF('landscape');
3146
doc.text(20, 20, 'Hello landscape world!');
3247

3348
// Output as Data URI
3449
doc.output('datauri');</pre>
35-
<a href="javascript:demoLandscape()">Run Code</a>
50+
<a href="javascript:demoLandscape()" class="button">Run Code</a></p></div>
3651

37-
<h2>Different font sizes</h2>
38-
<pre>var doc = new jsPDF();
52+
<h2><a href="#">Different font sizes</a></h2>
53+
<div><p><pre>var doc = new jsPDF();
3954
doc.setFontSize(22);
4055
doc.text(20, 20, 'This is a title');
4156

@@ -44,10 +59,11 @@ <h2>Different font sizes</h2>
4459

4560
// Output as Data URI
4661
doc.output('datauri');</pre>
47-
<a href="javascript:demoFontSizes()">Run Code</a>
62+
<a href="javascript:demoFontSizes()" class="button">Run Code</a>
63+
</p></div>
4864

49-
<h2>Different font types</h2>
50-
<pre>var doc = new jsPDF();
65+
<h2><a href="#">Different font types</a></h2>
66+
<div><p><pre>var doc = new jsPDF();
5167

5268
doc.text(20, 20, 'This is the default font.');
5369

@@ -68,10 +84,10 @@ <h2>Different font types</h2>
6884

6985
// Output as Data URI
7086
doc.output('datauri');</pre>
71-
<a href="javascript:demoFontTypes()">Run Code</a>
87+
<a href="javascript:demoFontTypes()" class="button">Run Code</a></p></div>
7288

73-
<h2>Different text colors</h2>
74-
<pre>var doc = new jsPDF();
89+
<h2><a href="#">Different text colors</a></h2>
90+
<div><p><pre>var doc = new jsPDF();
7591

7692
doc.setTextColor(100);
7793
doc.text(20, 20, 'This is gray.');
@@ -90,10 +106,10 @@ <h2>Different text colors</h2>
90106

91107
// Output as Data URI
92108
doc.output('datauri');</pre>
93-
<a href="javascript:demoTextColors()">Run Code</a>
109+
<a href="javascript:demoTextColors()" class="button">Run Code</a></p></div>
94110

95-
<h2>Adding metadata</h2>
96-
<pre>var doc = new jsPDF();
111+
<h2><a href="#">Adding metadata</a></h2>
112+
<div><p><pre>var doc = new jsPDF();
97113
doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');
98114

99115
// Optional - set properties on the document
@@ -107,11 +123,10 @@ <h2>Adding metadata</h2>
107123

108124
// Output as Data URI
109125
doc.output('datauri');</pre>
110-
<a href="javascript:demoMetadata()">Run Code</a>
126+
<a href="javascript:demoMetadata()" class="button">Run Code</a></p></div>
111127

112-
113-
<h2>Example of user input</h2>
114-
<pre>var name = prompt('What is your name?');
128+
<h2><a href="#">Example of user input</a></h2>
129+
<div><p><pre>var name = prompt('What is your name?');
115130
var multiplier = prompt('Enter a number:');
116131
multiplier = parseInt(multiplier);
117132

@@ -134,10 +149,10 @@ <h2>Example of user input</h2>
134149
doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
135150
}
136151
doc.output('datauri');</pre>
137-
<a href="javascript:demoUserInput()">Run Code</a>
152+
<a href="javascript:demoUserInput()" class="button">Run Code</a></p></div>
138153

139-
<h2>Draw example: rectangles / squares</h2>
140-
<pre>var doc = new jsPDF();
154+
<h2><a href="#">Draw example: rectangles / squares</a></h2>
155+
<div><p><pre>var doc = new jsPDF();
141156

142157
doc.rect(20, 20, 10, 10); // empty square
143158

@@ -159,10 +174,10 @@ <h2>Draw example: rectangles / squares</h2>
159174

160175
// Output as Data URI
161176
doc.output('datauri');</pre>
162-
<a href="javascript:demoRectangles()">Run Code</a>
177+
<a href="javascript:demoRectangles()" class="button">Run Code</a></p></div>
163178

164-
<h2>Draw example: lines</h2>
165-
<pre>var doc = new jsPDF();
179+
<h2><a href="#">Draw example: lines</a></h2>
180+
<div><p><pre>var doc = new jsPDF();
166181

167182
doc.line(20, 20, 60, 20); // horizontal line
168183

@@ -191,10 +206,10 @@ <h2>Draw example: lines</h2>
191206

192207
// Output as Data URI
193208
doc.output('datauri');</pre>
194-
<a href="javascript:demoLines()">Run Code</a>
209+
<a href="javascript:demoLines()" class="button">Run Code</a></p></div>
195210

196-
<h2>Draw circles and ellipses: lines</h2>
197-
<pre>var doc = new jsPDF();
211+
<h2><a href="#">Draw example: circles and ellipses</a></h2>
212+
<div><p><pre>var doc = new jsPDF();
198213

199214
doc.ellipse(40, 20, 10, 5);
200215

@@ -208,8 +223,8 @@ <h2>Draw circles and ellipses: lines</h2>
208223

209224
// Output as Data URI
210225
doc.output('datauri');</pre>
211-
<a href="javascript:demoCircles()">Run Code</a>
212-
226+
<a href="javascript:demoCircles()" class="button">Run Code</a></p></div>
227+
</div>
213228

214229
<script type="text/javascript">
215230
// Google Analytics

‎examples/css/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png‎

180 Bytes
Loading

‎examples/css/smoothness/images/ui-bg_flat_75_ffffff_40x100.png‎

178 Bytes
Loading

‎examples/css/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png‎

120 Bytes
Loading

‎examples/css/smoothness/images/ui-bg_glass_65_ffffff_1x400.png‎

105 Bytes
Loading

‎examples/css/smoothness/images/ui-bg_glass_75_dadada_1x400.png‎

111 Bytes
Loading

‎examples/css/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png‎

110 Bytes
Loading

‎examples/css/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png‎

119 Bytes
Loading

‎examples/css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png‎

101 Bytes
Loading

‎examples/css/smoothness/images/ui-icons_222222_256x240.png‎

4.27 KB
Loading

0 commit comments

Comments
 (0)