LayUI的卡片布局以及超链接带参跳转

本篇博客涉及到的问题有:1. 怎么使用layui的卡片布局2. 点击卡片布局中的卡片怎么跳转到对应tab页3. 跳转怎么携带卡片中的内容作为参数下面进入正文:项目背景:tab页显示的数据为待审核关键字表中的数据,tab的header部分有几个单选框和text输入框,用于输入条件进行待审核关键字信息查询。其中一个查询条件是审核条件,分为待审核,通过,重复关键字和黑名单关键字。需求:登录后台管理系统的时候就希望看到关键字审核情况。并且我想只要点击卡片布局中的审核状态就会自动跳转到待审核关键字
摘要由CSDN通过智能技术生成

本篇博客涉及到的问题有:

1. 怎么使用layui的卡片布局
2. 点击卡片布局中的卡片怎么跳转到对应tab页
3. 跳转怎么携带卡片中的内容作为参数

下面进入正文:

  • 项目背景:tab页显示的数据为待审核关键字表中的数据,tab的header部分有几个单选框和text输入框,用于输入条件进行待审核关键字信息查询。其中一个查询条件是审核条件,分为待审核,通过,重复关键字和黑名单关键字。

  • 需求:登录后台管理系统的时候就希望看到关键字审核情况。并且我想只要点击卡片布局中的审核状态就会自动跳转到待审核关键字表,并显示对应的数量。

    这个需求分为两个部分,一个是审核状态分布在公告栏的显示,还有一个是进行带参跳转。

对于将审核状态分布显示页面上,我参考的是闲心大佬的卡片布局。官网
在这里插入图片描述

我想实现的效果就是红框中效果。

首先第一步就是F12查看源码。
这里新加了一个样式,大家可以直接复制到你们的js文件中:

;!function(e){
   "use strict";var t=document,o={
   modules:{
   },status:{
   },timeout:10,event:{
   }},n=function(){
   this.v="2.4.5"},r=function(){
   var e=t.currentScript?t.currentScript.src:function(){
   for(var e,o=t.scripts,n=o.length-1,r=n;r>0;r--)if("interactive"===o[r].readyState){
   e=o[r].src;break}return e||o[n].src}();return e.substring(0,e.lastIndexOf("/")+1)}(),i=function(t){
   e.console&&console.error&&console.error("Layui hint: "+t)},a="undefined"!=typeof opera&&"[object Opera]"===opera.toString(),u={
   layer:"modules/layer",laydate:"modules/laydate",laypage:"modules/laypage",laytpl:"modules/laytpl",layim:"modules/layim",layedit:"modules/layedit",form:"modules/form",upload:"modules/upload",tree:"modules/tree",table:"modules/table",element:"modules/element",rate:"modules/rate",colorpicker:"modules/colorpicker",slider:"modules/slider",carousel:"modules/carousel",flow:"modules/flow",util:"modules/util",code:"modules/code",jquery:"modules/jquery",mobile:"modules/mobile",fileExport:"modules/fileExport","layui.all":"../layui.all"};n.prototype.cache=o,n.prototype.define=function(e,t){
   var n=this,r="function"==typeof e,i=function(){
   var e=function(e,t){
   layui[e]=t,o.status[e]=!0};return"function"==typeof t&&t(function(n,r){
   e(n,r),o.callback[n]=function(){
   t(e)}}),this};return r&&(t=e,e=[]),layui["layui.all"]||!layui["layui.all"]&&layui["layui.mobile"]?i.call(n):(n.use(e,i),n)},n.prototype.use=function(e,n,l){
   function s(e,t){
   var n="PLaySTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/;("load"===e.type||n.test((e.currentTarget||e.srcElement).readyState))&&(o.modules[f]=t,d.removeChild(v),function r(){
   return++m>1e3*o.timeout/4?i(f+" is not a valid module"):void(o.status[f]?c():setTimeout(r,4))}())}function c(){
   l.push(layui[f]),e.length>1?y.use(e.slice(1),n,l):"function&#
  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值