fixed-height.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>jQuery UI Portlet</title>
  6. <!-- jquery 1.4 and jquery ui 1.8 -->
  7. <link rel="stylesheet" href="../lib/themes/1.8/start/jquery-ui-1.8.5.custom.css" />
  8. <link rel="stylesheet" href="../css/jquery.portlet.css?v=1.1.3" />
  9. <script src="../lib/jquery-1.4.4.min.js" type="text/javascript"></script>
  10. <script src="../lib/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
  11. <!--<link rel="stylesheet" href="../lib/themes/1.9/start/jquery-ui-1.9.1.custom.min.css" />-->
  12. <!--<script src="../lib/jquery-1.8.3.js" type="text/javascript"></script>-->
  13. <!--<script src="../lib/themes/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>-->
  14. <script src="../script/jquery.portlet.pack.js?v=1.1.3"></script>
  15. <style>
  16. body {font-size: 13px;}
  17. .highlight-content {color: red;}
  18. </style>
  19. <script>
  20. $(function() {
  21. $('#portlet-demo').portlet({
  22. sortable: true,
  23. columns: [{
  24. width: 350,
  25. portlets: [{
  26. attrs: {
  27. id: 'feeds'
  28. },
  29. title: function() {
  30. var d = new Date();
  31. return 'Feeds(' + (d.getMonth() + 1) + '-' + d.getDay() + '日)' + '(高度:<span class="ui-state-error ui-corner-all">100</span>)';
  32. },
  33. content: {
  34. //设置区域内容属性
  35. style: {
  36. height: 100
  37. },
  38. type: 'text',
  39. text: '<ul><li>Feed item 1</li><li>Feed item 2</li></ul>',
  40. beforeShow: function(aa) {
  41. //alert('before show, content is: ' + aa);
  42. },
  43. afterShow: function() {
  44. //alert('after show');
  45. }
  46. },
  47. scripts: ['loaded-by-portlet.js']
  48. }, {
  49. attrs: {
  50. id: 'news'
  51. },
  52. title: function() {
  53. return 'News' + '(高度:<span class="ui-state-error ui-corner-all">100</span>)';
  54. },
  55. beforeRefresh: function() {
  56. alert("before refresh");
  57. },
  58. afterRefresh: function(data) {
  59. //alert("after refresh: " + data);
  60. },
  61. content: {
  62. style: {
  63. height: 100
  64. },
  65. type: 'text',
  66. text: function() {
  67. return $('#newsTemplate').html();
  68. //return $('#newsTemplate ul');
  69. }
  70. }
  71. }]
  72. }, {
  73. width: 500,
  74. portlets: [{
  75. title: function() {
  76. return 'Ajax' + '(高度:<span class="ui-state-error ui-corner-all">150</span>)';
  77. },
  78. content: {
  79. style: {
  80. height: 150
  81. },
  82. type: 'ajax',
  83. url: 'ajax.html'
  84. }
  85. }, {
  86. title: function() {
  87. return 'Ajax Json Datas' + '(高度:<span class="ui-state-error ui-corner-all">150</span>)';
  88. },
  89. content: {
  90. style: {
  91. height: 150
  92. },
  93. type: 'ajax',
  94. dataType: 'json',
  95. url: 'ajax-fixed-height.json',
  96. formatter: function(o, pio, data) {
  97. var ct = "<ul>";
  98. $.each(data, function() {
  99. ct += "<li>" + this.text + "</li>";
  100. });
  101. return ct + "</ul>";
  102. }
  103. }
  104. }]
  105. }]
  106. });
  107. });
  108. </script>
  109. </head>
  110. <body>
  111. <div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;">
  112. <p>
  113. <span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
  114. <strong>提示:</strong>设置content: {style: {height: 150}}固定高度
  115. </p>
  116. </div>
  117. <hr class='ui-widget-content' />
  118. <div id='portlet-demo'></div>
  119. <!-- 模板 -->
  120. <div id="newsTemplate" style="display:none">
  121. <ul>
  122. <li><a href='http://www.kafeitu.me/'>http://www.kafeitu.me</a></li>
  123. <li><a href='https://github.com/henryyan'>https://github.com/henryyan</a></li>
  124. </ul>
  125. </div>
  126. </body>
  127. </html>