1. Use CSS to penetrate the default style
Common scenario: If we need to upload a file through input, type="file", and the default style of this input can be said to be very different 丑. So we hope to pass a picture, the same size as the input, and cover it in a consistent position. At this time, obviously, when you click on the picture at this time, input will not work. It is because img isolates the penetration of click, and what we hope is that this img only visually obscures the style of the input, but the input is still clicked when clicked. So, just make the img penetrate.
The css code is as follows:
img {
pointer-events: none;
}
2. Realize the style of custom native select control
Because the native style of select mobile terminal is ugly, but the native pop-up effect is in line with our design principles. When directly modifying the select style, a strange phenomenon appeared. When debugging on chrome, the self-defined style worked. It also worked on Android phones, but it didn’t work on ios phones. Typical Incompatibility issues, disable the native style at this time.
The css code is as follows:
select {
-webkit-appearance: none;
}
3. Text overflow handling
For mobile devices, the page is relatively small, and some of the information displayed often needs to be omitted. The most common is the single-line header overflow omission, and the multi-line detailed introduction overflow omission. Now that they are all developed with the framework, this kind of suggestion, demand and suggestion form a basic component, which is convenient and quick.
The css code is as follows:
//单行
.single {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
//多行
.more {
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
work-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //指定行数
}
4. Turn on elastic scrolling
The css code is as follows:
body {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Note: Android does not support native elastic scrolling, but it can be achieved with the help of a third-party library iScroll.
5. One pixel border setting
Many times, I want to keep the size of the border at 1px on any setting, but because 1px is rendered using 2dp, that means it will be displayed as 2px. So, use css3 to zoom.
The css code is as follows:
.folder li {
position: relative;
padding: 5px;
}
.folder li + li:before {
position: absolute;
top: -1px;
left: 0;
content: " ";
width: 100%;
height: 1px;
border-top: 1px solid #ccc;
-webkit-transform: scaleY(0.5);
}
6. Prevent mouse selection event
<div class="mask" onselectstart="return false"></div>
<div class="link">
<a href="javascrip;;">登录</a>
</div>
Adding to the element onslectstart="return false"can prevent the mouse selection event.
7. Binding events to dynamically added elements
Use event proxy to achieve this effect. Such as:
$(document).on("click", ".large", slide); //jq中的写法
//第一个参数表示的是对应事件，第二个是需要绑定事件的元素的id或class，第三个是绑定的对应的事件函数名
8. Compatible with the transparency of IE browser
.ui {
width: 100%;
height: 100%;
opacity: 0.4;
filter: Alpha(opacity=40); //兼容IE浏览器的处理
}
9. Commonly used full-screen centered JS functions
//获取元素
function getElement(ele) {
return document.getElementById(ele);
}
//自动居中函数
function autoCenter(el) {
var bodyX = document.documentElement.offsetWidth || document.body.offsetWidth;
var bodyY =
document.documentElement.offsetHeight || document.body.offsetHeight;
var elementX = el.offsetWidth;
var elementY = el.offsetHeight;
el.style.left = (bodyX - elementX) / 2 + "px";
el.style.top = (bodyY - elementY) / 2 + "px";
}
10. Commonly used full-screen centered CSS functions
body {
height: 100vh;
text-align: center;
line-height: 100vh;
}
11. After entering the content in the input box and pressing enter, judge when
For example, we have entered 11000the time in the press Enter.
<input type="textbox" id="textbox1" onkeypress="CheckInfo" />
<script language="javascript" type="text/javascript">
function CheckInfo()
{
if (event.keyCode==13) {
alert(textbox1.text);
}
}
</script>
12. chrome debugging shortcuts
① ctrl+shift+f full text search
② ctrl+o to find the file name
③ ctrl+shift+o find js function name
study Exchange
Follow the public account [Frontend Universe], get good article recommendations every day
Add WeChat, join the group to communicate
"Watching and forwarding" is the greatest support