cmd_把tooltip做成符合cmd规范

最新推荐文章于 2023-03-13 15:51:49 发布

田江

最新推荐文章于 2023-03-13 15:51:49 发布

阅读量187

点赞数

分类专栏： jQuery 文章标签：模块化 CMD tooltip

本文链接：https://blog.csdn.net/jiang7701037/article/details/79144265

版权

jQuery 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

效果图：

代码：

解释一下：sea.js在网上可以自行下载

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            list-style: none;
        }

        #box1{
            position:relative;
            width:200px;
            height:150px;
            background-color: brown;
        }

        #box2{
            position:relative;
            width:300px;
            height:200px;
            background-color:green;
        }
    </style>
</head>
<body>
<div id="box1">

</div>
<br/><br/><br/><br/>
<div id="box2">

</div>
</body>
</html>

<script type="text/javascript" src="js/sea.js"></script>
<script type="text/javascript" src="js/main.js"></script>

main.js

window.onload = function () {
    seajs.use(["tooltip","util"],function (tooltip,util) {
        util.$("box1").onmouseover = function(){
            tooltip.getInstance({"domObj":this});
        }

        util.$("box2").onmouseover = function(){
            tooltip.getInstance({"domObj":this,"width":300,"title":"这是绿色的div"});
        }
    });
}

tooltip.js

define(function (require,exports,module) {

    //默认属性值（提示框的默认数据，方便调用者，即调用者不传输宽，高，背景颜色等，也是可以出现提示框的）
    let defaultObj = {
        "domObj":document.body,//
        "width":100,//提示框默认的宽度是100
        "height":30,//提示框默认的高度是30
        "bgcolor":"#f1f1f1",//默认背景颜色
        "color":"#600000",//默认字体颜色
        "fontSize":"14px",//默认字体大小
        "border":"1px solid black",//默认的边框样式
        "title":"暂时无提示信息",//默认的提示信息
        "isRadius":true,//默认带圆角
        "radiusSize":5//默认圆角的大小是5px
    };

    //给属性赋值（把传入的属性值和默认属性值进行合并）
    function assignAttribute(tooltipObj,obj) {
        //合并后的对象
        let tmpObj = {};
        //1、把默认属性值赋给tmpObj
        for(let key in defaultObj){
            tmpObj[key] = defaultObj[key];
        }
        //2、把传来的属性值赋给tmpObj
        for(let key in obj){
            tmpObj[key] = obj[key];
        }

        //给tooltip对象属性进行赋值；
        for(let key in tmpObj){
            tooltipObj[key] = tmpObj[key];
        }
    }
    //一、构造函数
    function ToolTip(obj){

    }

    //创建tooltip对象对应的dom元素
    ToolTip.prototype.createUI=function () {
        //给父元素增加定位
        this.domObj.style.position="relative";
        //1、创建div
        this.toolTipDom = document.createElement("div");
        this.toolTipDom.style.cssText="position:absolute";
    }

    //修改tooltip对象对应dom元素的样式属性,并改变父元素（不同的提示框的外观不一样）
    ToolTip.prototype.updateUI=function () {
        //1、修改dom元素的样式属性
        this.toolTipDom.style.left = (this.domObj.offsetWidth-this.width)/2+ "px";
        this.toolTipDom.style.top = (this.domObj.offsetHeight-this.height)/2+"px";
        this.toolTipDom.style.width = this.width+"px";
        this.toolTipDom.style.height =this.height+ "px";
        this.toolTipDom.style.backgroundColor=this.bgcolor;
        this.toolTipDom.style.color =this.color;
        this.toolTipDom.style.fontSize =this.fontSize;
        this.toolTipDom.style.border =this.border;
        if(this.isRadius){
            this.toolTipDom.style.borderRadius = this.radiusSize+"px";
        }
        this.toolTipDom.style.display = "block";
        this.toolTipDom.innerHTML = this.title;
        //2、修改dom元素的父元素
        this.domObj.appendChild(this.toolTipDom);
    }

    //隐藏提示框
    ToolTip.prototype.hiddenUI=function () {
        this.toolTipDom.style.display = "none";
    }

    //给需要提示框的元素绑定onmouseout事件
    ToolTip.prototype.initEvent=function(){
        this.domObj.onmouseout = (event)=>{
            let evt = event || window.event;
            //如果目的地是toolTipDom元素的话，说明是离开父元素进入了子元素，不删除提示框
            if(evt.toElement==this.toolTipDom){
                return;
            }
            //把提示框隐藏起来
            this.hiddenUI();
        }
    }
    //二、对外开放一个函数，这个函数的目的是控制对构造函数的调用
    let instance;//这个表示单例对象
    exports.getInstance = function (obj) {
            if(!instance){//首次使用该对象，就需要创建
                //1、JavaScript对象
                //1）、创建JavaScript的对象
                instance=new ToolTip(obj);
                //2）修改JavaScript对象（instance）属性的值
                assignAttribute(instance,obj);
                //2、javascript对象对应的dom对象
                //1）、创建javascript对象对应的dom对象div
                instance.createUI();
                //2）、修改dom对象的外观样式
                instance.updateUI();
                //3）、给dom元素加上事件
                instance.initEvent();
            }else{//不是首次使用该对象，就不需要创建，只需要修改它的属性值即可
                //1、JavaScript对象
                //1）、修改JavaScript对象（instance）属性的值
                assignAttribute(instance,obj);
                //2、javascript对象对应的dom对象
                //1)、修改dom对象的外观样式
                instance.updateUI();
                //2）、给dom元素加上事件
                instance.initEvent();
            }
            return instance;
        }
});

util.js

define(function (require,exports,module) {
    exports.$=function(id){
        return document.getElementById(id);
    }
});

田江

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
cmd_把tooltip做成符合cmd规范

效果图：代码：解释一下：sea.js在网上可以自行下载html代码： Title *{ margin:0; padding:0; list-style: none; } #box1{ pos
复制链接

扫一扫