zoukankan      html  css  js  c++  java
  • 写一个简单的JQ插件(例子)

    虽然现在 vue angular react 当道啊
    但是那 JQ还是有一席之地
    很多很多的小单位啊.其实还会用到

    我也放一个例子吧
    虽然我也不是很肯定有没有人写的比我更好啊
    但是我相信 我这个还是蛮实用的

    话不多说 丢代码

    JQ插件标准的封装代码如下,首先需要闭包:

    <scripttype="text/javascript">
    (function ($) {
     //这里放入插件代码
    })(jQuery);
    </script>

    这是jQuery官方的插件开发规范,这样写是作用是:
    1. 避免全局依赖。
    2. 避免第三方破坏。
    3. 兼容jQuery操作符’$’和’jQuery’
    接着给插件加入主体:

    <scripttype="text/javascript">
    (function ($) {
     $.fn.userCp = function(options) { //定义插件的名称,这里为userCp
     var dft = {
     //以下为该插件的属性及其默认值
     cpBy: "dafi", //版权所有者
     url: "http://www.dafi.cn", //所有者链接
     size: "12px", //版权文字大小
     align: "left" //版权文字位置,left || center || right
     };
     var ops = $.extend(dft,options);
     var style = 'style="font-size:' + ops.size + ';text-align:' + ops.align + ';"'; //调用默认的样式
     var cpTxt = '<p' + ' ' + style + '>此文章版权归<atarget="_blank"href="' + ops.url + '">' + ops.cpBy + '</a>所有</p>'; //生成版权文字的代码
     $(this).append(cpTxt); //把版权文字加入到想显示的div
     }
    })(jQuery);
    </script>

    OK了,这个插件已经完成了,接下来我们来看看调用的方式。

    比如你文章所在的div的id=”article-content”,那么在此div后面(先读取到了该div,该div才可以作为后面的JS的对象)加上JS代码:

    <scripttype="text/javascript">
     $("#article-content").userCp();
    <script">

    其实也不是一定要放到该div的后面,比如要放到head区域里的话,就要使用JQ的预读功能,也就是把页面所有的dom都读取完之后,才执行里面的JS:

    <scripttype="text/javascript">
    $(function(){ //官方解释:在dom文档载入完成后执行的函数
     $("#article-content").userCp();
    });
    <script">

    如果不想使用默认的内容,比如要修改版权所有者名字、网址、文字大小和靠右显示等,那就给这个插件传几个参数:

    <scripttype="text/javascript">
     $("#article-content").userCp({
     cpBy: " T ",
     url: "http://dafi.cn",
     size: "16px",
     align: "right"
     });
    <script">
    重拾梦想 改写人生
  • 相关阅读:
    Team饭来了团队作业3需求改进与系统设计
    2016012006崔啸寒 散列函数的应用及其安全性
    结对项目之四则运算
    《构建之法》第四章,第十七章所感
    2016012006小学四则运算练习软件项目报告
    读《构建之法》之一,二,十六章有感
    追梦软件路,愿不忘初心
    信息安全作业5 有关散列函数安全性的知识扩展
    结对作业:四则运算网页版
    Week4-作业1:阅读笔记与思考
  • 原文地址:https://www.cnblogs.com/wulibo/p/7233294.html
Copyright © 2011-2022 走看看