本篇博客涉及到的问题有:
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&#