sample_imagedescription.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  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: 15px;
  13. font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
  14. }
  15. p {
  16. margin: 30px 10px;
  17. }
  18. #link01 {
  19. /* Style */
  20. }
  21. #container {
  22. max-width: 640px;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div id="container" class="ui-helper-clearfix">
  28. <img id="image01" src="images/image01.png" />
  29. <br /><br />
  30. <img id="image02" src="images/image01.png" />
  31. <br /><br />
  32. <div style="display:none;" id="description">
  33. Lorem <strong>ipsum dolor</strong> sit amet, <em style="color: red;">consectetur</em> adipisicing elit, sed do <em><strong>eiusmod tempor</strong></em> incididunt ut labore et dolore magna aliqua.
  34. Lorem <strong>ipsum dolor</strong> sit amet, <em style="color: red;">consectetur</em> adipisicing elit, sed do <em><strong>eiusmod tempor</strong></em> incididunt ut labore et dolore magna aliqua.
  35. Lorem <strong>ipsum dolor</strong> sit amet, <em style="color: red;">consectetur</em> adipisicing elit, sed do <em><strong>eiusmod tempor</strong></em> incididunt ut labore et dolore magna aliqua.
  36. </div>
  37. </div>
  38. <script type="text/javascript" charset="utf-8">
  39. if (window.widget) {
  40. widget.setNavigationEnabled(false);
  41. }
  42. var init = function() {
  43. window.image1 = new Nokia.ImageDescription({
  44. element: '#image01',
  45. description: jQuery('#description').html(),
  46. maxLines: 4,
  47. create: function() {
  48. console.log("Image Description: Create");
  49. },
  50. toggle: function() {
  51. console.log("Image Description: Toggle");
  52. }
  53. });
  54. window.image2 = new Nokia.ImageDescription({
  55. element: '#image02',
  56. description: 'This is a simple text description. You can just pass a text as the "description" option.',
  57. maxLines: 1
  58. });
  59. /*
  60. * Hide splash when its all done.
  61. */
  62. Nokia.hideSplash();
  63. };
  64. /*
  65. * Show splash while loading components.
  66. */
  67. Nokia.showSplash('<span>loading</span>');
  68. Nokia.use('imagedescription', init);
  69. </script>
  70. </body>
  71. </html>