独立开发者@董川民

Just So So ...

分类 Web前端 下的文章

flex实现一行三列均分宽度布局

平时没怎么用flex布局，有点陌生，调了一个样式出来，这个布局适合很多场景下的应用。
除了实现一行三列均分宽度，还特别设计了一个跨两列，跨三列的样式。
flex实现一行三列均分宽度布局.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>数据可视化</title>
    <style>
        .box{
            min-width:600px;
            max-width: 2000px;
            border:1px solid #ddd;
            margin:0 auto;
            display: flex;
            flex-flow: row wrap;
        }
        .box .panel{
            flex: 0 0 33.3333%;
        }
        .box .panel.two{
            flex:0 0 66.6666%;
        }
        .box .panel.three{
            flex:0 0 100%;
        }
        .box .panel .item{
            background-color:burlywood;
            display: block;
            text-align: center;
            margin:10px 10px;
            height: 40px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="panel">
        <div class="item">1</div>
    </div>
    <div class="panel">
        <div class="item">2</div>
    </div>
    <div class="panel">
        <div class="item">3</div>
    </div>
    <div class="panel two">
        <div class="item">4</div>
    </div>
    <div class="panel">
        <div class="item">5</div>
    </div>
    <div class="panel">
        <div class="item">6</div>
    </div>
    <div class="panel two">
        <div class="item">7</div>
    </div>
    <div class="panel three">
        <div class="item">8</div>
    </div>
    <div class="panel">
        <div class="item">9</div>
    </div>
    <div class="panel">
        <div class="item">10</div>
    </div>
</div>
</body>
</html>

阅读剩余部分

作者： . 所在栏目： . .

Html Table自适应宽度，指定列固定宽度，其他列均分宽度

做表单界面时，我想到最好的方法应该是，标题栏所在的列宽度固定，内容栏所在的列宽度自适应且要均分，这样整体表格看起来才美观有序。

要做到这一点，目前只摸索出一种办法：
1，给table加table-layout: fixed;
2，在每个table的第一行，加<colgroup><col>，有多少列，对应加多少个<col>
3，给指定列固定宽度的<col>加成<td class="title">，然后给title定义宽度，其他列的<col>加成<col width="auto">

阅读剩余部分

作者： . 所在栏目： . .

jQuery实现拖动，且拖动时不触发点击事件

jQuery实现拖动是网上抄的代码，但发现有一个JavaScript拖动时触发点击事件的BUG，让基友老嫖给修复了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #move{
                width: 200px;
                height: 200px;
                background-color: red;
                position: absolute;
                cursor: move;
            }
        </style>
    </head>
    <body>
        <div id="move">Hello World！</div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $('#move').on('mousedown', function(e) { //鼠标按下
            // 判断一下这个按下是点击还是拖动
            var isClick = true;

            $(document).on('mousemove', (e) => {//鼠标移动
                let left = e.clientX - $(this).width() / 2//计算元素left值
                let top = e.clientY - $(this).height() / 2//计算元素top值

                top = suan(top, 0, $(document).innerHeight() - $(this).height())//调用封装的方法
                left = suan(left, 0,$(document).innerWidth() - $(this).width())//调用封装的方法
                $(this).css({ //给盒子设置坐标
                    left,
                    top
                })
                //拖动后，把isClick设为false，后面就不会执行点击事件
                isClick = false;

                e.preventDefault();
            })
            $(document).on('mouseup', (e) => {//鼠标抬起
                //当isClick为true时，就执行点击事件
                if( isClick ){
                    msgboxurl()
                }
                $(document).off('mousemove mouseup')//移除鼠标移动、鼠标抬起事件
            })
        })
        function suan(o, min, max) { //重复封装
            o < min ? o = min : o > max ? o = max : ''//限制出界
            return o
        }
        function msgboxurl(){
            alert("点击效果");
        }
    </script>
</html>

阅读剩余部分

作者： . 所在栏目： . .

window.onload与$(document).ready()差异对比

一，执行时机
window.onload()：在页面所有元素（包括图片，引用文件）加载完后执行。
$(document).ready()：页面中所有HTML DOM，CSS DOM结构加载完之后就会执行，其他图片文件可能没有加载完。

二，编写个数
window.onload()： 不能同时写多个，后面的将会覆盖前面的。

window.onload=function(){ 
    alert("A"); 
}
window.onload=function(){ 
    alert("B"); 
}

结果会执行“B”，如果想要顺序执行alert("A")和alert("B")需写成：

window.onload=function(){
    alert("A");
    alert("B");
}

$(document).ready()： 可以同时写多个，以下代码正确执行。

$(document).ready(function (){
   alert("Hello World!"); 
});
$(document).ready(function (){
   alert("Helllo World!"); 
});

三，简写方法
window.onload()： 无简写，但有相关写法。

$(window).load(function () {
});
// 等价于
window.onload = function () {
};

$(document).ready()： 有简写

$(document).ready(function(){
　　//to do;
})；

可写成

$().ready(function(){   //$()不带参数默认是document
　　//to do;
});

或

$(function(){
　　//to do;
});

阅读剩余部分

作者： . 所在栏目： . .

js插件Autosize实现textarea标签高度自适应，且取消右边滚动条

Autosize插件官方：https://github.com/jackmoore/autosize
案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8' />
		<title>Simple Autosize for textareas</title>
		<style>
			textarea {
                padding: 10px; 
                vertical-align: top; 
                width: 200px; 
                resize:none;
                outline:none; 
            }
           textarea:focus { 
                outline-style: solid; 
                outline-width: 2px;
			}
		</style>
	</head>
	<body>
		<h3>max-height 300px</h3>
		<textarea style='max-height: 300px'>
			The coconut palm (also, cocoanut), Cocos nucifera, is a member of the
			family Arecaceae (palm family). It is the only accepted species in the
			genus Cocos.[2] The term coconut can refer to the entire coconut palm,
			the seed, or the fruit, which, botanically, is a drupe, not a nut. The
			spelling cocoanut is an archaic form of the word.[3] The term is derived
			from 16th-century Portuguese and Spanish coco, meaning "head" or "skull",[4]
			from the three small holes on the coconut shell that resemble human facial
			features.
		</textarea>
		<h3>no max-height</h3>
		<textarea>
			The coconut palm (also, cocoanut), Cocos nucifera, is a member of the
			family Arecaceae (palm family). It is the only accepted species in the
			genus Cocos.[2] The term coconut can refer to the entire coconut palm,
			the seed, or the fruit, which, botanically, is a drupe, not a nut. The
			spelling cocoanut is an archaic form of the word.[3] The term is derived
			from 16th-century Portuguese and Spanish coco, meaning "head" or "skull",[4]
			from the three small holes on the coconut shell that resemble human facial
			features.
		</textarea>
	</body>
	<script src='/autosize.min.js'></script>
	<script>
		autosize(document.querySelectorAll('textarea'));
	</script>
</html>

阅读剩余部分

作者： . 所在栏目： . .
    首页 上一页 10 11 12 13 14 15 下一页 尾页