web前端

  • Layui数据表格使用if判断修改内容与生成动态进度条的操作详情记录

    最近小编也是突然接手一下公司的web前端改造计划、小编不做前端已经很久了、突然接到这样的“盛情邀请”让我有点猝不及防、没有办法只能硬着头皮上了 这里就做一个记录、还望各位大佬清点喷!! 首先需要实现的功能点如下 1. 数据表格原先为静态要实现动态生成 2. 表格内要增加动态的一个进度条(仿照任务进度条一样) 3. 把json生成的数据在前端更改为中文 这都不是难点 主要是没有美工在配合让我自己想UI设计与色彩搭配、我的内容如下图 没办法做下去吧 废话不多说上手layui这套前端框架、发现真香!!! 首先数据表格实现很简单、layui官网已经给了文档、只需要按照他的文档来做就可以实现了、主要要注意的是他的json返回的内容要和文档搭配、否则会出现数据接口错误呀什么报错的!这里是血的教训、我搞了好久都不知道为什么会出现这样的错误、后来仔细看了一下文档才知道的! 首先按照layui官网文档所示创建一个数据表格的demo <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>table模块快速使用</title> <link rel=”stylesheet” href=”/layui/css/layui.css” media=”all”> </head> <body> <table id=”demo” lay-filter=”test”></table> <script src=”/layui/layui.js”></script> <script> layui.use(‘table’, function(){ var table = layui.table; //第一个实例 table.render({ elem: ‘#demo’ ,height: 312 ,url: ‘/demo/table/user/’ //数据接口 ,page: true //开启分页 ,cols: [[ //表头 {field: ‘id’, title: ‘ID’, width:80, sort: true, fixed: ‘left’} ,{field: ‘username’, title: ‘用户名’, width:80} ,{field: ‘sex’, title: ‘性别’, width:80, sort: true} ,{field: ‘city’, title: ‘城市’, width:80} ,{field: ‘sign’, title: ‘签名’, width: 177} ,{field: ‘experience’, title:…

    2019年8月25日 0 84 0
  • 新手简易jquery轮播思路与代码讲解(对于新手、老手勿喷谢谢!)

    最近身边几位朋友问我js与jquery的问题、其实这个东西很简单不能这么说、只能说做一些小东西很简单、但是很多特效混淆的时候就比较尴尬了。但是今天不讲很难、咱们就做一个每一个网站肯定要用的轮播效果、文章如果有错误欢迎反馈、如果你是一位WEB大佬就别看了、免得看着恶心!谢了。这是给新手入门看看玩玩罢了、真实有千万种写法!勿当真! 首先打开软件、我个人用HBuilder这款软件写WEB、还是挺不错的! 新建项目-名字自取-包含三个文件(js)、(css)、(img)、当然你也可以在html里面直接写内链css和js都是没问题! 然后HTML页面写入内容:代码如下 <html> <head> <title>js轮播</title> <meta charset=”utf-8″ /> <link rel=”stylesheet” type=”text/css” href=”css/js.css” /> <script type=”text/javascript” src=”js/jquery.min.js” ></script> –这里是需要一个jQuery的包的 <script type=”text/javascript” src=”js/lb.js” ></script>–这是咱们js文件夹里面的自己写的js </head> <body> <div id=”lb”>–定义一个框 <a class=”lb1″ href=”https://www.6r6.cc”><img src=”img/4.png” style=”width: 1000px;height:500px ;”></a>–定义图片 <a class=”lb1″ href=”https://www.6r6.cc””><img src=”img/xinbanner00.jpg” style=”width: 1000px;height:500px ;”></a>–定义图片 <a class=”lb1″ href=”https://www.6r6.cc””><img src=”img/xinbanner02.jpg” style=”width: 1000px;height:500px ;”></a>–定义图片 <div class=”btn btn1″><</div>–定义左右按钮(left) <div class=”btn btn2″>></div>–定义左右按钮(right) <ul id=”tabs”>–定义底部 1-2-3的按钮样式 <li class=”tab”>1</li> <li class=”tab”>2</li> <li class=”tab”>3</li> </ul> </div> </body> </html> 上面是一个完整的HTML页面 并且也做了注释!如果你需要直接复制的话请删除掉–xxxx这些东西 因为在HTML页面中注释不是这样的哦!小编在网站上用markdown编辑就懒得写标准了! 然后在css页面新建一个css文件 代码如下: *{ margin: 0 auto; padding: 0; text-decoration: none; list-style: none; } .bg{ background-color: #fff; } #lb{ width:…

    2018年6月14日 0 21 0