disable-drag.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  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: false,
  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() + '日)';
  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: "Ajax",
  76. content: {
  77. style: {
  78. height: 150
  79. },
  80. type: 'ajax',
  81. url: 'ajax.html'
  82. }
  83. }, {
  84. title: 'Ajax Json Datas',
  85. content: {
  86. style: {
  87. height: 150
  88. },
  89. type: 'ajax',
  90. dataType: 'json',
  91. url: 'ajax-fixed-height.json',
  92. formatter: function(o, pio, data) {
  93. var ct = "<ul>";
  94. $.each(data, function() {
  95. ct += "<li>" + this.text + "</li>";
  96. });
  97. return ct + "</ul>";
  98. }
  99. }
  100. }]
  101. }]
  102. });
  103. // 启用拖动
  104. $('#enable').button({
  105. icons: {
  106. primary: 'ui-icon-check'
  107. }
  108. }).click(function() {
  109. $('#portlet-demo').portlet('option', 'sortable', true);
  110. });
  111. // 禁用拖动
  112. $('#disable').button({
  113. icons: {
  114. primary: 'ui-icon-closethick'
  115. }
  116. }).click(function() {
  117. $('#portlet-demo').portlet('option', 'sortable', false);
  118. });
  119. });
  120. </script>
  121. </head>
  122. <body>
  123. <div>
  124. <button id='enable'>启用拖动</button>
  125. <button id='disable'>禁用拖动</button>
  126. <code>$('#portlet-demo').portlet('option', 'sortable', true);</code>
  127. </div>
  128. <hr class='ui-widget-content' />
  129. <div id='portlet-demo'></div>
  130. <!-- 模板 -->
  131. <div id="newsTemplate" style="display:none">
  132. <ul>
  133. <li><a href='http://www.kafeitu.me/'>http://www.kafeitu.me</a></li>
  134. <li><a href='https://github.com/henryyan'>https://github.com/henryyan</a></li>
  135. </ul>
  136. </div>
  137. </body>
  138. </html>