laravel5 学习中用到tag,考虑用插件,google一番找到这个,
https://github.com/xoxco/jQuery-Tags-Input
使用方法:
1,加载js和css
//js <script src="{{ asset('/js/jquery.min.js') }}"></script> <script src="{{ asset('/js/jquery-ui.min.js') }}" ></script> <script src="{{ asset('/js/tag-it.js')}}" ></script> //css <link href="{{ asset('/css/jquery-ui.css') }}" rel="stylesheet" > <link href="{{ asset('/css/jquery.tagit.css') }}" rel="stylesheet">
2,创建tags-container
// <div class="control-group"> <label class="control-label" for="tags">{{ translang("Tags") }}</label> {!! Form::hidden('tags',request('tags'),array('id' => 'tags')) !!} {!! Form::hidden('hasTags',$tags->lists('name')->toJson(),array('id' => 'hasTags')) !!} <div class="controls"> <ul id="tags-container"> <!-- Existing list items will be pre-added to the tags --> </ul> </div> </div>
3,初始化tags插件
$(document).ready(function(){ var obj = $("#tags-container") if( obj.length > 0 ){ var availableTags ; var hasTags = $("#hasTags").val(); availableTags = eval('(' + hasTags + ')'); obj.tagit({ availableTags : availableTags, singleField: true, singleFieldNode: $('#tags') }); } });
4,效果图如下:

Leave a Reply