If you are a Sina Blog user, you may find that you can tag your post before posting a blog and will not refresh the current page, next, I will introduce how to add tags to the post when publishing a similar Sina Blog article. I hope this method will be helpful to you.
You can click the common labels below or enter the text box to add the labels. After you press enter, the labels will be pasted. When you add the labels, the system will automatically determine whether the current labels have been added, if you have already added a repeat .. if not, add up to five TAGs.
HTML:
| The Code is as follows: |
Copy code |
<Div id = "page">
Article Tag:
<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 labels:
<Div class = "clearfix"> </div>
<Span class = "tag" id = "234" name = "tag"> tag </span> <span class = "tag" id = "34" name = "Landscape"> landscape </span> <span class = "tag" id = "21" 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 ('add up to five tags! ');
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 ('add up to five tags! ');
Return false;
};
Var exist = $. inArray (txt, txts );
If (exist <0 ){
$ ('# Tags'). append (' <span name = '+ txt +' class = "tag"> '+ txt +' </span> ')
$ (This). val ('');
} Else {
$ (This). val ('');
}
}
}
});
}) |
