Internet search, there are a lot of ready-made controls, but ready-made I have to understand, to combine my current system to apply, it will take a lot of time, this time with my own a cost should be almost
Then I might as well have a better understanding of how it works and it will be easier to use later.
My goal is to make this a control to use, and to reduce the coupling of the external program use, that is, the external program to use the necessary requirements to minimize, lest one forget gash to set, the program is dead.
If possible even hope, will only need to refer to a Jquery other javasciprt are generated by the program.
Finally, I hope to be able to combine the dynamic control to use before, today I will first study, using the following HTML to do the prototype, to test the feasibility of first, confirm the correct start to change to ASP.net control.
This program has several important issues that need to be noted:
Drop-down menu of the trigger, drop-down menu content How to Draw, menu event trigger crawl, crawl to select the event after the value of where
After the above problems are solved, the asp.net will be used in the back to compose, so in the design of the prototype, it is necessary to pay attention to its ability to apply on the ASP.net
The idea is as follows:
This is my intention is to design a button by its OnClick event to trigger, then by the JQuery grab asp.net dynamically generated menu array, to dynamically generate the menu,
The resulting menu, to be able to set three events mouseover Mouseout Click, the first two are for the beautiful, so that user only know there is in action, click event triggered,
Stores the selected value into the ASP.net server control TextBox so that the value can be returned to the server side in postback.
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<title> use Jquery to implement a Drop-down menu that can enter values (i) </title>
<script type= "Text/javascript" >
$ (document). Ready (function () {
Animation speed
var speed = 500;
menu-related processing events
$ ("#divPop div"). Live ("MouseOver mouseout click", Function (event) {
if (Event.type = = "MouseOver") {
$ (this). addclass (' highlight ');
$ (this) [0].style.backgroundcolor = ' #E6F5FA ';
}
if (Event.type = = "Mouseout") {
$ (this). Removeclass ("highlight");
$ (this) [0].style.backgroundcolor = ' #DDFFDD ';
}
if (Event.type = = "click") {
var InID = $ ("#btnDDL"). Get (0). getattribute ("inputID");
Alert ($ (this). html ());
$ ("#" + InID). Val ($ (this). html ());
}
});
The option to dynamically generate the Drop-down menu, and then read the Create menu from the array
$ ("#divPop"). Append ("<div>test1</div>");
$ ("#divPop"). Append ("<div>test2</div>");
Binding Event Handling
$ ("#btnDDL"). Click (Function (event) {
Cancel Event Bubbling
Event.stoppropagation ();
Setting the pop-up layer location
var offset = $ (event.target). offset ();
Alert ($ (event.target). width ());
var InID = $ (this). Get (0). getattribute ("inputID");
Set the width of the pull list according to the input and button width
$ ("#divPop") [0].style.width = ($ ("#" + InID). Width () + $ (this). Width () + ten) + "px";
Click a blank area to hide the pop-up layer
$ (document). Click (Function (Event) {$ ("#divPop"). Hide (Speed)});
Set the drop down menu to show the location
$ ("#divPop"). CSS ({top:offset.top + $ (event.target). Height () + + "px", left:offset.right});
Toggle the display status of the pop-up layer
$ ("#divPop"). Toggle (speed);
});
});
</script>
<body>
<div>
<br/><br/><br/>
<input name= "Txtkey" type= "text" maxlength= "the Size=" "id=" "Txtkey" "style=" padding:2px; "/><button id=" Btnddl "inputid=" Txtkey "> </button>
</div>
<!--pop-up layer-->
<div id= "Divpop" style= "Background-color: #DDFFDD; Border:solid 1px #000000; Position:absolute; Display:none;
width:300px; height:100px; " >
</div>
</body>
There are also problems to be solved in this, is to let Divpop also dynamic generation.
