现在弹框的规则是: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>