icon.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  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() + '日)' + '(高度:<span class="ui-state-error ui-corner-all">100</span>)';
  33. },
  34. icon: 'ui-icon-signal-diag',
  35. content: {
  36. //设置区域内容属性
  37. style: {
  38. height: 100
  39. },
  40. type: 'text',
  41. text: '<ul><li>Feed item 1</li><li>Feed item 2</li></ul>',
  42. beforeShow: function(aa) {
  43. //alert('before show, content is: ' + aa);
  44. },
  45. afterShow: function() {
  46. //alert('after show');
  47. }
  48. },
  49. scripts: ['loaded-by-portlet.js']
  50. }, {
  51. attrs: {
  52. id: 'news'
  53. },
  54. title: function() {
  55. return 'News' + '(高度:<span class="ui-state-error ui-corner-all">100</span>)';
  56. },
  57. icon: 'ui-icon-document',
  58. content: {
  59. style: {
  60. height: 100
  61. },
  62. type: 'text',
  63. text: function() {
  64. return $('#newsTemplate').html();
  65. //return $('#newsTemplate ul');
  66. }
  67. }
  68. }]
  69. }, {
  70. width: 500,
  71. portlets: [{
  72. title: function() {
  73. return 'Ajax' + '(高度:<span class="ui-state-error ui-corner-all">150</span>)';
  74. },
  75. icon: 'ui-icon-info',
  76. content: {
  77. style: {
  78. height: 150
  79. },
  80. type: 'ajax',
  81. url: 'ajax.html'
  82. }
  83. }, {
  84. title: function() {
  85. return 'Ajax Json Datas' + '(高度:<span class="ui-state-error ui-corner-all">150</span>)';
  86. },
  87. icon: 'ui-icon-comment',
  88. content: {
  89. style: {
  90. height: 150
  91. },
  92. type: 'ajax',
  93. dataType: 'json',
  94. url: 'ajax-fixed-height.json',
  95. formatter: function(o, pio, data) {
  96. var ct = "<ul>";
  97. $.each(data, function() {
  98. ct += "<li>" + this.text + "</li>";
  99. });
  100. return ct + "</ul>";
  101. }
  102. }
  103. }]
  104. }]
  105. });
  106. });
  107. </script>
  108. </head>
  109. <body>
  110. <div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;">
  111. <p>
  112. <span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
  113. <strong>提示:</strong>和title属性同级,设置:<code>icon: 'ui-icon-document'</code>
  114. </p>
  115. </div>
  116. <hr class='ui-widget-content' />
  117. <div id='portlet-demo'></div>
  118. <!-- 模板 -->
  119. <div id="newsTemplate" style="display:none">
  120. <ul>
  121. <li><a href='http://www.kafeitu.me/'>http://www.kafeitu.me</a></li>
  122. <li><a href='https://github.com/henryyan'>https://github.com/henryyan</a></li>
  123. </ul>
  124. </div>
  125. </body>
  126. </html>