View Single Post
Old 11-16-2012, 10:18 AM   #14
silver18
THE NOOB
silver18 ought to be getting tired of karma fortunes by now.silver18 ought to be getting tired of karma fortunes by now.silver18 ought to be getting tired of karma fortunes by now.silver18 ought to be getting tired of karma fortunes by now.silver18 ought to be getting tired of karma fortunes by now.silver18 ought to be getting tired of karma fortunes by now.silver18 ought to be getting tired of karma fortunes by now.silver18 ought to be getting tired of karma fortunes by now.silver18 ought to be getting tired of karma fortunes by now.silver18 ought to be getting tired of karma fortunes by now.silver18 ought to be getting tired of karma fortunes by now.
 
silver18's Avatar
 
Posts: 698
Karma: 1545625
Join Date: Jan 2012
Location: Italy
Device: Kindle Touch 5.3.2
Some more information... This time we're talking about
KINDLE MENU


I packed all relevant files in a zip file. Feel free to modify them!

1) First of all you need to add a menu template in your html page:
Code:
<script id="menuTemplate" type="text/x-jquery-tmpl">
    	<div class='temp-dialog'>
       	       	<div class='header'>
	   	       	<div class='close'/>
            	       	<div class='title'>
                	       	${titleText}
            	       	</div>
       	       	</div>
       	       	<ul class='overlaylist'>
		       	<li id='orientation' class='action'></li>
		       	<li id='bookmarks' class='action'></li>
            	       	<li id='deletions' class='action'></li>
		       	<li id='options' class='action'></li>
		       	<li id='lastread'></li>
       	       	</ul>
   	</div>
</script>
This contains:
- header with title and close button
- overlaylist with all menu entry you need.
You must use an unambiguous id for every entry (here we have orientation, bookmarks, deletions, options and lastread).
If you need to make one entry non-clickable, just remove the action class.


2) Then you need to link jquery.js, jquery.tmpl.js and some other js and css files (menu.js, windowing.js and menu.css):
Code:
<script type="text/javascript" src="resource/Lib/jquery.js"></script>
<script type="text/javascript" src="resource/Lib/jquery.tmpl.js"></script>
<script language="Javascript" src="resource/Javascripts/MenuDialog/menu.js"></script>
<script language="Javascript" src="resource/Javascripts/MenuDialog/windowing.js"></script>
<link rel="stylesheet" type="text/css" href="resource/CSS/MenuDialog/menu.css" />

3) And then you need to bind the onClick event to something in order to display the menu when tapping a button/image/div:
Code:
onClick="new KomicMenu().showMenu();"/>
You can change the function name, but remember to change it also in menu.js.


4) Once you set up everything, you can now enjoy yourself altering the code in menu.js to suit your needings. You can also play with menu.css!


5) Now you just need to change the path to every file according to where you placed the those files.



Download the package here!!!


EDIT: I forgot a nice screenshot!!!
Attached Thumbnails
Click image for larger version

Name:	screenshot_2012-10-25T16_34_53-0200.gif
Views:	91
Size:	26.8 KB
ID:	96244  

Last edited by silver18; 11-16-2012 at 10:21 AM.
silver18 is online now   Reply With Quote