jquery 编写插件入门

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.min.js"></script>

<style>
a{ color:#514f42;text-decoration:none;}
a:hover{ color:#669900;}
#content{ width:650px; margin:30px auto; overflow:hidden;}
.list{ width:650px; padding:0 0 20px 0; margin:0 0 20px 0; border-bottom:1px dashed #666633;}
.list .date{ float:left;width:76px; height:58px; margin:0 20px 0 0; padding:2px 0 0; background:#514F42;text-transform: uppercase;text-align: center;font-size:10px;font-weight: bold; color:#FFF;}
.list b{display:block; font-size:40px; color:#FFF; line-height:40px;}
.list .meta{margin:0 0 25px 0; color:#979680;}
.list h2 a{font-size: 1.8em; }
.list p{ display:block; line-height:18px;}
</style>

<script>
$.fn.plugin = function(options) {
  var opts = $.extend(options);
  
  var content =
    "<div class='list'>"+
    "<p class='date'>September <b>03</b></p>"+
    "<h2><a href='http://www.csrcode.cn/html/txdm/tcys/1293.htm'>"+opts.text+"</a></h2>"+
    "<p class='meta'>来自：<a href='/'>CsrCode.Cn</a> | 编辑：<a href='/'>"+opts.bianji+"</a> | <a href='#'>暂无回复 &raquo;</a></p>"+
    "<p>一款在网页中弹出层的实例代码，基于JS+css，本实例包含两个实例，一个是标准弹出层，另一个是弹出一个可拖动的层，并可设置层的标题，容器内容等，这是一个基本的层弹出单元，所有复杂的层弹出代码都可在此基础上进一步扩展。</p>"+
    "</div>";

  $("#content").append(content);
};
</script>

<script type="text/javascript">
$(document).ready(function(){
    $(this).plugin({
        text: '一款简单的网页弹出层JS代码',
        bianji: '芯晴网页特效'
    });
});
</script>

<div id="content"></div>

 

转载于:https://www.cnblogs.com/hellowzd/p/6288431.html