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' }); //调用自定义 高亮插件
            });
  • 相关阅读:
    html+php超大视频切片上传
    html+php超大视频分片上传
    html+php超大视频上传前端
    html+php超大视频上传讨论
    html+php超大视频上传分享
    MATLAB的设置视点函数view
    matlab 绘制三维图并标注每个点的坐标
    Spring Boot 五种热部署方式,极速开发就是生产力!
    如何提高服务器的并发处理能力?硬核!
    WEB攻击手段及防御第3篇-CSRF
  • 原文地址:https://www.cnblogs.com/duanzhange/p/9325965.html
Copyright © 2011-2022 走看看