jquery Simulation Implementation of SELECT Click Selection Effect "with demo source download" _jquery

This example describes the select Click Selection Effect of the jquery simulation implementation. Share to everyone for your reference, specific as follows:

Sometimes some HTML elements don't allow us to control with style controls, but the need to shoot the chicken or the customer needs this effect, but also to make each browser to show the same effect, this time will let us the so-called Front Siege division is very egg pain, customers will think that pay a little money to not let you toss something, Thought you were not doing anything. In the face of these customers who are ignorant of technology, technology for them is a piece of crap, think we are using the idea to write code to do the program, so all of our work as a result of the labor as cheap as a simple to pull out a bubble excrement just.

Although there is no modification of the default effect, but also have to face the effects of these customers and the requirements of the pain, so have to toss a few back and forth is not satisfied, HTML inside, can not control the style of the elements I am afraid, select is one of them, So today also to toss about this more like freedom not love style constraints of elements, using the simulation of the way to achieve the effect of select.

The benefits of simulation can be arbitrary for style control, make a variety of effects, in each browser performance is consistent, to achieve the customer's pain requirements, but the same shortcomings are the same, the network is very slow or the client is not allowed to run the script///(although the chances of the script ban running is very low, Typically only has a server version of the browser will appear), the script is not loaded can affect its expiration, unable to operate,

In fact, this effect has long been widely used, is not what is fresh, we can look at a more new site can be found, the following is Taobao and Pat also use the simulation of the Select screenshot.

Taobao Simulation Select:

Pat Simulation Select:

This example implements the effect:

The idea of realization is simple, only two steps:

1, when the mouse to move into and click on the target elements, triggering a pop-up layer, the layer is loaded with the simulation of the different elements of the value

2, click to select the elements within the layer, you need to be clicked element text elements to the target element, and the elements within a number of parameter values to a hidden field to pass the value

So there is the following HTML, CSS and operation JS:

Html:

<span class= "SelectType" >
  <a title= "" href= "#" class= "IPT" id= "Selecttypetext" > All </a>
  <span id= "Selecttypemenu" >
    <a rel= "0" title= "" href= "#" > All </a>
    <a rel= "1" title= "" href= "#" > Products </a>
    <a rel= "2" title= "" href= "#" > Shop </a>
  </span>
  <input type= " Hidden "name=" "class=" IPT "value=" "id=" Selecttyperel ">
  <em class=" searcharrow hh abs "> dropdown selection </em>
</span>

Css:

SYSSELECT{WIDTH:76PX height:28px; line-height:28px border:1px solid #CCC font-size:14px; Sysselect option{height : 28px;
line-height:28px;} selecttype{position:relative; width:78px height:30px; line-height:30px; font-size:14px; selectType. ipt{width : 76px; height:28px; line-height:28px; border:1px solid #CCC; Display:inline-block; Text-decoration:none; Color: #000; text-indent:5px;
Outline:none;} SelectType Span{position:absolute; width:76px background-color: #fff; border:1px solid #CCC; border-top-style:dashed ; left:0px; top:22px; text-indent:6px; line-height:26px;
Display:none;} . SelectType span A{color: #333; display:block; text-decoration:none; SelectType span a:hover{background-color: #f60;
Color: #fff;} . selecttype. searcharrow{border-top:6px solid #666; border-left:6px solid #FFF border-right:6px solid #FFF Position: absolute; width:0; height:0; top:6px; right:12px; Cursor:pointer; -webkit-transition:-webkit-transform 0.2s ease-in; -moz-transition:-moz-transform 0.2s EASe-in; -o-transition:-o-transform 0.2s ease-in; Transition:transform 0.2s ease-in; Overflow:hidden;
text-indent:-2000px;} . SelectType. Searcharrowrote{-moz-transform:rotate (180deg);-moz-transform-origin:50% 30%;-webkit-transform: Rotate (180deg); -webkit-transform-origin:50% 30%; -o-transform:rotate (180DEG); -o-transform-origin:50% 30%; Transform:rotate (180deg); transform-origin:50% 30%; Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=2);

 TOP:-9PX/9;}

Js:

$ ("#selectTypeText"). Click (function () {
  $ (this). Next ("span"). Slidedown (m);
  $ (". Searcharrow"). AddClass ("Searcharrowrote");
$ ("#selectTypeText"). blur (function () {
   $ (this). Next ("span"). Slideup;
   $ (". Searcharrow"). Removeclass ("Searcharrowrote");
$ ("#selectTypeMenu >a"). Click (function () {
  $ (#selectTypeText). Text ($ (this). text ());
  $ ("#selectTypeRel"). attr ("Value", $ (this). attr ("rel"));
  $ (this). Parent (). Slideup ();
  $ (". Searcharrow"). Removeclass ("Searcharrowrote");
  return false;
});

Are you still looking forward to my tirade? But I am sorry to tell you that the description has been completed, that is, so simple, a few lines of code a look also understand.

Is there anything you don't understand? That's no problem, please see demo, Click here to open .

Full Demo Source Click here to download this site .

More interested readers of jquery-related content can view the site topics: "jquery window Operation tips Summary", "jquery drag and drop effects and tips summary", "jquery common Plug-ins and Usage summary", "jquery Ajax Usage Summary", "jquery Table" ( Table) Summary of operations tips, jquery Extended techniques Summary, jquery Common Classic effects summary, jquery animation and special effects usage summary and jquery selector Usage Summary

I hope this article will help you with the jquery program design.