sample_dropdown.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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. <link rel="stylesheet" href="../../../themes/nokia/ext-theme/default/360x640/custom.css" type="text/css" media="screen" />
  6. <script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
  7. <script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
  8. <script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>
  9. <style type="text/css" media="screen">
  10. body {
  11. font-size: 14px;
  12. padding: 10px;
  13. font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
  14. max-width: 640px;
  15. }
  16. p {
  17. margin: 30px 10px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div id="dropdown"></div>
  23. <p>Testing text</p>
  24. <script type="text/javascript" charset="utf-8">
  25. if (window.widget) {
  26. widget.setNavigationEnabled(false);
  27. }
  28. var init = function() {
  29. window.dropdown = new Nokia.DropDown({
  30. element: '#dropdown',
  31. show: function() {
  32. console.log("show");
  33. },
  34. hide: function() {
  35. console.log("hide");
  36. },
  37. items: [
  38. {
  39. label: "First option",
  40. value: 'some value',
  41. select: function(item, event) {
  42. console.log('Drop Down Clicked on: ' + item.label);
  43. }
  44. },
  45. {
  46. label: "Second option",
  47. value: 'some value',
  48. select: function(item, event) {
  49. console.log('Drop Down Clicked on: ' + item.label);
  50. }
  51. },
  52. {
  53. label: "Third option",
  54. value: 'some value',
  55. select: function(item, event) {
  56. console.log('Drop Down Clicked on: ' + item.label);
  57. }
  58. },
  59. {
  60. label: "Fourth option",
  61. value: 'some value',
  62. select: function(item, event) {
  63. console.log('Drop Down Clicked on: ' + item.label, item.value);
  64. }
  65. },
  66. {
  67. label: "Fifth option",
  68. value: 'some value',
  69. select: function(item, event) {
  70. console.log('Drop Down Clicked on: ' + item.label);
  71. }
  72. }
  73. ]
  74. });
  75. /*
  76. * Hide splash when its all done.
  77. */
  78. Nokia.hideSplash();
  79. };
  80. /*
  81. * Show splash while loading components.
  82. */
  83. Nokia.showSplash('<span>loading</span>');
  84. Nokia.use('dropdown', init);
  85. </script>
  86. </body>
  87. </html>