After clicking, Li calls ajax to load the content and expands the content. Li is not like the button, which can be set to disabled after responding to the click event.
Because loading content is slow, users may accidentally click twice on Li, so they will request twice. This is what we don't want to see.
Today, I sent two demos to the JavaScript-jquery group by copying the clicked Li node.
Obviously, the function is not suitable for me.
I am not doing anything. I thought about it. Why not add the loading image (before Ajax loading) When I click Li to determine whether the IMG element exists on the Li node,
If not, load the Ajax content; otherwise, do not process it.
Passed the test, \ (^ o ^ )/. View sourceprint?
| 001 |
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 002 |
<HTML xmlns = "http://www.w3.org/1999/xhtml"> |
| 004 |
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> |
| 005 |
<Title> jquery Ajax binding event loading </title> |
| 007 |
* {Margin: 0px; padding: 0px ;} |
| 008 |
Body {font-size: 12px; font-family: verdana, Arial, Helvetica, sans-serif ;} |
| 009 |
# Container {position: relative; overflow: hidden ;} |
| 010 |
# Header {Height: 100px; line-Height: 100px; Background: # dedede; padding-left: 20px; position: absolute; left: 0px; top: 0px; position: fixed! Important; width: 100%; margin-bottom: 20px ;} |
| 011 |
# Header H1 {font-size: 120%; color: # FFF ;} |
| 012 |
# Header H1 span {font-size: 75%} |
| 013 |
# Siderbar {width: 240px; margin-left: 10px; Border: 1px solid # DDD; position: absolute; left: 0px; top: 120px; position: fixed! Important; Z-index: 9999 ;} |
| 014 |
# Siderbar_box {padding: 10px; overflow: auto} |
| 015 |
# Siderbar H4 {Background: # Eee; color: #666; padding: 5px 10px ;} |
| 016 |
# Siderbar_box ul {list-style: none; margin-left: 10px ;} |
| 017 |
# Content {padding: 120px 0px 0px 260px; overflow: auto; _ padding: 120px 0px 0px 280px ;} |
| 018 |
# Content ul {list-style: none ;} |
| 019 |
# Content ul Li {border: 1px solid # DDD; cursor: pointer; display: block} |
| 020 |
# Content ul Li span {display: block; padding: 5px ;} |
| 021 |
# Content ul Li table {margin: 5px auto; padding: 0px; border-collapse: collapse; Border: 1px solid #999; width: 98% ;} |
| 022 |
# Content ul Li table TD {/* padding: 2px 5px; */Border: 1px solid #999 ;} |
| 023 |
# Content_footer {text-align: center ;} |
| 024 |
. Focus {padding: 2px 5px; boder: 1px solid # AAA; Background: # fafafa ;} |
| 025 |
. Highlight {color: # FFF; Background: # 0099ff} |
| 027 |
<SCRIPT src = "jquery-1.3.2.min.js"> </SCRIPT> |
| 030 |
Setheight ("# siderbar", 130); // you can specify the height of the sidebar. |
| 031 |
$ (Window). Resize (function () {setheight ("# siderbar", 130)}); // reset the sidebar height when the window changes |
| 032 |
$. Get ("sider.html", function (data ){ |
| 033 |
$ ('# Siderbar_box'). append (data ); |
| 035 |
/* Set the ID height */ |
| 036 |
Function setheight (ID, h ){ |
| 037 |
VaR success wheight = $ (window). Height (); |
| 038 |
((Id).css ({"height" windowheight-h) + "PX "}); |
| 040 |
// View the loaded Li after binding |
| 041 |
$ ("# Siderbar_box ul Li a"). Live ("click", function (){ |
| 042 |
VaR $ current = $ (this ); |
| 043 |
VaR $ currentli = $ (this). Parent (); |
| 044 |
If ($ currentli. Children ("Ul"). ATTR ("ID") = undefined) // Ajax loading is required for the first time |
| 046 |
$ Currentli. siblings (). Children ("Ul"). slideup ('fast '); |
| 047 |
$ Currentli. siblings (). Children ("A"). removeclass ("Focus "); |
| 048 |
$. Get ("chapter.html", function (data ){ |
| 049 |
$ Current. addclass ("Focus"). Parent (). append (data ); |
| 050 |
Showchapter (); // display the main content in the content |
| 054 |
$ Currentli. siblings (). Children ("Ul"). slideup ('fast '); |
| 055 |
$ Currentli. siblings (). Children ("A"). removeclass ("Focus "); |
| 056 |
If ($ currentli. Children ("Ul"). Is (": visible") // in the expanded State |
| 059 |
$ Current. removeclass ("Focus"). Parent (). Children ("Ul"). slideup ('save '); |
| 062 |
$ Current. addclass ("Focus"). Parent (). Children ("Ul"). slidedown ('low '); |
| 067 |
// Content displays the list title |
| 068 |
Function showchapter (){ |
| 069 |
$. Get ("chapter.html", function (data ){ |
| 070 |
$ ("# Content" pai.html (data ); |
| 071 |
$ ("# Content ul li"). Live ("click", function () {// bind the loaded title to click the event |
| 072 |
$ Current = $ (this ); |
| 073 |
If ($ current. Children ("table"). ATTR ("ID") = undefined) // click the title for the first Ajax Load |
| 075 |
If ($ current. Children ("span"). Find ("IMG"). Size () <1) // load content only once to prevent multiple requests from loading |
| 077 |
$ Current. Children ("span"). append (" |
| 078 |
$. Get ("table.html", function (data ){ |
| 079 |
$ Current. append (data). Children ("span"). addclass ("highlight"). Find ("IMG"). Remove (); // after loading, remove the loaded image. |
| 084 |
If ($ current. Children ("table"). Is (": visible ")) |
| 086 |
$ Current. Children ("span"). removeclass ("highlight"). Next ("table"). Hide (); |
| 090 |
$ Current. Children ("span"). addclass ("highlight"). Next ("table"). Show (); |
| 101 |
<Div id = "Container"> |
| 103 |
<Div id = "siderbar"> |
| 105 |
<Div id = "siderbar_box"> |
| 110 |
<Div id = "content_footer"> </div> |
|
This article is transferred from www.35java.com
