single-view.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  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. singleView: true,
  24. columns: [{
  25. width: 350,
  26. portlets: [{
  27. attrs: {
  28. id: 'feeds'
  29. },
  30. title: function() {
  31. var d = new Date();
  32. return 'Feeds(' + (d.getMonth() + 1) + '-' + d.getDay() + '日)';
  33. },
  34. singleView: {
  35. width: function() {
  36. return $(this).parents('.ui-portlet').width() * 0.5;
  37. },
  38. height: 500,
  39. enable: function() {
  40. //alert('触发了单视图模式');
  41. },
  42. recovery: function() {
  43. //alert('还原了单视图模式');
  44. }
  45. },
  46. content: {
  47. //设置区域内容属性
  48. style: {
  49. height: 100
  50. },
  51. type: 'text',
  52. text: '<ul><li>Feed item 1</li><li>Feed item 2</li></ul>',
  53. beforeShow: function(aa) {
  54. //alert('before show, content is: ' + aa);
  55. },
  56. afterShow: function() {
  57. //alert('after show');
  58. }
  59. },
  60. scripts: ['loaded-by-portlet.js']
  61. }, {
  62. attrs: {
  63. id: 'news'
  64. },
  65. title: 'News',
  66. beforeRefresh: function() {
  67. alert("before refresh");
  68. },
  69. afterRefresh: function(data) {
  70. //alert("after refresh: " + data);
  71. },
  72. content: {
  73. style: {
  74. height: 100
  75. },
  76. type: 'text',
  77. text: function() {
  78. return $('#newsTemplate').html();
  79. //return $('#newsTemplate ul');
  80. }
  81. }
  82. }]
  83. }, {
  84. width: 500,
  85. portlets: [{
  86. title: 'Ajax',
  87. content: {
  88. style: {
  89. height: 150
  90. },
  91. type: 'ajax',
  92. url: 'ajax.html'
  93. }
  94. }, {
  95. title: 'Ajax Json Datas',
  96. content: {
  97. style: {
  98. height: 150
  99. },
  100. singleView: {
  101. width: function() {
  102. return $(this).parents('.ui-portlet').width() * 0.5;
  103. },
  104. height: 500,
  105. enable: function() {
  106. //alert('触发了单视图模式');
  107. },
  108. recovery: function() {
  109. //alert('还原了单视图模式');
  110. }
  111. },
  112. type: 'ajax',
  113. dataType: 'json',
  114. url: 'ajax-fixed-height.json',
  115. formatter: function(o, pio, data) {
  116. var ct = "<ul>";
  117. $.each(data, function() {
  118. ct += "<li>" + this.text + "</li>";
  119. });
  120. return ct + "</ul>";
  121. }
  122. }
  123. }]
  124. }]
  125. });
  126. });
  127. </script>
  128. </head>
  129. <body>
  130. <div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;">
  131. <p>
  132. <span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
  133. <strong>提示:</strong><b><i>双击</b></i>标题栏启用/恢复单项视图模式
  134. <span>,设置参数:singleView: true</span>
  135. </p>
  136. </div>
  137. <hr class='ui-widget-content' />
  138. <div id='portlet-demo'></div>
  139. <!-- 模板 -->
  140. <div id="newsTemplate" style="display:none">
  141. <ul>
  142. <li><a href='http://www.kafeitu.me/'>http://www.kafeitu.me</a></li>
  143. <li><a href='https://github.com/henryyan'>https://github.com/henryyan</a></li>
  144. </ul>
  145. </div>
  146. </body>
  147. </html>