魔工坊

魔芋

Web工程师


发布者资料

  • 性别: 帅哥
  •  地区: 北京
  • 认证:  
  • 日期: 2016-05-27 20:10:58

教程源信息

  • 作者: 52xiaoyou
  • 来源: moke8

教程分类


推荐教程


同类教程

592

dedecms会员中心调用最新标签TAG,可点击添加


 每次发布文章都特别的难受,在看看别人家的网站,只要点点就好了,果然,网站还是人家的好。。。但是咋不能拿总这样下去,如果不解决问题,用户早晚会流失掉,那么凡是都得自己学习、上手,接下来我分享下关于优化会员中心TAG标签有效方法。
写文章之前我总爱先放效果图,这就好比女人,长得漂亮,自然有很多人想去了解是一个道理。

QQ截图20160527202523.png

没有太多的复杂的js代码,直接上码!

<?php   
    $archives = array();
    $query = "select * from #@__tagindex order by weekcc desc limit 0,25";
    $arcArr = array();
    $dsql->Execute('m', $query);
        while($row = $dsql->GetArray('m'))
    {
        $archives[] = $row;     
?>
<a href="JavaScript:void();" class="TAG" onclick="document.getElementById('tags').value += '<?php echo $row['tag']?>,';"><?php echo $row['tag']?></a>                    
<?php } ?>

代码大概的意思就是一段sql查询,然后循环输出,在a标签巧用js将内容赋予Id为tags文本框,在通过“+=”将字符串拼接起来就ok了。
基于本人的爱好,css也给大家放出来,有兴趣的可以自己改改。

.postForm a.TAG{ 
    display:inline-block;
    padding:2px 6px;
    color: #fff;
    background: #808080;
    line-height: 25px;
    font-size: 12px;
    -moz-border-radius: 3px;/* Gecko browsers */
    -webkit-border-radius: 3px;/* Webkit browsers */
    border-radius:3px;/* W3C syntax */
    margin-left:5px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
        }
.postForm a.TAG:hover{background: #0080FC; text-decoration:none}

心急的同学可以将下面代码放在在线运行里查看css效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>dedecms会员中心优化TAG标签</title>
<style type="text/css">
body, input, button, select, textarea {
        font:12px/1.5 'Microsoft Yahei',\5b8b\4f53, Tahoma, Arial, Helvetica, STHeiti;
}
a.TAG{ 
    display:inline-block;
    padding:2px 6px;
    color: #fff;
    background: #808080;
    line-height: 25px;
        text-decoration:none;
    font-size: 12px;
    -moz-border-radius: 3px;/* Gecko browsers */
    -webkit-border-radius: 3px;/* Webkit browsers */
    border-radius:3px;/* W3C syntax */
    margin-left:5px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
        }
a.TAG:hover{background: #0080FC; text-decoration:none}
</style>
</head>
<body>
<a href="JavaScript:void();" class="TAG" onclick="document.getElementById('tags').value += '爱觅优,';">爱觅优</a>
<a href="JavaScript:void();" class="TAG" onclick="document.getElementById('tags').value += '设计师导航,';">设计师导航</a>
<a href="JavaScript:void();" class="TAG" onclick="document.getElementById('tags').value += '程序员导航,';">程序员导航</a>
<a href="JavaScript:void();" class="TAG" onclick="document.getElementById('tags').value += 'IT导航,';">IT导航</a>
</body>
</html>


喵,赏1块零钱,给我家喵星人买罐头吧 :)

赞赏支付方式:

赞赏

赞赏

赞赏

 

[ 教程搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 关闭窗口 ]

魔友吐槽

浏览上篇

浏览下篇

发布教程

魔工坊系统提示