sample_iconicmenu.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="../../../themes/themeroller/default-theme/ui.all.css" type="text/css" media="screen" />
  5. <script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
  6. <script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
  7. <script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>
  8. <style type="text/css" media="screen">
  9. body {
  10. padding: 0 10px;
  11. font-size: 14px;
  12. font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
  13. max-width: 640px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div id="menu"></div>
  19. <script type="text/javascript" charset="utf-8">
  20. if (window.widget) {
  21. widget.setNavigationEnabled(false);
  22. }
  23. var init = function() {
  24. var tabs = new Nokia.IconicMenu({
  25. element: '#menu',
  26. items: [
  27. {
  28. label: "favorites",
  29. icon: 'images/icon1.png',
  30. select: function(item, event) {
  31. alert('Iconic Menu Clicked on: ' + item.label);
  32. }
  33. },
  34. {
  35. label: "e-mails",
  36. icon: 'images/icon2.png',
  37. select: function(item, event) {
  38. alert('Iconic Menu Clicked on: ' + item.label);
  39. }
  40. },
  41. {
  42. label: "chat",
  43. icon: 'images/icon3.png',
  44. select: function(item, event) {
  45. alert('Iconic Menu Clicked on: ' + item.label);
  46. }
  47. },
  48. {
  49. label: "trash",
  50. icon: 'images/icon4.png',
  51. select: function(item, event) {
  52. alert('Iconic Menu Clicked on: ' + item.label);
  53. }
  54. },
  55. {
  56. label: "save",
  57. icon: 'images/icon5.png',
  58. select: function(item, event) {
  59. alert('Iconic Menu Clicked on: ' + item.label);
  60. }
  61. },
  62. {
  63. label: "gallery",
  64. icon: 'images/icon6.png',
  65. select: function(item, event) {
  66. alert('Iconic Menu Clicked on: ' + item.label);
  67. }
  68. },
  69. {
  70. label: "drafts",
  71. icon: 'images/icon7.png',
  72. select: function(item, event) {
  73. alert('Iconic Menu Clicked on: ' + item.label);
  74. }
  75. },
  76. {
  77. label: "history",
  78. icon: 'images/icon8.png',
  79. select: function(item, event) {
  80. alert('Iconic Menu Clicked on: ' + item.label);
  81. }
  82. },
  83. {
  84. label: "past",
  85. icon: 'images/icon9.png',
  86. select: function(item, event) {
  87. alert('Iconic Menu Clicked on: ' + item.label);
  88. }
  89. },
  90. {
  91. label: "Allert",
  92. icon: 'images/icon10.png',
  93. select: function(item, event) {
  94. alert('Iconic Menu Clicked on: ' + item.label);
  95. }
  96. },
  97. {
  98. label: "label",
  99. icon: 'images/icon1.png',
  100. select: function(item, event) {
  101. alert('Iconic Menu Clicked on: ' + item.label);
  102. }
  103. },
  104. {
  105. label: "search",
  106. icon: 'images/icon2.png',
  107. select: function(item, event) {
  108. alert('Iconic Menu Clicked on: ' + item.label);
  109. }
  110. }
  111. ]
  112. });
  113. /*
  114. * Hide splash when its all done.
  115. */
  116. Nokia.hideSplash();
  117. };
  118. /*
  119. * Show splash while loading components.
  120. */
  121. Nokia.showSplash('<span>loading</span>');
  122. Nokia.use('iconicmenu', init);
  123. </script>
  124. </body>
  125. </html>