<!doctype html>
<meta charset= "GBK" >
<title> Select labels to text field effects, multiple selection/filter repeat/adjustable number @mr.think</title>
<style>
/*reset CSS Tutorial * *
body,input{letter-spacing:1px;font:12px/1.5 tahoma,arial,5b8b4f53}
div,h2,p,input,select{margin:0;padding:0}
Input{vertical-align:middle}
H1{font-size:1em;font-weight:normal}
H1 A{background: #047;p adding:2px 3px;color: #fff; Text-decoration:none}
H1 a:hover{background: #a40000; color: #fff; Text-decoration:underline}
H3{color: #888; font-weight:bold;font-size:1em;margin:1em auto;position:relative}
/*demo css*/
#demo input{_margin-top:1px;padding-left:5px;border:1px solid #999; width:700px;height:20px;font-size:14px;color:# 000}
#dropbox {display:none;z-index:9999;padding:5px;background: #fff; border:1px solid #999; border-top:0;z-index:999}
#dropbox A{margin-right:8px;text-decoration:none}
#dropbox A:hover{text-decoration:underline}
#dropbox p{line-height:24px}
#dropbox em.close{float:right;color: #999; Font-style:normal;cursor:pointer}
</style>
<meta name= "Author" content= "Mr.think Bluebird"/>
<meta name= "keywords" content= "mr.think, front-end development, Web front-end, front-end technology, front-end development, Web front-end development, user experience, website planning, website optimization, bluebird, Web effects, jquery,css,xhtml, Html,ue,seo tutorials, mr.think blogs, bluebird blogs, php tutorials enthusiasts, Bluebirdsky "/>
<meta name= "description" content= "Mr.think blog, Chinese network name Bluebird, is now focused on the Web front-end development, but also a fan of PHP." Love thinking, a little code neat, eat raw crab legs, Like meat. This is where I keep track of the trivia of knowledge and life. "/>
<body>
<!--demo Start-->
<div id= "Demo" >
<label for= "Tagsbox" ><strong> Tags: </strong><input type= "text" value= "point Me" class= "Tagsbox" Data-count= "Ten"/></label>
<!--data-count to select the maximum number of labels, after setting will overwrite the maxcount--> set in the plugin
<div id= "Dropbox" >
<em class= "Close" title= "off" > Off </em>
<p><strong> Tips:</strong> Select the following hot tags and used labels, the labels will automatically arrange to form fields. </p>
<p><strong> Popular Tags: </strong><a href= "javascript:void (0)" > Time stroll </a><a href= " Javascript:void (0) ">javascript</a><a href=" javascript:void (0) ">jquery plugin</a><a href=" Javascript:void (0) "> That year </a><a href=" javascript:void (0) ">jquery plugin </a><a href=" javascript: void (0) "> Simple </a><a href=" javascript:void (0) "> Starry </a><a href=" javascript:void (0) "> Dream Field < /a><a href= "javascript:void (0)" > Sunny </a><a href= "javascript:void (0)" >mrthink.net</a> </p>
<p><strong> tags you have used: </strong><a href= "javascript:void (0)" > Xu Wei </a><a href= " Javascript:void (0) ">sophie zelmani</a><a href=" javascript:void (0) "> Faye Wong </a><a href=" Javascript:void (0) "> Little Juan & Valley residents </a><a href=" javascript:void (0) ">ke$ha</a><a href=" Javascript:void (0) ">shakira</a><a href=" javascript:void (0) "> Park tree </a><a href=" javascript: void (0) "> Luo </a></p>
</div>
<!--//pop-up dropdown box-->
<BR style= "Clear:both"/>
<BR style= "Clear:both"/>
<input value= "I was used to test" style= "width:200px"/>
<select>
<option> I was used to test the Drop-down list </option>
<option>00</option>
<option>00</option>
<option>00</option>
</select>
</div>
<input value= "I was used to test" style= "width:200px"/>
<select>
<option> I was used to test the Drop-down list </option>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<!--demo End-->
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js "><script>
/*******************************
* @author Mr.think
* @author Blog http://mrthink.net/
* @2010.11.10
* Be free to reprint and use, but please specify the copyright ownership
*******************************/
Call Bgiframe to solve the problem of hiding the dropdown list under IE6
bgiframe function Copyright (c) 2006 Brandon Aaron (Http://brandonaaron.net)
;(function ($) {
$.fn.bgiframe = $.fn.bgiframe = function (s) {
This is a for IE6
if ($.browser.msie &&/6.0/.test (navigator.useragent)) {
s = $.extend ({
Top: ' auto ',//auto = = Currentstyle.bordertopwidth
Left: ' auto ',//auto = = Currentstyle.borderleftwidth
Width: ' auto ',//auto = = Offsetwidth
Height: ' auto ',//auto = = Offsetheight
Opacity:true,
SRC: ' javascript:false; '
}, S | | {});
var prop = function (n) {return n&&n.constructor==number?n+ ' px ': n;},
html = ' <iframe class= ' bgiframe ' frameborder= ' 0 ' tabindex= '-1 ' src= ' ' +s.src+ ' ' +
' style= ' display:block;position:absolute;z-index:-1; ' +
(S.opacity!== false? ') Filter:alpha (opacity= ' 0 '); ': ') +
' Top: ' + (s.top== ' auto '? ') Expression ((parseint (this.parentnode.currentstyle.bordertopwidth) | | 0 *-1) + ' px ') ':p rop (s.top)) + '; ' +
' Left: ' + (s.left== ' auto '? ') Expression ((parseint (this.parentnode.currentstyle.borderleftwidth) | | 0 *-1) + ' px ') ':p rop (s.left)) + '; ' +
' Width: ' + (s.width== ' auto '? ') Expression (this.parentnode.offsetwidth+ ' px ') ':p rop (s.width)) + '; ' +
' Height: ' + (s.height== ' auto '? ') Expression (this.parentnode.offsetheight+ ' px ') ':p rop (s.height)) + '; ' +
'/> ';
Return This.each (function () {
if ($ (' > Iframe.bgiframe ', this). length = = 0)
This.insertbefore (document.createelement (HTML), this.firstchild);
});
}
return this;
};
}) (jquery);
Select Label to Text field plugin
;(function () {
$.fn.extend ({
Iselecttags:function (options) {
var iset={
Name: '. Tagsbox ',//form or class or ID name
drop:$ (' #dropbox '),//Popup positioning
PS Tutorial eudoclass:$ (' #dropbox >p>a '),//selectable label positioning
close:$ (' Em.close '),//Close button positioning
Separator: ', ',//label separator, recommended to use English comma
MAXCOUNT:10//default limit, or you can set the Data-count value of the form to override the default value
}
options = Options | | {};
$.extend (Iset, Options);
var _input=$ (iset.name);
var _inputval=_input.val ();
var _arr=new array (); An array of stored labels
var _left=_input.offset (). Left; Left absolute distance
var _top=_input.offset (). Top+_input.outerheight (); Absolute distance, here to add the height of the form
var _dropw=_input.outerwidth ()-parseint (_input.css (' border-left-width '))-parseint (_input.css (' Border-right-width '))-parseint (Iset.drop.css (' paddingleft '))-parseint (Iset.drop.css (' paddingright '));
Iset.drop.css ({' position ': ' absolute ', ' left ': _left+ ' px ', ' top ': _top+ ' px ', ' width ': _dropw+ ' px '});
The width of the pop-up box, which is calculated to be equal to the actual width of the form. can also be defined directly in the style.
var _txt=null;
var _maxcount=parseint (_input.attr (' Data-count '))//Limit number of selections
if (isNaN (_maxcount)) {
_maxcount=iset.maxcount
}
_input.click (function () {
Iset.drop.show ();
Iset.drop.bgiframe ()//call Bgiframe plug-in to solve the z-index infinite problem of IE6 Select
}. Bind (' keyup change ', function () {
You can extend the relevant judgment in the case of manual input labels here
The IF statement avoids emptying the first word identifier a comma when it is again selected
if ($ (this). val () = = ') {
_arr = new Array ();
}else {
_arr = $ (this). Val (). Split (Iset.separator);//update label values after user manually deletes or modifies tag values
}
});
$ (document). Click (function (e) {
Close the pop-up box when you click the Non-pop-up area
The following if statement is used to determine whether the incoming class or ID
if (Iset.name.charat (0) = = ' # ') {
if (e.target.id!=iset.name.substring (1)) {
Iset.drop.hide ();
}
}else if (iset.name.charat (0) = = '. ') {
if (e.target.classname!=iset.name.substring (1)) {
Iset.drop.hide ();
}
}
});
Iset.drop.click (function (e) {
Block Popup Area Default event
E.stoppropagation ();
});
Iset.pseudoclass.click (function () {
Label selection
_txt=$ (This). text ();
The following $.inarray are used to determine whether repetition
If you want feedback to repeat the prompts or step out of the limit, you can improve the following if statement
if (($.inarray (_txt,_arr) ==-1) && (_arr.length<_maxcount)) {
_arr.push (_txt);
_inputval=_arr.join (Iset.separator);
if (_inputval.charat (0) = = ', ') {
_inputval.replace (/,/, "")
// }
_input.val (_inputval);
}
});
Close button
Iset.close.click (function () {
Iset.drop.hide ();
});
}
});
}) (jquery);
Plug-in calls
$ (function () {
$ (' #demo '). Iselecttags ();
/*
* can also pass in parameter calls
$ (' #test '). Iselecttags ({
Name: ' #test ',
drop:$ ('. Drop '),
...
});
*/
});
</script>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
