123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>jQuery UI Portlet</title>
- <!-- jquery 1.4 and jquery ui 1.8 -->
- <link rel="stylesheet" href="../lib/themes/1.8/start/jquery-ui-1.8.5.custom.css" />
- <link rel="stylesheet" href="../css/jquery.portlet.css?v=1.1.3" />
- <script src="../lib/jquery-1.4.4.min.js" type="text/javascript"></script>
- <script src="../lib/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
- <!--<link rel="stylesheet" href="../lib/themes/1.9/start/jquery-ui-1.9.1.custom.min.css" />-->
- <!--<script src="../lib/jquery-1.8.3.js" type="text/javascript"></script>-->
- <!--<script src="../lib/themes/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>-->
- <script src="../script/jquery.portlet.pack.js?v=1.1.3"></script>
- <style>
- body {font-size: 13px;}
- .highlight-content {color: red;}
- </style>
- <script>
- $(function() {
- $('#portlet-demo').portlet({
- sortable: true,
- singleView: true,
- columns: [{
- width: 350,
- portlets: [{
- attrs: {
- id: 'feeds'
- },
- title: function() {
- var d = new Date();
- return 'Feeds(' + (d.getMonth() + 1) + '-' + d.getDay() + '日)' + '(高度:<span class="ui-state-error ui-corner-all">100</span>)';
- },
- icon: 'ui-icon-signal-diag',
- content: {
- //设置区域内容属性
- style: {
- height: 100
- },
- type: 'text',
- text: '<ul><li>Feed item 1</li><li>Feed item 2</li></ul>',
- beforeShow: function(aa) {
- //alert('before show, content is: ' + aa);
- },
- afterShow: function() {
- //alert('after show');
- }
- },
- scripts: ['loaded-by-portlet.js']
- }, {
- attrs: {
- id: 'news'
- },
- title: function() {
- return 'News' + '(高度:<span class="ui-state-error ui-corner-all">100</span>)';
- },
- icon: 'ui-icon-document',
- content: {
- style: {
- height: 100
- },
- type: 'text',
- text: function() {
- return $('#newsTemplate').html();
- //return $('#newsTemplate ul');
- }
- }
- }]
- }, {
- width: 500,
- portlets: [{
- title: function() {
- return 'Ajax' + '(高度:<span class="ui-state-error ui-corner-all">150</span>)';
- },
- icon: 'ui-icon-info',
- content: {
- style: {
- height: 150
- },
- type: 'ajax',
- url: 'ajax.html'
- }
- }, {
- title: function() {
- return 'Ajax Json Datas' + '(高度:<span class="ui-state-error ui-corner-all">150</span>)';
- },
- icon: 'ui-icon-comment',
- content: {
- style: {
- height: 150
- },
- type: 'ajax',
- dataType: 'json',
- url: 'ajax-fixed-height.json',
- formatter: function(o, pio, data) {
- var ct = "<ul>";
- $.each(data, function() {
- ct += "<li>" + this.text + "</li>";
- });
- return ct + "</ul>";
- }
- }
- }]
- }]
- });
- });
- </script>
- </head>
- <body>
- <div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;">
- <p>
- <span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
- <strong>提示:</strong>和title属性同级,设置:<code>icon: 'ui-icon-document'</code>
- </p>
- </div>
- <hr class='ui-widget-content' />
- <div id='portlet-demo'></div>
- <!-- 模板 -->
- <div id="newsTemplate" style="display:none">
- <ul>
- <li><a href='http://www.kafeitu.me/'>http://www.kafeitu.me</a></li>
- <li><a href='https://github.com/henryyan'>https://github.com/henryyan</a></li>
- </ul>
- </div>
- </body>
- </html>
|