/demos/navigation1.html

https://github.com/abstractmatter/kaiten · HTML · 84 lines · 82 code · 2 blank · 0 comment · 0 complexity · f14c6ec9b85483ff778abd2da605a3a6 MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. 	<head>
    4. 

  4. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5. 

  5. 		<title>Kaiten</title>
    6. 

  6. 		<meta name="apple-mobile-web-app-capable" content="yes"/>
    7. 

  7. 		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    8. 

  8. 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    9. 

  9. 		<link rel="icon" type="image/png" href="../images/kaiten-boxed-favicon.png" sizes="16x16" />
    10. 

  10. 		<link rel="stylesheet" type="text/css" href="../css/kaiten.min.css" />
    11. 

  11. 		<script type="text/javascript" src="../js/jquery.min.js">&#160;</script>
    12. 

  12. 		<script type="text/javascript" src="../js/jquery-ui.custom.min.js">&#160;</script>
    13. 

  13. 		<script type="text/javascript" src="../js/kaiten.min.js">&#160;</script>
    14. 

  14. 		<script type="text/javascript" src="../js/jquery.ba-resize.min.js">&#160;</script>
    15. 

  15. 	</head>
    16. 

  16. 	<body>
    17. 

  17. 		<div id="container"></div>
    18. 

  18. 		<div id="custom-options-text" class="hidden">
    19. 

  19. 			You can add your custom options here.<br /><br />
    20. 

  20. 			For more information and documentation, please visit our website :<br /><br />
    21. 

  21. 			<a href="http://www.nectil.com/kaiten" target="_blank">http://www.nectil.com/kaiten</a>
    22. 

  22. 		</div>
    23. 

  23. 		<script type="text/javascript">
    24. 

  24. 			(function($){
    25. 

  25. 				// keep a reference to Kaiten's container
    26. 

  26. 				$K = $('#container');
    27. 

  27. 				// initialize Kaiten
    28. 

  28. 				$K.kaiten({ 
    29. 

  29. 					// 3 panels max. on the screen
    30. 

  30. 					columnWidth : '33%',
    31. 

  31. 					optionsSelector : '#custom-options-text',
    32. 

  32. 					startup : function(dataFromURL){
    33. 

  33. 						// handle URL parameters sent when opening a panel in a new tab
    34. 

  34. 						if (dataFromURL && dataFromURL.kConnector) // checking kConnector allows the home panel to be opened in a new tab
    35. 

  35. 						{
    36. 

  36. 							this.kaiten('load', dataFromURL);
    37. 

  37. 						}
    38. 

  38. 						else
    39. 

  39. 						{
    40. 

  40. 							// create the home panel HTML...
    41. 

  41. 							var $navBlock = kTemplater.jQuery('block.navigation');
    42. 

  42. 							
    43. 

  43. 							$navBlock.append(kTemplater.jQuery('line.summary', {
    44. 

  44. 								label	: 'A basic navigation example',
    45. 

  45. 								info	: 'Click on any navigation item...<br /><br />'+
    46. 

  46. 											'You can also ctrl-click to open the target panel in a new tab',
    47. 

  47. 								iconURL : 'images/navigation-32.png'
    48. 

  48. 							}));
    49. 

  49. 							// ...add navigation to a page on our server...
    50. 

  50. 							$navBlock.append(kTemplater.jQuery('line.navigation', {
    51. 

  51. 								label : 'Load content from panel1.html',
    52. 

  52. 								data : { kConnector:"html.page", url:"sample-navigation/panel1.html", kTitle:"Panel 1" },
    53. 

  53. 								iconURL : 'sample-navigation/images/star-16.png'
    54. 

  54. 							}));
    55. 

  55. 							// ...add navigation to a page on our server...
    56. 

  56. 							$navBlock.append(kTemplater.jQuery('line.navigation', {
    57. 

  57. 								label : 'Load content from panel2.html',
    58. 

  58. 								data : { kConnector:"html.page", url:"sample-navigation/panel2.html", kTitle:"Panel 2" },
    59. 

  59. 								iconURL : 'sample-navigation/images/star-16.png'
    60. 

  60. 							}));
    61. 

  61. 							// ...add navigation to a page on our server...
    62. 

  62. 							$navBlock.append(kTemplater.jQuery('line.navigation', {
    63. 

  63. 								label : 'Load content from panel3.html',
    64. 

  64. 								data : { kConnector:"html.page", url:"sample-navigation/panel3.html", kTitle:"Panel 3" },
    65. 

  65. 								iconURL : 'sample-navigation/images/star-16.png'
    66. 

  66. 							}));
    67. 

  67. 							// ...add navigation to a page outside our server
    68. 

  68. 							$navBlock.append(kTemplater.jQuery('line.navigation', {
    69. 

  69. 								label : 'Load external content from www.nectil.com/kaiten',
    70. 

  70. 								data : { kConnector:"iframe", url:"http://www.nectil.com/kaiten" },
    71. 

  71. 								iconURL : 'sample-navigation/images/earth-16.png'
    72. 

  72. 							}));	
    73. 

  73. 							
    74. 

  74. 							this.kaiten('load', function(data, $panel, $kaiten){
    75. 

  75. 								$panel.kpanel('setTitle', 'Basic navigation');							
    76. 

  76. 								return kTemplater.jQuery('panel.body', { content : $navBlock });
    77. 

  77. 							});
    78. 

  78. 						}
    79. 

  79. 					}
    80. 

  80. 				});
    81. 

  81. 			})(jQuery);
    82. 

  82. 		</script>			
    83. 

  83. 	</body>
    84. 

  84. </html>
    85.