Tinkphp彩色标签Tags实现方法

Tinkphp彩色标签Tags的实现方法

我们浏览网页时经常看到眩目的彩色标签,而且每刷新一下浏览器,都会更新为不同的颜,是不是很“惊艳”?现在来看一下它在Thinkphp上的现实方法。

项目函数库的位置:项目\Common\common.php

项目函数库加入以下处理函数

function rcolor(){
    $rand = rand(0,255);//随机获取0--255的数字
    return sprintf("%02X","$rand");//输出十六进制的两个大写字母  
 }
function rand_color(){
 return '#'.rcolor().rcolor().rcolor();//六个字母  
}

在控制器加入获取标签列表的方法

//标签控制器查询标签表以获取标签列表
 function Tags($Module) {
   $Tag = M('Tag'); 
   $map['module']= $Module; 
   $Tagslist = $Tag->where($map)->field('id,name,count')->order('count desc')->limit('0,25')->select(); 
   $this->assign('tags', $Tagslist);  
   $this->display();  
}

把标签列表输出在模板上

<volist id="vo" name="tags" >
  <li>
   <a href="{:U('/web','tag='.$vo['name']|urlencode)}">
   <span style="font-size:{color:{$vo.id|rand_color}">&nbsp;&nbsp;{$vo.name}[{$vo.count}]</span>
   </a>
   </li>  
</volist>
说明:{$vo.id|rand_color}为调用项目函数库的“ rand_color()”方法

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏积累沉淀

JavaScript 表单处理

为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面。 一.表单介绍 在HTML中,表单是由<form>...

36010
来自专栏Lambda

【第一季】Vue2.0内部指令

学习这套课程你需要的前置知识: HTML的基础知识,你需要达到中级水平,写前端页面的结构代码完全没有问题。 CSS的基础知识,最好做过半年以上的切图和布局,最...

2109
来自专栏GreenLeaves

JavaScript之向文档中添加元素和内容的方法

一、非DOM方法添加 1、document.write() <html xmlns="http://www.w3.org/1999/xhtml"> <head>...

1887
来自专栏java达人

javascript之BOM

一、BOM(The Browser ObjectModel):-浏览器对象模型, (1)BOM提供了独立于内容而与浏览器窗口进行交互的...

2138
来自专栏极客编程

vue.js快速上手

  Vue.js是一个构建数据驱动的web界面的库。技术上,它重点集中在MVVM模式的ViewModel层,因此它非常容易学习,非常容易与其它库或已有项目整合。

2183
来自专栏IT技术

vue常见操作使用手法

webpack + vue + element(mint-ui, etc...) + axois (vue-resource) + less-loader+ ....

871
来自专栏小樱的经验随笔

php实现图形计算器

存档: index.php 1 <html> 2 <head> 3 <title>图形计算器开发</title> 4 ...

5454
来自专栏技术博客

Knockout.Js官网学习(value绑定)

value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>,<select>和<textarea>上。

771
来自专栏Java帮帮-微信公众号-技术文章全总结

JSP简单入门(3)

3、<jsp:param>标签 当使用<jsp:include>标签和<jsp:forward>标签引入或将请求转发给的资源是一个能动态执行的程序时,还可以使用...

3114
来自专栏黑泽君的专栏

day41_jQuery学习笔记_02

下面是jQuery 提供额外的事件,用于完善javascript缺失的事件 详解如下:

1272

扫码关注云+社区

领取腾讯云代金券