Posts Tagged Tags

Select tags(words) from one list to another using jQuery

Posted by admin in JavaScript, jQuery on April 11th, 2009

Select tags using jQuery

Select tags using jQuery




You can view the working demo here.

Here I am showing an example in which we can select tags from given tag cloud using jQuery. The code the easy to understand and easy to customize as per requirement. I have created two DIVs. First DIV contains all the tags when page load. We can select tags from first DIV by double clicking on the tags. We can also remove selected tags from second DIV by double clicking on tag. We can also sort the tags by using filters (like:- All, Popular, and New). We can get the IDs of selected tags by clicking the submit button. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Select tags(words) from one list to another using jQuery</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="page">
  <div class="form">
  <h3>Select tags(words) from one list to another using jQuery.</h3>
  <br />
  <div class="formbox">        
      <div id="tags_left" class="alltags tagsbox">
            <a href="javascript:void(0);" class="ctagleft all new" tagid="2">Design</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="3">Gadgets</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="4">Hardware</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="5">Industry News</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="6">Linux/Unix</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="7">Microsoft</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="8">Programming</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="9">Security</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="10">Software</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="11">Business/Finance</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="12">World News</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="13">Political News</a>
            <a href="javascript:void(0);" class="ctagleft all popular" tagid="14">Political Opinion</a>
            <a href="javascript:void(0);" class="ctagleft all popular" tagid="15">Environment</a>
            <a href="javascript:void(0);" class="ctagleft all popular" tagid="16">General Sciences</a>
            <a href="javascript:void(0);" class="ctagleft all popular" tagid="17">Space</a>
            <a href="javascript:void(0);" class="ctagleft all popular" tagid="18">PC Games</a>
            <a href="javascript:void(0);" class="ctagleft all popular" tagid="19">Playable Web Games</a>
        </div>
   		<div id="tags_right" class="seltags tagsbox"></div>
  </div>
  <div class="float_break"></div>
  <div style="float:left; padding:0px 1px 0 4px;"><h6>Double click on tag to select</h6></div>
  <div style="float:left; padding:0px 0 0 210px;"><h6>Double click on tag to remove</h6></div>
  <div class="float_break"></div>
  <h6>
  	&nbsp;Sort by: <a href="javascript:void(0);" id="show_all">All</a>&nbsp;&nbsp;
  	<a href="javascript:void(0);" id="show_popular">Popular</a>&nbsp;&nbsp;
  	<a href="javascript:void(0);" id="show_new">New</a>
  </h6>
  <br />
  <div class="float_break"></div>
  <div class="formbox">
    <input type="button" value="Submit" id="submit"/>
    <div class="float_break"></div>
  </div>
</div>
</div>
</body>
</html>
<script language="javascript">
	$(document).ready(function () {
		$('.ctagleft').dblclick(function() {
			var tag_clone = $(this).clone(true);
 
			if ($(tag_clone).hasClass('ctagleft')) {
				$(tag_clone).removeClass('ctagleft').addClass('ctagright');
				$('#tags_right').append(tag_clone).append(' ');
			}
			else if ($(tag_clone).hasClass('ctagright')) {
				$(tag_clone).removeClass('ctagright').addClass('ctagleft');
				$('#tags_left').append(tag_clone).append(' ');
			}
			$(this).remove();
		});
 
		$('.ctagright').dblclick(function() {
			var tag_clone = $(this).clone(true);
 
			if ($(tag_clone).hasClass('ctagleft')) {
				$(tag_clone).removeClass('ctagleft').addClass('ctagright');
				$('#tags_right').append(tag_clone).append(' ');
			}
			else if ($(tag_clone).hasClass('ctagright')) {
				$(tag_clone).removeClass('ctagright').addClass('ctagleft');
				$('#tags_left').append(tag_clone).append(' ');
			}
			$(this).remove();
		});
 
		$('#submit').click(function() {
			var tags = '';
			$('#tags_right .ctagright').each(function() {
				var tag_id = $(this).attr('tagid');
				tags += tag_id + ',';
			});
 
			if (tags == '') { tags = 'No tag selected yet.'; }
			alert('Selected tags ID are: ' + tags);
		});
 
		$('#show_popular').click(function(){
			$('#tags_left .all').css("display", "none");
			$('#tags_left .popular').css("display", "");
		});
		$('#show_all').click(function(){
			$('#tags_left .all').css("display", "");
		});
		$('#show_new').click(function(){
			$('#tags_left .all').css("display", "none");
			$('#tags_left .new').css("display", "");
		});
	});
</script>

, ,

No Comments