sooka_maintenance
/
bsdsjj_siping


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
							<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Portlet</title>
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css" />
    <!-- jquery 1.4 and jquery ui 1.8 -->
    <link rel="stylesheet" href="../lib/themes/bootstrap/jquery-ui-1.8.16.custom.css" />
    <link rel="stylesheet" href="../lib/themes/bootstrap/jquery.ui.1.8.16.ie.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,
            create: function() {
                //alert('created portlet.');
            },
            removeItem: function() {
                alert('after remove');
            },
            columns: [{
                width: 400,
                portlets: [{
                    attrs: {
                        id: 'feeds'
                    },
                    title: function() {
                        var d = new Date();
                        return 'Feeds(' + (d.getMonth() + 1) + '-' + d.getDay() + '日)';
                    },
                    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: '主题整合支持',
                    beforeRefresh: function() {
                        alert("before refresh");
                    },
                    afterRefresh: function(data) {
                        //alert("after refresh: " + data);
                    },
                    content: {
                        style: {
                            height: '300'
                        },
                        type: 'text',
                        text: function() {
                            return $('#newsTemplate').html();
                            //return $('#newsTemplate ul');
                        }
                    }
                }]
            }, {
                width: 350,
                portlets: [{
                    title: 'Code',
                    content: {
                        type: 'text',
                        text: function() {
                            return $('#code').html();
                        }
                    }
                }, {
                    title: 'Ajax 错误',
                    content: {
                        type: 'ajax',
                        url: 'noexsit.html',
                        error: function() {
                            $(this).append('<br/><br/>捕获到ajax错误');
                            // alert('出错了');
                        }
                    }
                }, {
                    title: 'Table',
                    content: {
                        type: 'text',
                        text: function() {
                            return $('#tableTemplate').html();
                        }
                    }
                }]
            }]
        });
    });
    </script>
</head>
<body>
    <div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;">
        <p>
            <i class="icon-heart"></i>使用Bootstrap主题（由jQuery UI的Bootstrap主题风格支持）
        </p>
    </div>
    <hr class='ui-widget-content' />
    <div id='portlet-demo'></div>

    <!-- 模板 -->
    <div id="newsTemplate" style="display:none">
        <a href="http://addyosmani.github.com/jquery-ui-bootstrap/">http://addyosmani.github.com/jquery-ui-bootstrap/</a>
        <hr/>
        <p class="text-warning">警告信息。</p>
        <p class="text-error">错误信息。</p>
        <p class="text-info">提示信息。</p>
        <p class="text-success">成功信息。</p>
        <button class="btn btn-primary">Bootstrap的按钮</button>
    </div>

    <div id="tableTemplate" style="display:none">
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
        </table>
    </div>

    <div id="code" style="display:none">
        <code>.highlight-content {color: red;}</code>
    </div>
</body>
</html>