分类 Web前端 下的文章

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

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

要做到这一点,目前只摸索出一种办法:
1,给tabletable-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>

Autosize下载:autosize.zip 最好去下载官方最新的版本。

注意,以上案例代码中,还用css3样式去掉textarea标签的右下角拖动元素修改尺寸大小属性(resize:none)和轮廓线(outline:none)。

百度小程序:显示栏目列表,再读取每个栏目的最新几条文章

需求:
1,页面上显示指定栏目下的子栏目列表
2,每个子栏目下再显示几条最新文章列表

要解决这个问题,首先要想好API接口怎么写,最简单当然是一个接口搞定:在接口中把1,2的数据都循环出来。
还有一个周折的办法,就是写两个接口,一个接口读取子栏目列表,一个接口读取栏目下的最新文章列表。

下面是用两个接口制作百度小程序列表的方案:




阅读剩余部分