LMS知識社群ePortfolioLogin
Position: Web system design > Assignments > 使用 jQuery 寫一個小型的 library (Team assignment)
Information  |  Submitted Assignments(12)
Item Discription
Late Submission No
Open Yes
Attribute Team assignment
Percentages 10%
Deadline
2011-03-28 12:00
Attachments
Content
希望透過實作,熟悉使用 Javascript + jQuery 操作 DOM 物件
例如,選單、拖曳、縮放、彈跳視窗、相片瀏覽等
 
範例:
<html>
<head>
    <style>
        #ctrl {color:#f00; cursor:pointer; border:1px solid #ccc; width:100px}
        #popup {
            position:absolute;
            padding:5px;
            border:2px solid #aaa;
            background:#ffc; display:none
        }
    </style>
   
    <script type="text/javascript" src='/html/jquery/jquery.js'></script>
    <script>
        $(document).ready(function(){
            $("#ctrl").bind('click', function() {
                showPopup(100, 100);
            });
        });
       
        function showPopup(x, y, w, h)
        {
            w = (w) ? w : 300;
            h = (h) ? h : 200;
            var style = {'left':x, 'top':y, 'width':w, 'height':h}
           
            $("<div id=popup>abc</div>").css(style).appendTo("body").fadeIn(1000);
        }
    </script>
</head>
<body>
    <div id=ctrl>open dialog</div>
</body>
</html>