I found a bunch of ready-made controls on the Internet, but it took a lot of time to get familiar with them and use them in combination with my current system. This time should be similar to the cost I made myself.
Then I 'd better do it myself. I can better understand how it works, and it will be easier to use it later.
My goal is to use this as a control and reduce the coupling of external programs, that is, to minimize the necessary conditions for external programs to use, without forgetting to add any settings, the program will be suspended.
If you may or even want to, you only need to reference one Jquery and other javasrt files are generated by the program.
Finally, I want to use the dynamic controls I mentioned earlier. Today I will first study and use the following small html model to test the feasibility, confirm the error and change it to ASP at the start of construction.. NET.
This program has several important issues that need attention:
The trigger mode of the drop-down menu, how to draw the content of the drop-down menu, how to capture the trigger of the menu event, and where to capture the selected event Value
After the above problem is solved, ASP. NET is used to re-write the code. Therefore, when designing the child model, you must pay attention to whether it can be applied to ASP. NET.
The concept is as follows:
My plan is to design a button that is triggered by its OnClick event. Then JQuery will capture the menu array dynamically generated by ASP. NET to generate menus dynamically,
You must be able to set three events for mouseover mouseout click in the generated menu. The first two events are for the sake of appearance, so that the user can know that there is an action. After the click event is triggered,
Store the selected value in the server control TextBox of asp.net, so that the value can be sent back to the server for processing in PostBack.
Copy codeThe Code is 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 allows you to enter values (1) </title>
<Script type = "text/javascript">
$ (Document). ready (function (){
// Animation speed
Var speed = 500;
// Event handling in the menu
$ ("# 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 ());
}
});
// Dynamically generate the option of the drop-down menu, and read the output menu from the array.
$ ("# DivPop"). append ("<div> test1 </div> ");
$ ("# DivPop"). append ("<div> test2 </div> ");
// Bind event processing
$ ("# BtnDDL"). click (function (event ){
// Cancel event bubbling
Event. stopPropagation ();
// Set the position of the pop-up layer
Var offset = iterator (event.tar get). offset ();
// Alert(objects (event.tar get). width ());
Var inID = $ (this). get (0). getAttribute ("inputid ");
// Set the priority of the drop-down list based on the input and button priority.
$ ("# DivPop") [0]. style. width = ($ ("#" + inID ). width () + $ (this ). width () + 10) + "px ";
// Click the blank area to hide the pop-up layer
$ (Document). click (function (event) {$ ("# divPop"). hide (speed )});
// Set the position displayed in the drop-down list
$ ("# DivPop" detail .css ({top: offset. top + detail (event.tar get). height () + 10 + "px", left: offset. right });
// Switch the display status of the pop-up layer
$ ("# DivPop"). toggle (speed );
});
});
</Script>
</Head>
<Body>
<Div>
<Br/>
<Input name = "txtKey" type = "text" maxlength = "30" size = "30" id = "txtKey" style = "Padding: 2px; "/> <button id =" btnDDL "inputid =" txtKey "> keys </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>
</Html>
There are also various problems to be solved, that is, to allow divPop to be dynamically generated ..
