Layui中按钮，导航和进度条总结

最新推荐文章于 2023-02-27 23:35:16 发布
最新推荐文章于 2023-02-27 23:35:16 发布
阅读量464 收藏 1
点赞数
分类专栏： 3.Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YZSS17/article/details/113475265
版权

总览

在这里插入图片描述

按钮

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="css/layui.css"  media="all">
  
</head>
<body>
            
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
  <legend>按钮主题</legend>
  <div>
    <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
    <button type="button" class="layui-btn">默认按钮</button>
    <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
    <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
    <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
    <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
  </div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button">
  <legend>按钮尺寸</legend>
  <div>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
    <button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
    
    <br>
    
    <button type="button" class="layui-btn layui-btn-lg">大型按钮</button>
    <button type="button" class="layui-btn">默认按钮</button>
    <button type="button" class="layui-btn layui-btn-sm">小型按钮</button>
    <button type="button" class="layui-btn layui-btn-xs">迷你按钮</button>
    
    <br>
    
    <button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
    <button type="button" class="layui-btn layui-btn-normal">默认按钮</button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>
    
     <br>
    
    <div style="width: 216px; margin: 0;">
      <button type="button" class="layui-btn layui-btn-fluid">流体按钮</button>
    </div>
  </div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button">
  <legend>灵活的图标按钮（更多图标请阅览：文档-图标）</legend>
  <div>
    <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
    
    <br>
    
    <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
    
    <br>
    
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
    
    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
      
    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
  </div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button">
  <legend>还可以是圆角按钮</legend>
  <div>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
    <button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
    <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
    <button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
  </div>
</fieldset>
<fieldset class="layui-elem-field site-demo-button">
  <legend>风格混搭的按钮</legend>
  <div>
    <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button>
    <a href="http://www.layui.com/doc/element/button.html" class="layui-btn" target="_blank">跳转的按钮</a>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i> 删除</button>
    <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon"></i> 分享</button>
  </div>
</fieldset>
 
<fieldset class="layui-elem-field site-demo-button">
  <legend>按钮组</legend>
  <div class="layui-btn-group">
    <button type="button" class="layui-btn">增加</button>
    <button type="button" class="layui-btn ">编辑</button>
    <button type="button" class="layui-btn">删除</button>
  </div>
  <div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
  </div>
  <div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">文字</button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
  </div>
</fieldset> 
          
<script src="layui.js" charset="utf-8"></script>

</body>
</html>

导航

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="css/layui.css"  media="all">
</head>
<body>
              
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>水平导航菜单</legend>
</fieldset>
 
<ul class="layui-nav">
  <li class="layui-nav-item"><a href="">最新活动</a></li>
  <li class="layui-nav-item layui-this">
    <a href="javascript:;">产品</a>
    <dl class="layui-nav-child">
      <dd><a href="">选项1</a></dd>
      <dd><a href="">选项2</a></dd>
      <dd><a href="">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">大数据</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child">
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd class="layui-this"><a href="">选中项</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>导航带徽章和图片</legend>
</fieldset>

<ul class="layui-nav">
  <li class="layui-nav-item">
    <a href="">控制台<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">个人中心<span class="layui-badge-dot"></span></a>
  </li>
  <li class="layui-nav-item" lay-unselect="">
    <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">修改信息</a></dd>
      <dd><a href="javascript:;">安全管理</a></dd>
      <dd><a href="javascript:;">退了</a></dd>
    </dl>
  </li>
</ul>
<div style="margin-top: 15px;">
 
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
  
</div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>更多导航主题</legend>
</fieldset>
 
<ul class="layui-nav layui-bg-cyan">
  <li class="layui-nav-item"><a href="">藏青导航</a></li>
  <li class="layui-nav-item layui-this"><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">大数据</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child">
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-green">
  <li class="layui-nav-item"><a href="">墨绿导航</a></li>
  <li class="layui-nav-item layui-this"><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">大数据</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child">
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-blue">
  <li class="layui-nav-item"><a href="">艳蓝导航</a></li>
  <li class="layui-nav-item layui-this"><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">大数据</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child">
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">社区</a></li>
</ul> 
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>垂直导航菜单</legend>
</fieldset>
 
<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默认展开</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项一</a></dd>
      <dd><a href="javascript:;">选项二</a></dd>
      <dd><a href="javascript:;">选项三</a></dd>
      <dd><a href="">跳转项</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child">
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">云市场</a></li>
  <li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" lay-filter="demo">
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默认展开</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项一</a></dd>
      <dd><a href="javascript:;">选项二</a></dd>
      <dd><a href="javascript:;">选项三</a></dd>
      <dd><a href="">跳转项</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child">
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">云市场</a></li>
  <li class="layui-nav-item"><a href="">社区</a></li>
</ul>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>侧边固定导航菜单</legend>
</fieldset>
 
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>默认面包屑</legend>
</fieldset>
 
<span class="layui-breadcrumb">
  <a href="/">首页</a>
  <a href="/demo/">演示</a>
  <a><cite>导航元素</cite></a>
</span>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>自定义分隔符的面包屑</legend>
</fieldset>
 
<span class="layui-breadcrumb" lay-separator="—">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>还可以用于门户频道的面包屑</legend>
</fieldset>
 
<span class="layui-breadcrumb" lay-separator="|">
  <a href="">娱乐</a>
  <a href="">八卦</a>
  <a href="">体育</a>
  <a href="">搞笑</a>
  <a href="">视频</a>
  <a href="">游戏</a>
  <a href="">综艺</a>
</span>
 
<p class="layui-elem-quote">其实就是自定义了个“|”的分隔符，然后最后一项也可以点。</p>        
          
<script src="layui.js" charset="utf-8"></script>
<script>
layui.use('element', function(){
  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
  
  //监听导航点击
  element.on('nav(demo)', function(elem){
    //console.log(elem)
    layer.msg(elem.text());
  });
});
</script>

</body>
</html>

进度条

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="css/layui.css"  media="all">
</head>
<body>
              
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>默认风格的进度条</legend>
</fieldset>
  
<div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="40%"></div>
</div>
<div style="margin-top: 15px; width:300px">
  <div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="70%"></div>
  </div>
</div>
  
<!-- 进度条的宽度是 100% 适配于它的父级元素，如上面的进度条是在一个 300px 的父容器中。 -->
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>更多颜色选取</legend>
</fieldset>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-green" lay-percent="40%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
</div>
 
<br>
 
<div class="layui-progress">
  <div class="layui-progress-bar layui-bg-cyan" lay-percent="60%"></div>
</div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>大尺寸进度条</legend>
</fieldset>
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" lay-percent="20%"></div>
</div>
   
<br>
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-green" lay-percent="35%"></div>
</div>
<br>
<div class="layui-progress layui-progress-big">
  <div class="layui-progress-bar layui-bg-cyan" lay-percent="75%"></div>
</div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin: 50px 0 30px;">
  <legend>显示进度比文本</legend>
</fieldset>
<div class="layui-progress" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="20%"></div>
</div>
 
<br>
 
<div class="layui-progress" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="5 / 10"></div>
</div>
 
<br>
 
<div class="layui-progress layui-progress-big" lay-showpercent="true">
  <div class="layui-progress-bar" lay-percent="70%"></div>
</div>
 
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>动态改变进度</legend>
</fieldset>
 
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
  <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
 
<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
  <button class="layui-btn site-demo-active" data-type="setPercent">设置 50%</button>
  <button class="layui-btn site-demo-active" data-type="loading">模拟 loading</button>
</div>
 
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
  
 
          
<script src="layui.js" charset="utf-8"></script>
<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
  //触发事件
  var active = {
    setPercent: function(){
      //设置50%进度
      element.progress('demo', '50%')
    }
    ,loading: function(othis){
      var DISABLED = 'layui-btn-disabled';
      if(othis.hasClass(DISABLED)) return;
    
      //模拟loading
      var n = 0, timer = setInterval(function(){
        n = n + Math.random()*10|0;  
        if(n>100){
          n = 100;
          clearInterval(timer);
          othis.removeClass(DISABLED);
        }
        element.progress('demo', n+'%');
      }, 300+Math.random()*1000);
      
      othis.addClass(DISABLED);
    }
  };
  
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = $(this).data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>

</body>
</html>
叶子桑桑
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Layui之进度条
weixin_46703930的博客
07-03 6821
进度条 准备工作： 导入layui.js和layui.css 一、默认风格的进度条 1、进度条的宽度是100%适配于它的父级元素，如上面的进度条是在一个300px的父容器中。 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>默认风格的进度条</legend> </fieldset> <div class="layui-
layui进度条
热门推荐
zhouzhou_98的博客
10-02 1万+
进度条 相关样式 layui-progress 代表一个进度条 |-- layui-progress-bar 代表进度条里面的进度 layui-progress-big 变粗了 相关属性 lay-percent 代表进度值 lay-showpercent="true" 是否显示进度值 代码如下图： <%-- Crea...
layui进度条：调用、参数设置、动态渲染、数据热更新 （含案例、代码）
草巾冒小子的博客
08-09 4946
文章目录layui进度条：经验总结 （含案例、代码）案例截图：案例 · 代码：背景 · 设置：动态操作 · 文档截图：使用说明： layui进度条：经验总结 （含案例、代码） 引言： 组件如何设置调用？ 如何设置背景类？ 如何自定义提示文本？ <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭"> 如何实现 js动态操作？ 【动态操作进度条】讲述的是一个已经设置了过滤器（lay-filter=“demo”
layui 的进度条（progress）
weixin_44734875的博客
06-18 4152
html <div class="layui-progress" lay-filter="loading" id="loading" style="width: 300px;margin: 30px auto ;"> <div class="layui-progress-bar"></div> </div> js var isLoading = true var active = { setPercent: function
layui框架学习（12：进度条）
gc_2299的博客
02-27 2667
学习并记录layui框架中页面元素的进度条相关样式设置方式。
layui-v2.2.5 中文离线文档.zip
12-31
3. **丰富的组件**：layui包含了大量的UI组件，如表格、表单、按钮、弹窗、导航、面包屑、进度条、提示、图片预览等，满足日常开发需求。 4. **易用性**：layui的API设计简单易懂，提供了一套直观的配置方式，让...
layui中文离线文档
最新发布
05-31
4. **按钮与图标**：layui提供了一系列预设的按钮样式和图标库，使得UI设计更加统一和美观。 5. **弹出层**：layui的layer模块是一个强大的弹窗组件，可以创建各种类型的弹窗，如提示、iframe、图片预览等，增强了...
layui官网离线开发文档.zip
12-01
7. **示例代码**：离线文档中会有大量的示例代码，帮助开发者理解如何在实际项目中应用Layui，这些例子通常涵盖各种常见场景和组件的组合使用。 8. **问题排查**：文档中还可能包含常见问题解答和错误处理指南，...
layui文档(官网下线前版本)
10-22
它提供了丰富的组件，如表格、表单、按钮、图标、弹窗、导航、面包屑、进度条、开关、滑块等，覆盖了前端开发中的常见需求。这些组件设计简洁、响应式，能够适应各种屏幕尺寸，提升用户体验。 在layui文档中，你...
基于layui封装的网页音视播放器源码
03-16
在IT行业中，前端开发是构建用户交互界面的关键部分，而layui是一个流行的JavaScript前端框架，它提供了丰富的组件和模块化的设计，使得开发人员可以快速构建出美观且功能强大的Web应用。本资源是基于layui封装的...
springmvc+jquery+layui文件上传进度条
08-28
文件上传效果类似163邮箱。使用了spring MVC作为后台。layui+jquery作为前端技术。支持多文件上传。下载后直接导入myeclipse即可使用。
CALayer制作进度条
11-08
传入百分比参数，实现进度条变化，用于下载网络资源时，下载量占总量的多少
支付宝属性导航条进度条
10-14
支付宝属性导航条进度条
《layui宇宙版教程》：进度条
来吧，学习！
08-19 343
《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入： 1.11 进度条 进度条可应用于许多业务场景，如任务完成进度、loading进度等等，是一种较为直观的表达元素。 依赖加载组件：element。 1.11.1 常规用法 测试代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"...
Layui文件上传带进度条
阅读之后，对你有帮助，那就点个赞再走吧
07-29 1702
1.修改layui文件上传ajax的代码： 这里使用的是layui的非模块化 （layui.js），模块化请修改modules/upload.js xhr:function () { var newXhr = i.ajaxSettings.xhr(); // 给xhr的upload添加progress的监听 newXhr.upload.addEventListener('progr...
学写一个糊弄人的进度条（layui+js）
白洞，白色的明天在等着我们
09-04 2738
众所周知，进度条是一种烦人的东西╭(╯^╰)╮，如何写一个动态进度条呢，点进来看看吧QAQ~
动态进度导航条
wuxiao18的博客
10-22 383
原生js和JQuery库结合使用 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放--> <meta...
页面进度条,导航标识最愚蠢的写法对比正常的写法
BelleHarvester的博客
04-25 675
在开发中,或多或少都要接触到一点前端的问题,我不是专业的前端工程师,只会使用一些基本的前端技术,最近项目组内缺前端,有些前端页面的问题只能自己去搞了. 下面是关于一些进度条的问题,横向进度轴线.具体的专业术语我不太懂,我就这么叫它们. 这次我做了两种进度条,第一种四个步骤,第二个三个步骤,这两个的实现方式差不多的. 但是我用了不一样的方式去做了. 第一种是我在网上...
05导航指示-03导航进度条-navprogress
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
10-15 545
一、运行效果 二、功能特点 可设置前景色、背景色、当前值前景色、当前值背景色。 可设置最大步数及当前第几步。 可设置导航标签队列文字信息。 可设置三种风格样式 京东订单流程样式、淘宝订单流程样式、支付宝订单流程样式。 文字自适应大小。 三、公共接口 public Q_SLOTS: //设置导航顶部标签数据 void setTopInfo(const QStringList &topInfo); //设置导航底部标签数据 void setBottomInfo(co
在unity中如何点击按钮清除进度条数据
05-31
要清除进度条数据，可以在Unity中使用以下步骤： 1. 创建一个按钮对象，例如使用Unity的UI系统创建一个Button对象。 2. 在Button对象上添加一个OnClick事件，通过脚本来实现按钮的点击事件。 3. 在脚本中，找到进度条的对象，比如说通过Find方法找到进度条的GameObject，或者通过序列化变量来引用进度条对象。 4. 在OnClick事件中，使用进度条对象的值来将进度条的值重置为0。 以下是示例代码： ```csharp using UnityEngine; using UnityEngine.UI; public class ClearProgressBar : MonoBehaviour { public Slider progressBar; public void OnClearButtonClicked() { progressBar.value = 0; } } ``` 在上述示例中，我们首先在脚本中定义了一个Slider类型的progressBar变量，用于引用进度条的对象。然后，在按钮的OnClick事件中调用OnClearButtonClicked方法，该方法将进度条的值重置为0，从而清除进度条数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值