sample_miniview.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  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. font-size: 14px;
  11. padding: 5px;
  12. font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
  13. }
  14. p {
  15. margin: 30px 10px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <h1>Nokia.MiniView - Sample</h1>
  21. <br/><br/>
  22. <div id="miniview1"></div>
  23. <label>Text only</label>
  24. <div id="miniview2"></div>
  25. <label>Hybrid</label>
  26. <div id="miniview3"></div>
  27. <label>Landscpae image</label>
  28. <div id="miniview4"></div>
  29. <label>Multiple images</label>
  30. <div id="miniview5"></div>
  31. <label>Hybrid (Horizontal)</label>
  32. <div id="miniview6"></div>
  33. <br style="clear: both;" />
  34. <br style="clear: both;" />
  35. <br /><br />
  36. <script type="text/javascript" charset="utf-8">
  37. var init = function() {
  38. window.miniview1 = new Nokia.MiniView({
  39. element: '#miniview1',
  40. content: 'Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor'
  41. });
  42. window.miniview2 = new Nokia.MiniViewHybrid({
  43. element: '#miniview2',
  44. image: 'images/carousel01.jpg',
  45. text: 'Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum',
  46. });
  47. window.miniview3 = new Nokia.MiniViewLandscapeImage({
  48. element: '#miniview3',
  49. image: 'images/carousel02.jpg',
  50. });
  51. window.miniview4 = new Nokia.MiniViewMultipleImages({
  52. element: '#miniview4',
  53. images: [
  54. 'images/carousel01.jpg',
  55. 'images/carousel02.jpg',
  56. 'images/carousel03.jpg',
  57. 'images/carousel04.jpg'
  58. ]
  59. });
  60. window.miniview5 = new Nokia.MiniViewHybridHorizontal({
  61. element: '#miniview5',
  62. image: 'images/carousel05.jpg',
  63. text: 'Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem',
  64. });
  65. window.miniview6 = new Nokia.MiniViewGrid({
  66. element: '#miniview6',
  67. rows: [
  68. {
  69. image: 'images/carousel01.jpg',
  70. text: 'Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum',
  71. },
  72. {
  73. image: 'images/carousel02.jpg',
  74. text: 'Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum',
  75. }
  76. ]
  77. });
  78. /*
  79. * Hide splash when its all done.
  80. */
  81. Nokia.hideSplash();
  82. };
  83. /*
  84. * Show splash while loading components.
  85. */
  86. Nokia.showSplash('<span>loading</span>');
  87. Nokia.use('miniview', init);
  88. </script>
  89. </body>
  90. </html>