分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

封装jquery高亮插件?

发布时间:2023-09-06 02:04责任编辑:傅花花关键词:暂无标签

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

//闭包限定命名空间
(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‘ }); //调用自定义 高亮插件 ???????});

封装jquery高亮插件?

原文地址:https://www.cnblogs.com/duanzhange/p/9325965.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved