zoukankan      html  css  js  c++  java
  • 封装jquery高亮插件?

    完整的高亮插件代码如下:

    //闭包限定命名空间
    (function ($) {
        $.fn.extend({
            "highLight": function (options) {
                //检测用户传进来的参数是否合法
                if (!isValid(options))
                    return this;
                var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
                return this.each(function () {  //这里的this 就是 jQuery对象。这里return 为了支持链式调用
                    //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
                    var $this = $(this); //获取当前dom 的 jQuery对象,这里的this是当前循环的dom
                    //根据参数来设置 dom的样式
                    $this.css({
                        backgroundColor: opts.background,
                        color: opts.foreground
                    });
                    //格式化高亮文本
                    var markup = $this.html();
                    markup = $.fn.highLight.format(markup);
                    $this.html(markup);
                });


            }
        });
        //默认参数
        var defaluts = {
            foreground: 'red',
            background: 'yellow'
        };
        //公共的格式化 方法. 默认是加粗,用户可以通过覆盖该方法达到不同的格式化效果。
        $.fn.highLight.format = function (str) {
            return "<strong>" + str + "</strong>";
        }
        //私有方法,检测参数是否合法
        function isValid(options) {
            return !options || (options && typeof options === "object") ? true : false;
        }
    })(window.jQuery);

     //调用
            //调用者覆盖 插件暴露的共公方法
            $.fn.highLight.format = function (txt) {
                return "<em>" + txt + "</em>"
            }
            $(function () {
                $("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件
            });
  • 相关阅读:
    IdentityServer4系列 | 资源密码凭证模式
    IdentityServer4系列 | 客户端凭证模式
    IdentityServer4系列 | 快速搭建简易项目
    Java9系列第九篇-对HTTP2协议的支持与非阻塞HTTP-API
    跨站资源共享CORS原理深度解析
    Java9系列第8篇-Module模块化编程
    Java9系列第7篇:Java.util.Optional优化与增强
    Kubernetes的Local Persistent Volumes使用小记
    CoProcessFunction实战三部曲之三:定时器和侧输出
    CoProcessFunction实战三部曲之二:状态处理
  • 原文地址:https://www.cnblogs.com/duanzhange/p/9325965.html
Copyright © 2011-2022 走看看