美文网首页
1.4迭代记录

1.4迭代记录

作者: sarry | 来源:发表于2017-01-18 20:00 被阅读36次

    现在弹框的规则是:800宽为界限
    大于800的时候:
    看自己:总宽800
    看别人:总宽700
    小于800的时候:
    看自己:100%;
    看别人:100%;

    要改的弹框规则是: 992宽为界限
    大于992的时候:
    看自己:总宽800
    看别人: 总宽700
    小于992的时候:
    看自己:100%;
    看别人:100%;

    里面内容的规则是: (以下的详情代表详情展示和聊天室共同的外框)
    大于800的时候:
    看自己:详情是615px,群列表184px,外框是800;
    看别人:详情是700px,群列表无,外框也是700;
    小于800的时候:
    看自己: 详情是615px,群列表是184px,外框是100%;(如果里面内容已经放不下那么自然截掉)
    看别人: 详情是700,群里表无,外框是100%;(如果里面内容已经放不下那么自然截掉)

    要改的规则是:
    大于992的时候:
    看自己:详情是615px,群列表184px,外框是800;
    看别人:详情是700px,群列表无,外框也是700;
    小于992的时候:
    看自己:详情是568px,群列表是199px,外框是768(100%);(如果里面内容已经放不下那么自然截掉)
    看别人:详情是700px,群列表无,外框也是700;

    遇到的问题:
    1.当设置了框架的宽度768时:
    小于992的时候效果可以。当大于992的时候时候看自己的项目就被截掉了一块,看别人的项目就多出了一块空白;
    2.当让框架的宽高自适应时:
    加载的时候获取不到完整的宽高。所以就给#chartroom在css中设置了一个宽高。让框架可以识别css。于是我在css媒体查 询中在小于992的时候另给#chartroom设置了一个宽高,以去适应。此时,看自己的可以了,看别人的项目又出现了问题。

    就是说:不管怎么着。我要让框架适应四种宽度,两两一组(看自己,看别人):(800,700)(768,700)。而我不知在哪里去加上判断,准确的判断出何时情况下设置正确的宽度
    如果问我说,不是说给看别人的和看自己的加个class区分不就行了吗?看自己的和看别人的区分calss在框架里面的模块#chartromm 上。如果要给框架加的话(去哪加?怎么加?)
    查看地址:http://www.xxtao.com/modal-css/(现在唯一的问题就是在大屏幕下查看别人的项目宽度不对)

    我的想法:(主要目的是解决768的时候弹框右边的群列表不被截掉一些文字)
    保持原有的两种判断,不改框架的宽度(以800为分界线,和设计图不统一,设计图上以992为分界点)。而我只改变我自己的东西,让屏幕小于800的时候就让详情的宽度变为568(原为615),把群列表的宽度再加到232。这样就能保证在768的时候文字不被切掉。
    查看地址:http://www.xxtao.com/1.4-ipad/

    说了这么多,不知道说清楚了没有。有的问题,我都只是在做的时候才会遇到,才会想这里还有个坑。总之想的和做的本身就不一样。

    一、正则的一些使用场景
    1.replace(/[^\d{1,}\d{1,}|\d{1,}]/g,'') 正则限制input只能输入数字,超出字数并截断。字数限制方法为maxlength
    2.replace(/[^\d{1,}.\d{1,}|\d{1,}]/g,'') 正则限制input只能输入数字和小数,超出字数并截断。字数限制方法为maxlength
    3.onkeyup="value=value.replace(/^[\u4e00-\u9faf]+$/g,'')" 正则限制不能输入中文

    二、点击空白处让下拉框消失
    <script type="text/javascript">
    $(function(){
    $("#clickBtn").click(function(){
    $(".pop").show();
    });
    $(document).bind("click",function(e){
    var target = $(e.target);
    /.closest()沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止,返回包含零个或一个元素的 jQuery 对象。/
    if(target.closest(".pop,#clickBtn").length == 0){
    $(".pop").hide();
    };
    e.stopPropagation();
    })
    })
    </script>

    相关文章

      网友评论

          本文标题:1.4迭代记录

          本文链接:https://www.haomeiwen.com/subject/ydwebttx.html