Content Editor Webpart（二）添加JQuery和html代碼

在上一篇（Content Editor Webpart（一）引用JQuery  ）中介紹瞭如何在Content Editor Webpart中引用JQuery， 這一篇介紹一下如果在Content Editor Webpart中添加html和JQuery代碼。

按照上一篇的步驟，編輯Content Editor Webpart的源代碼，輸入如下代碼：

<div style="height: 200px;">
<script type="text/javascript" src="/sites/apps/Style%20Library/jquery-1.10.2.min.js"></script>
<script> 
$(document).ready(function(){
    $("#btnStr").click(function(){
        $("#move").animate({left: '250px'});
    });
});
</script>

<button id="btnStr" οnclick="moveDiv()">Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. 
      <br/>To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div id="move" style="height: 100px; width: 100px; position: absolute; background: #98bf21;"></div> 
</div>

保存完之後，顯示成這樣：

點擊Start Animation,綠色的div塊就會移動起來：

 

點擊