zoukankan      html  css  js  c++  java
  • jq插件的编写方法(自定义jq插件)---转

    本JQ插件例子是在你网站的文章结尾处添加你的版权。

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

    1 <script type="text/javascript">
    2 (function ($) {
    3     //这里放入插件代码
    4 })(jQuery);
    5 </script>

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

    接着给插件加入主体:

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

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

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

    1 <script type="text/javascript">
    2     $("#article-content").userCp();
    3 <script">

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

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

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

    1 <script type="text/javascript">
    2     $("#article-content").userCp({
    3         cpBy: " T ",
    4         url: 'http://www.qiandabao.com',
    5         size: "16px", 
    align: "right"
    });
    6 <script">
  • 相关阅读:
    django之orm单表查询
    python通过os.system()方法执行pscp提示却找不到该应用程序
    VUE 条件编译
    博客园Silence新主题美化,2021年最新更新!换个口味~
    JavaScript中数组的操作方法总汇
    Vue 上传材料(使用input)
    postgresql关于array类型有交集(包含查询数据任意元素,有重叠&&)的一些查询方法以及sqlalchemy语句实现
    linux便捷日志查询操作
    安装RabbitMQ
    v-model语法糖在input上组件上的使用
  • 原文地址:https://www.cnblogs.com/Evo1uti0n/p/6759602.html
Copyright © 2011-2022 走看看