Skip to content

Instantly share code, notes, and snippets.

@avk

avk/new_footer_contents_link.html

Created December 12, 2011 00:52
Show Gist options
  • Save avk/1463879 to your computer and use it in GitHub Desktop.
Save avk/1463879 to your computer and use it in GitHub Desktop.
Download ZIP
SaaS book #39 revised for one HTML file per jQuery Mobile page
Raw
new_index.html
<!DOCTYPE html> <!-- NOTE: #39b HTML 5 doctype -->
<html lang="en">
<head>
<meta charset="utf-8">
<title> <!-- NOTE: #39c unique title -->
Engineering Long-Lasting Software: An Agile Approach Using SaaS and Cloud Computing
</title>
<!-- NOTE: #39d this should all be inside each page's HEAD element -->
<!-- PhoneGap -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.1.0.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css">
<script type="text/javascript" charset="utf-8" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile.config.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0.min.js"></script>
<!-- Syntax highlighter 3.0.83 -->
<script src="js/XRegExp.js" type="text/javascript" charset="utf-8"></script>
<script src="js/shCore.js" type="text/javascript" charset="utf-8"></script>
<script src="js/shBrushRuby.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/shCore.css">
<link rel="stylesheet" href="css/shThemeDefault.css">
<!-- ebook-specific -->
<link rel="stylesheet" href="css/ebookapp.css">
<script src="js/toc.js" type="text/javascript" charset="utf-8"></script> <!-- NOTE #39e new link to toc.js -->
<script type="text/javascript" charset="utf-8" src="js/ebookapp.js"></script>
<!-- NOTE: #39d end of this should all be inside each page's HEAD element -->
</head>
<body>
<div data-role="page" id="cover" data-url="index.html"> <!-- NOTE: #39f data-url set to this filename -->
<div data-role="content">
<img id="cover-landscape" src="cover/cover-landscape.jpg" width="1024" />
<img id="cover-portrait" src="cover/cover-portrait.jpg" width="768" />
</div>
<div data-role="footer" data-id="global-nav" data-position="fixed" class="ui-bar">
<div class="contents-nav" data-role="controlgroup" data-type="horizontal">
<!-- NOTE: #39g updated Contents link -->
<a href="toc.html" data-role="button" data-inline="true" data-icon="grid" data-transition="pop">Contents</a>
<!-- NOTE: #16 no more navigation links if this is **NOT** a chapter_* or section_* page -->
</div>
<div class="page-nav" data-role="controlgroup" data-type="horizontal" data-inline="true">
<a class="prev-page" href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">Prev</a>
<a class="next-page" href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>
</div>
</div>
</div>
<!-- NOTE: #39a the cover is the only page div that remains in index.html -->
</body>
</html>
Raw
new_page.html
<!DOCTYPE html> <!-- NOTE: #39b HTML 5 doctype -->
<html lang="en">
<head>
<meta charset="utf-8">
<title> <!-- NOTE: #39c unique title -->
Page title here!
</title>
<!-- NOTE: #39d this should all be inside each page's HEAD element -->
<!-- PhoneGap -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.1.0.js"></script>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css">
<script type="text/javascript" charset="utf-8" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile.config.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0.min.js"></script>
<!-- Syntax highlighter 3.0.83 -->
<script src="js/XRegExp.js" type="text/javascript" charset="utf-8"></script>
<script src="js/shCore.js" type="text/javascript" charset="utf-8"></script>
<script src="js/shBrushRuby.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/shCore.css">
<link rel="stylesheet" href="css/shThemeDefault.css">
<!-- ebook-specific -->
<link rel="stylesheet" href="css/ebookapp.css">
<script src="js/toc.js" type="text/javascript" charset="utf-8"></script> <!-- NOTE #39e new link to toc.js -->
<script type="text/javascript" charset="utf-8" src="js/ebookapp.js"></script>
<!-- NOTE: #39d end of this should all be inside each page's HEAD element -->
</head>
<body>
<div data-role="page" id="unique-page-id-here"> <!-- NOTE: keep unique page id, don't need data-url -->
<div data-role="content">
<!-- NOTE: page content goes here -->
</div>
<div data-role="footer" data-id="global-nav" data-position="fixed" class="ui-bar">
<div class="contents-nav" data-role="controlgroup" data-type="horizontal">
<!-- NOTE: #39g updated Contents link -->
<a href="toc.html" data-role="button" data-inline="true" data-icon="grid" data-transition="pop">Contents</a>
<!-- NOTE: #39i / #17 additional navigation links if this is a chapter_* or section_* page -->
<optgroup label="Chapter #">
<option value="section_#.0.html">#.0 Section name</option>
<option value="section_#.1.html">#.1 Section name</option>
<option value="section_#.2.html">#.2 Section name</option>
<option value="section_#.3.html">#.3 Section name</option>
<!-- rest of Chapter # sections -->
</optgroup>
</div>
<div class="page-nav" data-role="controlgroup" data-type="horizontal" data-inline="true">
<a class="prev-page" href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">Prev</a>
<a class="next-page" href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</a>
</div>
</div>
</div>
<!-- NOTE: #39h there is only one page div per file and nothing else in <body> -->
</body>
</html>
Raw
new_toc.js
// Replace everything in js/toc.js with the following:
// This JS array is an ordered collection of every single HTML file that comprises the book,
// from the cover (index.html) to the very last page of the appendix or whatever you choose to be last.
// The order is *extremely important* as it determines the navigation via swiping and prev / next links.
var TOC = [
"index.html",
"titlepage.html",
"cip.html",
"dedication.html",
"toc.html",
...
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment