mask2012 / MaskBlog

all blogs are in issues.
12 stars 5 forks source link

一个简单的多文本展示公共组件 #66

Open mask2012 opened 5 years ago

mask2012 commented 5 years ago

先来看效果

GIF

当文字展示不下去时,我期望点击查看更多,然后再次点击关闭。 涉及到几个特性:

  1. 点击文本区域,弹出详情框,点击弹出框关闭
  2. 详情框悬浮在浏览器窗口居中,当窗口高度小于详情框高度时,详情框会内部出现滚动条

来看脚本

checkDetail: function (content) {
    if(content.length<30){return;}
    var checkDetailStyle = '<style> #checkDetailPop{position: fixed; z-index: 9999; left:50%; top:50%; transform:translate(-50%,-50%); width: 80%;  background-color: rgba(0,0,0,0.7); overflow: auto; color: #fff; font-size: 14px; word-break:break-all; padding: 15px; line-height:1.4; border-radius: 5px; font-family: "Microsoft Yahei",SimHei,"Helvetica Neue","DejaVu Sans",Tahoma; }#checkDetailPop p{max-height:70%; max-height:70vh; overflow:auto;-webkit-overflow-scrolling:touch;}</style>';

    function isJson(obj) {
        var isjson = typeof (obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length;
        return isjson;
    }
    //创建dom结构和样式
    if ($('#checkDetailPop').length == 0) {
        $('body').append('<div id="checkDetailPop"></div>');
        $('body').append(checkDetailStyle);
    }
    //填入数据
    $('#checkDetailPop').html('');
    $('#checkDetailPop').prepend('<p>' + content + '</p>').removeClass('none').one('tap',function(){
        $(this).addClass('none');
    });
    $('#checkDetailPop p').html(content);
},

把样式也都写在一起了,比较紧凑,在结构上,我把内容写在了p这个标签里,给p设了最大高度,然后overflow:auto就可以出现滚动条了。然后外层写上padding,这样保证内容始终在框的内部,否则文字滚动时会贴边很不好看。事件处理上,为了避免多次绑定,用了one这样的绑定方式。