js标签小技巧

wapysun

浏览: 21491520 次
性别:
来自: 杭州

最近访客更多访客>>

devcang

hunankeda110

辽东小小

apex53

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-06 ( 77)
2012-05 ( 587)
2012-04 ( 177)
更多存档...

javascript的标签小技巧(仿flickr做的)
在ie和firefox中均能正常运行:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
a.tagrsUsed:link, a.tagrsUsed:visited, a.tagrsUsed:hover, a.tagrsUsed:active { color: #95b5bd; text-decoration: none; background: #ffffff; font-size: 12px; }
a.tagrsUnUsed:link, a.tagrsUnUsed:visited, a.tagrsUnUsed:hover, a.tagrsUnUsed:active { color: #0063DC; text-decoration: none; background: inherit; font-size: 12px; }
a.tagrsUnUsed:hover, a.tagrsUnUsed:active { text-decoration: underline; }
</style>
<script language="JavaScript">
String.prototype.trim = function(){
return this.replace(/(^\s*)|(\s*$)/g, '');
}
function handleTags(tagToAdd){
var input = document.getElementById('addtagbox');
var value = input.value.trim();
var inputA = [];
if (value != '') inputA = value.split(' ');
var removeIndexA = whereIsTag(inputA, tagToAdd);
var link = document.getElementById('popTags'+tagToAdd);
if (removeIndexA.length==0) {
inputA.unshift(tagToAdd);
if (link) link.className = 'tagrsUsed';
} else {
for (var r=0;r<removeIndexA.length;r++) {
inputA.splice(removeIndexA[r],1);
}
if (link) link.className = 'tagrsUnUsed';
}
var link = document.getElementById('popTags'+tagToAdd);
if (link) link.blur();
var value = '';
for (var t=0;t<inputA.length;t++) {
value+= (inputA[t].indexOf(' ') == -1) ? inputA[t] : '"'+inputA[t]+'"';
if (t+1 < inputA.length) value+= ' ';
}
input.value = value;
}
function whereIsTag(tagA, tagToCheck){
var A = [];
for (var t=0;t<tagA.length;t++) {
var tag = tagA[t];
if (tagToCheck.toLowerCase() == tag.replace(' ','').toLowerCase()) {
A.unshift(t);
}
}
return A;
}
</script>
</head>
<body>
<div class="OneOption">
<h4>Add a tag to the <i>selected</i> photos</h4>
<p><input id="addtagbox" name="tag" type="text"> <input name="done_addtag" value="ADD" class="Butt" type="submit"></p>
<div style="margin-top: 5px; font-size: 12px;" id="tagpopular">click a tag:
<a class="tagrsUnUsed" href="#" id="popTagszjh" onclick="handleTags('zjh')">zjh</a>
<a class="tagrsUnUsed" href="#" id="popTags哦" onclick="handleTags('哦')">哦</a>
<a class="tagrsUnUsed" href="#" id="popTags额" onclick="handleTags('额')">额</a>
<a class="tagrsUnUsed" href="#" id="popTags哟" onclick="handleTags('哟')">哟</a>
<a class="tagrsUnUsed" href="#" id="popTags好" onclick="handleTags('好')">好</a>
<a class="tagrsUnUsed" href="#" id="popTags杯子2" onclick="handleTags('杯子2')">杯子2</a>
<a class="tagrsUnUsed" href="#" id="popTags美女" onclick="handleTags('美女')">美女</a>
</div>
</div>
</body>
</html>

分享到：