• 前端小技巧


    1、移动端页面滑动流畅代码:

    .className {  -webkit-overflow-scrolling: touch; }

    2、多行文本溢出代码(只针对移动页面和谷歌内核的浏览器):

    .className {
        overflow : hidden;
        display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
        -webkit-line-clamp: 2; /*设置规定显示行数*/
        -webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/    
    }

    3、移动端页面自适应标签内容

    <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no">

    4、关闭input框自动记忆填充问题

    方案一:对input框添加 autocomplete="off" 属性。(tips:  input:-webkit-autofill {   box-shadow: 0 0 0 1000px white inset; } 这段样式可以去除input的黄色背景)

    方案二:在页面里对增加两个input元素(一个type为"text",另一个type为"password"),并隐藏它们(disn表示:display: none;)

    <input type="text" class="disn">
    <input type="password" class="disn">

     5、点击时阻止冒泡事件

    $(".className").onclick(function(e){
      event.stopPropagation(); //阻止冒泡事件代码(上方function括号内要添加e)
      console.log("ok");
    });

    6、如果想在ajax外面用到ajax函数内的值,需要先定义一个全局变量,然后把ajax的async的值变成false,即改为同步方式,请求成功之后,把值赋给之前定义的全局变量,之后再ajax外面也可以调用了。

    var bannerImgLength;
      $.ajax({
        url:"..",
        dataType:"json",
        async: false,
        success:function(data){
          console.log(data);
          bannerImgLength = data.result.length;
        }
      });
      console.log(bannerImgLength);  //此时bannerImgLength是有值的。

    7、移动端点击input搜索框让弹出键盘中的“换行/前往”变成“搜索

      代码如下:

    <form>
      <input type="search" placeholder="请输入搜索内容">
    </form>

      方法:将 input 的 type 改为 “search” 并在其外层用 form 标签进行包裹。(但是type为search后输入框会有默认的“×”样式,如果不需要可以加入以下代码)

      去除search默认样式:

    input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; //去掉默认的‘×’ }

    8、表格去重

      

      a、外表格样式

    <table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">

        

      b、内表格样式

    <table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;border-0px; border-style:hidden;">

        

        

  • 相关阅读:
    2013 duilib入门简明教程 -- 自绘控件 (15)
    2013 duilib入门简明教程 -- 部分bug 2 (14)
    2013 duilib入门简明教程 -- 复杂控件介绍 (13)
    Linux学习88 Mysql常见服务搭档-php-fpm基础应用与实战
    Linux学习87 MariaDB高级操作实战
    Linux学习86 MariaDB基础操作实战
    Linux学习85 MariaDB入门实战
    Linux学习84 数据库体系全面介绍-关系型数据库基础
    Linux学习83 互联网架构-LAMP高级应用与企业项目
    Linux学习82 互联网架构-LAMP入门进阶
  • 原文地址:https://www.cnblogs.com/muou2125/p/7277780.html
Copyright © 2020-2023  润新知