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" onclick="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块就会移动起来:
点击
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。