陆续更新一些常用代码片段
表格排序图标显示不出来的情况：
1
2
3
| thead tr th:after {
font: normal normal normal 1.6rem/1.5 FontAwesome,sans-serif;
}
|
1
2
3
4
5
6
7
8
9
10
| <input type="text" id="username" autoComplete='off'>
<div id="result"></div>
<script type="text/javascript">
$(function () {
$('#username').bind('input propertychange', function () {
console.log($(this).val());
});
})
</script>
|
1
2
3
| $('#username').change(function () {
console.log($(this).val());
}
|
微信浏览器下出现软键盘页面变形时解决办法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script type="text/javascript">
var clientHeight = document.body.clientHeight;
var _focusElem = null; //输入框焦点 //利用捕获事件监听输入框等focus动作
document.body.addEventListener("focus", function(e) {
_focusElem = e.target || e.srcElement;
}, true); //因为存在软键盘显示而屏幕大小还没被改变，所以以窗体（屏幕显示）大小改变为准
window.addEventListener("resize", function() {
if(_focusElem && document.body.clientHeight < clientHeight) { //焦点元素滚动到可视范围的底部(false为底部)
_focusElem.scrollIntoView(false); } });
</script>
|
未来元素绑定事件
weui的picker组件，点击完成跳转页面，与此同时点击遮罩层不触发该事件 于是只能获取a标签 来添加点击事件，由于此处的a标签是个未来元素，因此不能用一下写法
1
2
3
| $('.picker-button').click(funciton(){
...
})
|
改为：
1
2
3
| $('body').delegate('.picker-button', 'click', function () {
...
})
|
用 CSS 实现元素垂直居中
不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行：
1
2
3
4
5
6
7
8
9
10
| parentElement{
position:relative;
}
childElement{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
|
若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可
1
2
3
4
5
6
7
8
9
| parentElement{
height:xxx;
}
.childElement {
position: relative;
top: 50%;
transform: translateY(-50%);
}
|
Flex 布局：
不考虑兼容老式浏览器的话，用Flex布局简单直观一劳永逸：
1
2
3
4
5
| parentElement{
display:flex;/*Flex布局*/
display: -webkit-flex; /* Safari */
align-items:center;/*指定垂直居中*/
}
|
跨浏览器的事件处理程序
要保证处理事件的代码在大多数浏览器下一致地运行，只需关注冒泡阶段。
(以下代码最好记下来)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| var EventUtil = {
addHandler: funciton(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false)
}else if(element.attachEvent){
element.attachEvent('on'+type, handler)
}else {
element['on'+type] = handler;
}
}
removeHandler: function(element, type ,handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false)
}else if(element.datachEvent){
element.datachEvent('on'+type, handler)
}else {
element['on'+type] = null
}
}
};
//以下是调用方式
var btn = document.getElementById("myBtn")
var handler = function(){
alert("Cliked")
};
EventUtil.addHandler(btn, "click", handler)
//这里省略了其他代码
EventUtil.removeHandler(btn, "click", handler)
|
