Histórico da Página

<script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_Carousel.js?version=1&modificationDate=1521836856000&api=v2"></script>
<script type="text/javascript" src="/download/attachments/347442711/TOTVS_Accordion.mutate.js?version=1&modificationDate=1521827027000&api=v2"></script>
<script type="text/javascript" src="/download/attachments/347442711/TOTVS_Accordion.js?version=1&modificationDate=1521827211000&api=v2"></script>
<script type="text/javascript" src="/download/attachments/330843097/TOTVS_DocumentSearcher.js?version=1&modificationDate=1521838432570&api=v2"></script>
<link rel="stylesheet" type="text/css" href="/download/attachments/330843097/TOTVS_Carousel.css?version=1&modificationDate=1521836856000&api=v2">
<link rel="stylesheet" type="text/css" href="/download/attachments/347442711/TOTVS_Accordion.css?version=1&modificationDate=1521826790000&api=v2">

<div id="container">
    <h1>TagEditor</h1>
    <p>Easy & Quick Way to add tag</p>
	<ul class="tags">
           <li class="addedTag">Web Deisgn<span onclick="$(this).parent().remove();" class="tagRemove">x</span><input type="hidden" name="tags[]" value="Web Deisgn"></li>
    
            <li class="addedTag">Web Develop<span onclick="$(this).parent().remove();" class="tagRemove">x</span><input type="hidden" name="tags[]" value="Web Develop"></li>
    
            <li class="addedTag">SEO<span onclick="$(this).parent().remove();" class="tagRemove">x</span><input type="hidden" name="tags[]" value="SEO"></li>
            			<li class="tagAdd taglist">  
              				 <input type="text" id="search-field">
			            </li>
	</ul>
  </div>

<style>
ol, ul {
    list-style: outside none none;
}
#container {
    margin: 0 auto;
    width: 60rem;
}
.tags {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #ccc;
    display: table;
    padding: 0.5em;
    width: 100%;
}
.tags li.tagAdd, .tags li.addedTag {
    float: left;
    margin-left: 0.25em;
    margin-right: 0.25em;
}
.tags li.addedTag {
    background: none repeat scroll 0 0 #019f86;
    border-radius: 2px;
    color: #fff;
    padding: 0.25em;
}
.tags input, li.addedTag {
    border: 1px solid transparent;
    border-radius: 2px;
    box-shadow: none;
    display: block;
    padding: 0.5em;
}
.tags input:hover {
    border: 1px solid #000;
}
span.tagRemove {
    cursor: pointer;
    display: inline-block;
    padding-left: 0.5em;
}
span.tagRemove:hover {
    color: #222222;
}
P, H1 {
    text-align: center;
}
p {
    color: #ccc;
}
h1 {
    color: #6b6b6b;
    font-size: 1.5em;
}



</style>


<script>
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});
$(document).ready(function() {
    $('#addTagBtn').click(function() {
        $('#tags option:selected').each(function() {
            $(this).appendTo($('#selectedTags'));
        });
    });
    $('#removeTagBtn').click(function() {
        $('#selectedTags option:selected').each(function(el) {
            $(this).appendTo($('#tags'));
        });
    });
    $('.tagRemove').click(function(event) {
        event.preventDefault();
        $(this).parent().remove();
    });
    $('ul.tags').click(function() {
        $('#search-field').focus();
    });
    $('#search-field').keypress(function(event) {
        if (event.which == '13') {
            if (($(this).val() != '') && ($(".tags .addedTag:contains('" + $(this).val() + "') ").length == 0 ))  {



                    $('<li class="addedTag">' + $(this).val() + '<span class="tagRemove" onclick="$(this).parent().remove();">x</span><input type="hidden" value="' + $(this).val() + '" name="tags[]"></li>').insertBefore('.tags .tagAdd');
                    $(this).val('');

            } else {
                $(this).val('');

            }
        }
    });

});
  keyWordContainerDiv"></div>


<style>
	.Keyword-Container-Wrapper{
		width: 100%;
		height: auto;
		min-height: 30px;
	}


	.Keyword-Container-Wrapper-Span{
		padding: 5px;
		background-color: #3572b0;
		color: #fff;
	}
</style>


<script>


TOTVS_Keywords = {
	Id: 'KeyWord1',
	Container: null,
	Init: function(id, nameOfContainer){
		this.Id = id;
		this.Container = nameOfContainer; 
	},
	Build: function(id, nameOfContainer){
			this.Init(id, nameOfContainer);


			this.Container = (typeof this.Container === "string") ? document.getElementById(this.Container) : this.Container; 


			var _keyWordContainerWrapper = document.createElement('div');		
			_keyWordContainerWrapper.id = this.Id + "_ContainerWrapper";
			_keyWordContainerWrapper.className = "Keyword-Container-Wrapper";
			_keyWordContainerWrapper.contentEditable = true;
			_keyWordContainerWrapper.onkeypress = function(e){
				var _evt = e || window.event;
				
				var keywords = this.innerHTML.replace(/(?i)<span[^>]*>/gi)split(' ');

				if(keywords.length > 0)
				{
					for(var i = 0; i < keywords.length; i++){
						var _span = document.createElement(); 
						_span.id = this.id + "_" + (i+1) + _span;
						_span.name = _span.id;
						_span.className = 'Keyword-Container-Wrapper-Span';
					}
				}
			}


			this.Container.appendChild(_keyWordContainerWrapper);
	}
}


TOTVS_Keywords.Build('TOTVS_KeyWord', 'keyWordContainerDiv')


</script>