• 你好!欢迎你的到来
  • 关于我们
  • 首页 博客 学习笔记 技术导航 工具
  • 博文分类
    • PHP(43)
    • MySQL(11)
    • Linux(28)
    • html(3)
    • JQuery(4)
    • JavaScript(9)
    • svn(2)
    • CSS(2)
    • seajs(1)
    • go(44)
    • redis(1)
    • nginx(8)
    • mongo(0)
    • es(0)
    • 算法(0)
    • 其他(26)
    • 生活(1)
    专栏
    • Jquery基础教程
      • 文章:(15)篇
      • 阅读:16957
    • shell命令
      • 文章:(42)篇
      • 阅读:57939
    • Git教程
      • 文章:(36)篇
      • 阅读:114364
    • leetCode刷题
      • 文章:(37)篇
      • 阅读:14348
    • 摘要视图
    • 目录视图
    利用bootstrap-tagsinput给oneThink文章添加标签
    标签: bootstrap-tagsinputoneThink标签
    2017-06-01 09:38 阅读(2932) 评论(0)

    一、添加字段属性

    打开Application/Admin/Common/function.php文件,在静态变量$_type中,增加如下代码:

    二、文档添加标签字段

    第一步

    系统==》系统设置==》模型管理

    点击编辑

    第二步

    第三步

    三、引入bootstrap-tagsinput

    当然完成了这些,并不能算完成,接下来我们引入并使用bootstrap-tagsinput管理标签。分别打开文件的新增和编辑视图,如下:

    分别找到对应的switch,如下:

    在switch最后,添加如下代码:

    <case value="tags">
        <script src="http://cdn.bootcss.com/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
        <script src="http://cdn.bootcss.com/typeahead.js/0.11.1/typeahead.bundle.js"></script>
        <link href="http://cdn.bootcss.com/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet">
        <style type="text/css">
         .bootstrap-tagsinput {
    	    width: 100%;
    	    background-color: #FFF;
    	  }
        .bootstrap-tagsinput input{
        	border: none;
        }
        .label-info {
    	    background-color: #5bc0de;
    	}
    	.label {
    	    display: inline;
    	    padding: .2em .6em .3em;
    	    font-size: 75%;
    	    font-weight: bold;
    	    line-height: 1;
    	    color: #ffffff;
    	    text-align: center;
    	    white-space: nowrap;
    	    vertical-align: baseline;
    	    border-radius: .25em;
    	}
        </style>
    	<input type="text" class="text input-large" name="{$field.name}" value="{$data[$field['name']]}" data-role="tagsinput" >
    </case>

    效果如下:

    关于bootstrap-tagsinput的更多使用,可以点击这里

    本文为原创文章,请尊重辛勤劳动,如需转载,请保留本文地址
    http://www.findme.wang/blog/detail/id/226.html

    若您感觉本站文章不错,读后有收获,不妨赞助一下?

    我要赞助

    您还可以分享给朋友哦

    更多
    顶
    1
    踩
    0
    • 上一篇: 解决UEditor编辑文章开头出现多余空行问题
    • 下一篇: 基于jquery.pjax实现Pjax效果详解
    • 查看评论
    • 正在加载中...
    • 留言
    • 亲,您还没有登录,登录后留言不需要审核哦!
      可以使用如下方式登录哦!
  • CSDN | 新浪微博 | github | 关于我们 | 我要留言 | 友链申请
  • 豫ICP备18038193号    Copyright ©lidequan All Rights Reserved