464   CSS jQuery JS Laravel PHP

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,效果图如下:

QQ图片20151103200654



Leave a Reply

Your email address will not be published. Required fields are marked *