Skip to content

hello, ChamWade #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
benjhz wants to merge 2 commits into
base: master
Choose a base branch
from
Open

hello, ChamWade #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
af1726f
fix layout bug in ie
benjhz Dec 29, 2014
b93df4d
select a tag and delete it
benjhz Dec 29, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion css/input_tag.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,14 @@
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.input-tag>* {
.input-tag div {
vertical-align: middle;
display: inline-block;
margin: 2px;
line-height: inherit;
font-size: inherit;
*display:inline;
*zoom:1;
}
.input-text{
padding: 1px;
Expand Down
1 change: 1 addition & 0 deletions input_tag.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<title>input-tag demo</title>
<link rel="stylesheet" type="text/css" href="css/input_tag.css">
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
<body>
<div class="input-tag">
Expand Down
80 changes: 69 additions & 11 deletions js/input_tag.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,17 @@ $.fn.extend({inputtag: function(){
var self = this;
var input_text = self.children('.input-text');
var input_field = self.children('.input-field');
var isDelSelectedTagsEventSet = false;

self.click(function(){
input_text.focus();
self.click(function(e){
var target = getEventTarget(e);
if(!$(target).hasClass('tag')){
resetSelectedTags();
input_text.focus();
}
}).delegate('.tag', 'click', function(){
resetSelectedTags();
selectTag($(this));
});

input_text.focus(function(){
Expand All @@ -14,36 +22,42 @@ $.fn.extend({inputtag: function(){
self.removeClass('focus');
});

input_text.keydown(function(e){
$(document).click(function(e){
var target = getEventTarget(e);
var selefElements = self.find('*').add(self);
if($.inArray(target, selefElements) == -1){
resetSelectedTags();
detachDelSelectedTagsEvent();
}
else{
attachDelSelectedTagsEvent();
}
});

input_text.keydown(function(e){
//enter key or comma: to finish a tag
if(e.keyCode == 13 || e.keyCode == 188){

e.preventDefault();
preventDefault(e);

var tag_content = $(this).val();
if(!tag_content){
return;
}

var tag = $('<div class="tag">').text( tag_content );
var tag_types = ['primary', 'success', 'info', 'warning'];
var tag_type_index = Math.floor( Math.random()*(tag_types.length-1) );
var tag_type = tag_types[tag_type_index];
tag.addClass('tag-'+tag_type);

tag.addClass('tag-primary');
$(this).before(tag);
$(this).val('');
}

if(e.keyCode == 8){//delete key: to remove a tag

if($(this).val().length == 0){
$(this).siblings('.tag').last().remove();
}
}

input_field.val();

var arr = [];
self.children('.tag').each(function(){
arr.push($(this).text())
Expand All @@ -59,4 +73,48 @@ $.fn.extend({inputtag: function(){
width_helper.text( $(this).val() );
$(this).width( width_helper.width()+40 );
});

function attachDelSelectedTagsEvent(){
if(isDelSelectedTagsEventSet){
return;
}
$(document).bind('keydown.delSelectedTags', function(e){
if(e.keyCode == 8){
if(!self.hasClass("focus")){
preventDefault();
$('.tag-warning', self).remove();
}
}
});
isDelSelectedTagsEventSet = true;
}

function detachDelSelectedTagsEvent(){
$(document).unbind('keydown.delSelectedTags');
isDelSelectedTagsEventSet = false;
}

function resetSelectedTags(){
$('.tag-warning', self).removeClass('tag-warning').addClass('tag-primary');
}

function selectTag($tag){
$tag.addClass('tag-warning').removeClass('tag-primary');
}

function getEventTarget(e){
var evt = e || window.event;
return evt.target || evt.srcElement;
}

function preventDefault(e){
var evt = e || window.event;
if(evt.preventDefault){
evt.preventDefault();
}
else{
evt.returnValue = false;
}
}

}});