Can be added by clicking on the following common tags can also be added through the text box, enter the label will be affixed, when added will automatically determine whether the current label has been added, if added just do not repeat add. No add, limit up to 5 labels added.
Html:
| The code is as follows |
Copy Code |
| <div id= "Page" >
Article Tags:
<div class= "Tagbox" >
<div id= "Tags" >
</div>
<div class= "Clearfix" ></div>
<input type= "text" value= "" name= "tag" style= "Border:none;outline:none"/>
<div class= "old" >
Common Tags:
<div class= "Clearfix" ></div>
<span class= "tag" id= "234" name= "tags" > tags </span><span class= "tag" id= "Name=" the "Landscape" > Landscape </span> <span class= "tag" id= "Name=" Music > Music </span>
</div>
</div>
</div> |
Css:
| The code is as follows |
Copy Code |
| *{
margin:0;
padding:0;
}
html,body{
Background: #fff;
}
#page {
padding:20px;
}
. clearfix{
Clear:both;
}
. tagbox{
border:1px solid #ccc;
width:200px;
height:200px;
padding:10px;
position:relative;
}
. tag{
Background:lightblue;
Color: #fff;
PADDING:2PX 5px;
Display:block;
Float:left;
margin:5px 5px 5px 0;
}
#tags {
margin-bottom:10px;
Overflow-y: auto;
}
. old{
Position:absolute;
bottom:5px;
left:5px;
}
. Tagbox span{
Cursor:pointer;
} |
Js:
| The code is as follows |
Copy Code |
| $ (function () {
$ ('. Tagbox '). Click (function () {
$ ("Input[name= ' tag ']"). focus ();
})
$ (document). On ("click", "#tags span", function () {
$ (this). Remove ();
});
$ ('. old span '). Click (function () {
Ids=new Array ();
var txt=$ (this). attr (' name ');
var id=$ (this). attr (' id ')
$ (' #tags. Tag '). each (function () {
ids+=$ (This). attr (' id ') + ', '
});
if (ids== ') {
Ids=new Array ();
}else{
ids = Ids.split (",");
}
if (ids.length>5) {
Alert (' tag: add up to 5! ');
return false;
};
var exist=$.inarray (id,ids);
if (exist<0) {
$ (' #tags '). Append (' <span id= ' +id+ ' name= ' +txt+ "class= '" tag "> ' +txt+ ' </span> ')
}
})
$ ("Input[name= ' tag ']"). Bind (' KeyUp ', function (event) {
if (event.keycode==13) {
var txt=$ (this). Val ();
if (txt!= ') {
Txts=new Array ();
$ (' #tags. Tag '). each (function () {
txts+=$ (This). attr (' name ') + ', '
});
if (txts== ') {
Txts=new Array ();
}else{
txts = Txts.split (",");
}
if (txts.length>5) {
Alert (' tag: add up to 5! ');
return false;
};
var exist=$.inarray (txt,txts);
if (exist<0) {
$ (' #tags '). Append (' <span name= ' +txt+ ' class= ' tag ' > ' +txt+ ' </span> ')
$ (this). Val (');
}else{
$ (this). Val (');
}
}
}
});
}) |
