Final Effect Diagram:
Difficulty: Positioning, actually not difficult, get the parent element (province) position, and then set the city (initial hidden) position = parent element position offset N px
A div with a pop ID is a modal window
Let's talk about the process.
1.ajax read all the provinces and cities
2. The city is placed in a Div, the initial is hidden, and then give each province add an onclick event, control the city of this province show or hide
3. Complete.
Easy to say, but look at the code to understand! Have not understand can leave a message here, I will pay attention to!
HTML code
| <%@ Page language= "C #" autoeventwireup= "true" codefile= "Default.aspx.cs" inherits= "Test_default"%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <title> Untitled Page </title>
<script type= "Text/javascript" src= ". /js/jquery-1.3.2.min.js "></script>
<script>
var xmlHttp;
function Createxmlhttprequest ()
{
if (window. ActiveXObject)
{
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest)
{
XmlHttp = new XMLHttpRequest ();
}
}
function Startrequest ()
{
Createxmlhttprequest ();
Try
{
Xmlhttp.onreadystatechange = Handlestatechange;
Xmlhttp.open ("Get", "Default.aspx?ct=1", true);
Xmlhttp.send (NULL);
}
catch (Exception)
{
alert (exception);
Alert ("Please try again later!");
}
}
function Handlestatechange ()
{
if (xmlhttp.readystate = 4)
{
if (Xmlhttp.status = = Xmlhttp.status = 0)
{
var param = Xmlhttp.responsetext;
$ ("#divlist"). Append (param);
alert (param);
}
}
}
function cc () {
$ ("#divdialog"). FadeIn ("fast");
$ ("#pop"). CSS ({"width": "100%", "height": "100%", "display": "inline"});
Startrequest ();
}
function SelectItem (obj) {
$ ("#txt1"). Val (obj);
}
function SHOWC (obj,objname) {
if ($ ("#divct" +obj). Text () = "") {
SelectItem (objname); If there is no city, choose Province
}else{
var pos = $ ("#apro" +obj). Position (); Parent element Location
var left = pos.left+40+ "px"; Offset amount
var top = pos.top+15+ "px";
$ ("#divct" +obj). CSS ({
' Top ': Top,
' Left ': left,
"Background": "#F3FBEA",
"Color": "#666600"
). Show ();
settimeout (Hidect2 (obj), 4000);//4 seconds off
}
}
function Hidect (obj) {
$ ("#divct" +obj). Hide ();
}
function Hidect2 (obj) {
return function () {hidect (obj);}
}
function Closect () {
$ ("#divdialog"). Hide ();
$ ("#pop"). CSS ({"width": "0", "height": "0", "Display": "None"});
}
</script>
<style>
. Proul{list-style:none}
. Proul Li{width:100px;height:30px;float:left Cursor:pointer}
. Ctul{list-style:none}
. Ctul Li{width:100px;height:30px;float:left Cursor:pointer}
. ctdiv{display:none;position:absolute border:1px #666600 solid; width:auto; Height:auto}
. dtl{font-size:12px; color:white; font-weight:bold; Cursor:pointer}
. F_r{float:right}
. F_l{float:left}
</style>
<body> <form id= "Form1" runat= "Server" >
<input id= "Button1" type= "button" value= "Select Area" onclick= "CC ();"/>
<div id= "Pop" style= "Background-color: #000000;p osition:absolute; Top:0;left:0;z-index:1;display:none;filter: Alpha (opacity=30); " ></div>
<div id= "Divdialog" style= "border: #4b8500 1px solid;display:none; left:217px; Background-image:url (.. /images/t_bg.jpg); width:477px; Background-repeat:repeat-x;
Position:absolute; top:172px; height:350px; Background-color: #faffeb; z-index:99999 ">
<div style= "PADDING-RIGHT:5PX; Overflow:hidden; line-height:25px; Height:25px;text-align:right ">
<span style= "Float:left; padding:4px 0px 4px 0px "></span>"
<span class= "DTL f_l" > Please select Region </span>
<span onclick= "Closect ();" class= "DTL f_r" >[off]</span>
<span onclick= "Closect (); $ (" #txt1 "). Val (" unlimited ");" class= DTL f_r ">[Unlimited
</div>
<div id= "divlist" style= "FONT-SIZE:12PX; margin:0px Auto; width:462px; Color: #000; height:320px; Overflow:scroll; Text-align:left "runat=" Server >
</div>
</div>
<input id= "Txt1" type= "text"/>
</form>
</body>
|
Background output Code
private void Bind ()
{
IlistString arr = string. Empty;
string ct = string. Empty;
for (int i = 0; i < Listp.count; i++)
{
Ilist
Arr + + "<ul class=" Proul "><div id=" Divpro "+ listp[i]. Provinceid + ">";
Arr + = "<li><a id=" Apro "+ listp[i". Provinceid + "" ONCLICK=SHOWC ("" + listp[i]. Provinceid + "" + "," "+ listp[i]. Provincename + "");> "+ listp[i]. Provincename + "</a></li>";
arr = "</div></ul>";
CT + = "<div class=" Ctdiv "id=" DIVCT "+ listp[i". Provinceid + "" "><ul class=" Ctul ">";
for (int j = 0; J < Listc.count; J + +)
{
if (Listc.count > 0)
{
if (listc[j). Provinceid = = Listp[i]. Provinceid)
{
if (j = = 0)
{
CT + + listp[i]. Provincename + "<br/><br/>";
}
CT + = "<li><a Onclick=selectitem (" "+ listc[j]. CityName + "");> "+ listc[j]. CityName + "</a></li>";
}
}
}
CT + = "</ul></div>";
arr + + ct;
}
Response.Write (arr);
Response.End ();
} |
Original Author: Andy Lau article from: www.it560.com
