现在的位置: 首页 > 综合 > 正文

js body clientWidth, offSetWidth, scrollWidth, scrollTop.; 分辨率 网页高宽 ;网页最大化 ; 页面所有元素必在一个div中,必设置此div尺寸; scroll变灰色和scroll不能控制内部的原因;

2013年06月15日 ⁄ 综合 ⁄ 共 22858字 ⁄ 字号 评论关闭

1.clientWidth,offSetWidth,scrollWidth

转自:http://hi.baidu.com/091864/item/6e84fd1982ea6204e75c36eb (80)

 2. 分辨率和网页高宽  (100)

http://blog.csdn.net/chinmo/article/details/2100444

document.compatMode 导致的clientSize差异 (100)

http://hi.baidu.com/wbqkyaazyybehyd/item/4f1b22142d5adaf89d778a5e

4网页最大化  (100)

self.moveTo(0,0);   
//调整屏幕
self.resizeTo(screen.availWidth,screen.availHeight);

5.

-------------页面--------------

<body>
<div id="Window">
<div id="Top"><div id="Logo"><img id="imgLog" src="images/logo.jpg"/><p id="pLogOut"></p></div><div id="nav"><ul class="meun" id="menu"><li>住房管理</li><li>住户管理</li><li>空巢老人</li><li>计生人员</li><li>保护人员</li><li>疾病人员</li><li>社区漫游</li><li>日程管理</li></ul></div></div>
<div id="Left"><iframe id="frmControl"></iframe></div>
<div id="LeftShowHide"><img id="imgShowHide" src="images/show.jpg" title ="显示控制面板" status="hide" onclick ="showLeft(this)"/></div>
<div id="Center"></div>
<div id="RightShowHide"><img id="imgShowMore" src="images/hide.jpg" title ="显示详细面板" status="hide" onclick ="showRight(this)"/></div>
<div id="Right"><iframe id="frmMore"></iframe></div>
</div>
</body>

--------css-------------------

#Window{  border:none; overflow:hidden;}/*防止浏览器大小变化时,元素跳行*/

--------脚本-----------------

function setPixeledSize(){//设置各块尺寸
var bH=0;
var bW=0;
if (document.compatMode == "BackCompat"){//兼容模式关闭
bW = document.body.clientWidth;
bH = document.body.clientHeight;
}
else { //document.compatMode == "CSS1Compat" 兼容模式开启
bH=document.documentElement.clientHeight;
bW=document.documentElement.clientWidth;//减去滚动条宽高
}

document.getElementById("Window").style.height=bH;
document.getElementById("Window").style.width=bW;

 

6.scroll变灰色

   <div scroll='yes'></div>

  如果没有设置div的高度,那么scroll将总是灰色

 

7.scroll不能控制内部的原因

   div内的元素有postion:relative; bottom或者top的属性,让div的元素不受scroll控制

js:

var  xmlStr='<Xml><Building BuildingName="1号楼" BuildingID="26" Location="118.66473727643,37.452670194521,29.8474568729289,8.79355710468879,34.0326133928189,81.8334141143582"><Unit UnitID="36" UnitName="1单元" Location="118.664472270203,37.4527175377561,8.99843233673892,197.288576431452,45.3749510887583,62.150643350022"><Room RoomName="101" RoomID="167" Location="118.664500342536,37.4526909792773,9.79112416189309,208.666970443617,56.0104411359565,31.8351626571431" /><Room RoomName="102" RoomID="62" Location="118.664422939889,37.4526900690246,9.55803272245248,193.722883694558,62.3883542909655,58.2943203016613" /><Room RoomName="201" RoomID="63" Location="118.664498967705,37.4526909630778,12.5014913910491,193.722906374791,62.3883170467789,61.9608349325159" /><Room RoomName="202" RoomID="64" Location="118.664428550272,37.4526901345591,12.5473447378681,193.722884588533,62.3882784088023,65.8938647418692" /><Room RoomName="301" RoomID="65" Location="118.664500150855,37.4526909770441,15.4549533399404,193.722915075909,62.3883772762317,51.4453736382981" /><Room RoomName="302" RoomID="66" Location="118.664429611716,37.4526901469691,15.4122511730748,193.722875185556,62.3883442814444,55.1000875367218" /><Room RoomName="401" RoomID="67" Location="118.664499861994,37.4526909736519,18.3247098802894,193.722916412249,62.3882580410684,64.4527473037658" /><Room RoomName="402" RoomID="68" Location="118.664429034916,37.4526901402456,17.9354748706828,193.722877544546,62.3882948098892,59.2994613675287" /><Room RoomName="501" RoomID="69" Location="118.66450102127,37.4526909873313,21.0625766476369,193.722906953667,62.3882298893082,65.2553208060332" /></Unit><Unit UnitID="37" UnitName="2单元" Location="118.664765568836,37.4527116759618,9.36319783158979,216.936905358136,46.6211096261197,47.1553326460096"><Room RoomName="101" RoomID="75" Location="118.6648018525,37.4526945270344,9.500611439762,203.356982473061,58.1365384045862,35.4336848305838" /><Room RoomName="102" RoomID="76" Location="118.664725200973,37.452693624049,9.34145261362573,203.356976629431,58.1363575041606,58.8820889988278" /><Room RoomName="201" RoomID="77" Location="118.664803703331,37.4526945489979,12.6766985449649,203.356951855814,58.1364861869343,40.9015369740672" /><Room RoomName="202" RoomID="78" Location="118.664728007483,37.4526936569822,12.2001720237677,203.356937429913,58.136475461462,42.1143656118223" /><Room RoomName="301" RoomID="79" Location="118.664802836785,37.4526945387319,15.1549546153547,203.356968574485,58.1364674753744,43.006066510395" /><Room RoomName="302" RoomID="80" Location="118.664728395261,37.4526936615434,15.0413074170501,203.356936358924,58.1364538460485,44.5947007079991" /><Room RoomName="401" RoomID="81" Location="118.664801252172,37.4526945199521,18.0603761828024,203.356986259058,58.1363516580568,57.4553757350008" /><Room RoomName="402" RoomID="82" Location="118.664728301961,37.4526936604616,17.908730000272,203.356944712157,58.1363988864983,51.0205473224827" /><Room RoomName="501" RoomID="83" Location="118.664802242365,37.4526945317022,20.8868236359194,203.35697013904,58.1363729189582,53.1703258238259" /><Room RoomName="502" RoomID="84" Location="118.664731876083,37.4526937023939,20.7171310848935,203.356936582421,58.1363895410425,50.7602214971257" /></Unit><Unit UnitID="93" UnitName="3单元" Location="118.664923458139,37.4525719171564,0,224.136113070405,60.9711270475014,45.2249072940374" /><Unit UnitID="102" UnitName="4单元" Location="118.664126607639,37.4525699931903,4.32816239026579,197.288247998066,45.3749510887584,62.116779965583" /><Unit UnitID="103" UnitName="5单元" Location="118.663832506314,37.4526491244607,4.34414481787826,197.288247998066,45.3749510887584,62.116779965583" /><Unit UnitID="104" UnitName="6单元" Location="118.663976467523,37.4529417958895,4.33167791106825,197.288247998066,45.3749510887584,62.116779965583" /></Building><Building BuildingName="2号楼" BuildingID="27" Location="118.664757027524,37.4529655390679,28.3105521605903,36.4750146925337,51.0503976898017,167.016206553442"><Unit UnitID="42" UnitName="1单元" Location="118.664441693478,37.4530537246951,9.04747740423772,153.487357548024,54.4166212822831,37.648392207035"><Room RoomName="101" RoomID="111" Location="118.664496947126,37.4530301274478,9.31793891231791,204.700173644044,59.7315564381396,41.7963414414036" /><Room RoomName="102" RoomID="112" Location="118.664410100544,37.4530295043743,8.86463123879366,204.70014735384,59.7315368681426,43.8487833256333" /><Room RoomName="201" RoomID="113" Location="118.664501745759,37.4530301616197,12.4109778671482,204.700171367767,59.7315414944915,41.9894769798302" /><Room RoomName="202" RoomID="114" Location="118.664434802274,37.4530296807147,12.0303284820693,204.700142407925,59.731481442944,48.6289396995001" /></Unit></Building><Building BuildingName="3号楼" BuildingID="32" Location="118.664758357991,37.453303885704,29.3576255756561,36.4750464238255,51.0503976898016,167.016206547803"><Unit UnitID="62" UnitName="1单元" Location="103.760148088658,29.5712161823496,373.500008422525,352.435970860564,54.7603964593892,47.3907485863967" /></Building><Building BuildingName="4号楼" BuildingID="29" Location="118.66473728886,37.4536840510925,27.2945499048801,36.4751067909007,51.0507038675256,123.189552767114"><Unit UnitID="67" UnitName="1单元" Location="118.665060070118,37.4537763730697,9.14724951235257,225.311641038613,48.9247532288329,35.8092622663115" /><Unit UnitID="68" UnitName="2单元" Location="118.664758393125,37.4537732402981,9.15595342848974,225.311492614407,48.9247314684461,38.3615899609578" /><Unit UnitID="69" UnitName="3单元" Location="118.664454314645,37.4537707695531,9.11064398042072,225.311311534252,48.924718675008,39.8494152452213" /></Building><Building BuildingName="5号楼" BuildingID="50" Location="118.664736063576,37.4540326406169,26.00571169053,36.4748939512139,51.0499228567932,109.95545358165"><Unit UnitID="70" UnitName="1单元" Location="118.664432112734,37.453971202149,9.26192725364672,36.4746598991304,51.0499755785515,33.8214222663411" /><Unit UnitID="71" UnitName="2单元" Location="118.664735644145,37.4539657204718,9.04817997252394,36.4748283704835,51.0499755785515,33.8214222683776" /><Unit UnitID="72" UnitName="3单元" Location="118.665036220592,37.4539685641145,9.11607044417906,36.4750212081498,51.0499755785516,33.821422273635" /></Building><Building BuildingName="6号楼" BuildingID="31" Location="118.664727248476,37.4544302315386,30.0911137613439,36.8107488343467,38.82574276499,77.643440486318"><Unit UnitID="34" UnitName="1单元" Location="118.665347981163,37.4545082828135,9.3196055640874,192.715994873118,47.6840185701417,42.3146099730715"><Room RoomName="101" RoomID="49" Location="118.665394427712,37.4544873246786,9.89991450660455,192.716010511635,47.6838271780369,42.6566195345769" /><Room RoomName="102" RoomID="50" Location="118.665303599412,37.4544857848542,9.10615059910924,192.716010511635,47.6838271780369,42.6566195345769" /><Room RoomName="201" RoomID="51" Location="118.665388534882,37.454487224861,12.7957947333925,192.716010511635,47.6838271780369,42.6566195345769" /><Room RoomName="202" RoomID="52" Location="118.665306720574,37.4544858377191,12.4904414469711,192.716010511635,47.6838271780369,42.6566195345769" /><Room RoomName="301" RoomID="53" Location="118.665388190981,37.4544872190388,15.2657375883791,192.716010511635,47.6838271780369,42.6566195345769" /><Room RoomName="302" RoomID="54" Location="118.665314174366,37.4544859639853,14.9391375362029,192.716010511635,47.6838271780369,42.6566195345769" /><Room RoomName="401" RoomID="55" Location="118.665386164649,37.4544871846992,18.014851965745,189.735600192602,62.2112989506896,57.0592141001123" /><Room RoomName="402" RoomID="56" Location="118.665315296765,37.4544859829911,17.7120284934063,189.735600192602,62.2112989506896,57.0592141001123" /><Room RoomName="501" RoomID="57" Location="118.665384223798,37.4544871518295,20.6606258479951,189.735600192602,62.2112989506896,57.0592141001123" /><Room RoomName="502" RoomID="58" Location="118.665318482776,37.4544860369762,20.6954548420981,189.735600192602,62.2112989506896,57.0592141001123" /></Unit><Unit UnitID="35" UnitName="2单元" Location="118.665047696842,37.4545028295257,9.30556194361998,192.715817017499,47.6840185701417,42.3146099702262"><Room RoomName="102" RoomID="158" Location="118.665006900757,37.4544807635168,9.19056145539798,193.534365871755,68.2351271394909,35.3567097657307" /></Unit><Unit UnitID="73" UnitName="3单元" Location="118.664740333007,37.4544911687147,8.90089713811903,192.715632514699,47.6840185701417,42.3146099584419" /><Unit UnitID="74" UnitName="4单元" Location="118.664451735679,37.4544963616157,9.0869557525366,192.715470167234,47.6840185701417,42.314609959994" /></Building><Building BuildingName="7号楼" BuildingID="43" Location="118.664732204559,37.4547886912243,30.3828938952647,36.8107482642324,38.8257370802005,78.6528204162636"><Unit UnitID="75" UnitName="1单元" Location="118.665351677581,37.4548592677671,9.19989810699917,221.386769374328,51.5815569701463,42.7661349452408" /><Unit UnitID="76" UnitName="2单元" Location="118.66505313536,37.4548573617183,9.1550885772449,221.38659593119,51.5815569701463,42.7661349552254" /><Unit UnitID="77" UnitName="3单元" Location="118.664756217787,37.4548531765343,9.19681039977149,221.386427535987,51.5815569701463,42.7661349541615" /><Unit UnitID="78" UnitName="4单元" Location="118.664452651971,37.4548517505912,9.13669876536005,221.386244051958,51.5815569701463,42.7661349425515" /></Building><Building BuildingName="8号楼" BuildingID="34" Location="118.664720636398,37.4551624097284,30.4438329633995,36.8107466238784,38.8257370802005,78.6528204146037"><Unit UnitID="79" UnitName="1单元" Location="118.664418252503,37.4550688297833,9.21629639742605,38.0068778718105,46.0894773901847,32.8336978214675" /><Unit UnitID="80" UnitName="2单元" Location="118.664719636188,37.4550705756029,9.23089682964928,38.0070500567479,46.0894773901847,32.8336978185618" /><Unit UnitID="81" UnitName="3单元" Location="118.665016493173,37.4550720734144,9.11310261562903,38.007242933294,46.0894773901847,32.8336978165325" /><Unit UnitID="82" UnitName="4单元" Location="118.665318331715,37.4550745230572,9.06702674637927,38.0074163076461,46.0894773901848,32.8336978063969" /></Building><Building BuildingName="9号楼" BuildingID="45" Location="118.665693443807,37.451884164,30.3550904730655,36.8113344269099,38.8257801738262,71.0011695098832"><Unit UnitID="53" UnitName="1单元" Location="118.666013984249,37.4519498376017,9.11778091904125,195.549901364363,48.0383662242648,36.2971012572479"><Room RoomName="101" RoomID="159" Location="118.666053299003,37.4519261420558,9.68846505656984,195.549897392218,48.0382884921946,47.9340099499547" /><Room RoomName="102" RoomID="160" Location="118.665962467727,37.4519255491297,8.97451622768131,195.549897392218,48.0382884921946,47.9340099499547" /><Room RoomName="201" RoomID="161" Location="118.666056156811,37.4519261608044,12.4065545896883,196.389442120569,57.6052619798381,43.2171949422492" /><Room RoomName="202" RoomID="162" Location="118.665976488976,37.4519256409389,12.0890108619278,196.389442120569,57.6052619798381,43.2171949422492" /><Room RoomName="301" RoomID="163" Location="118.666056582711,37.4519261636006,15.2857584917001,196.389442120569,57.6052619798381,43.2171949422492" /><Room RoomName="302" RoomID="164" Location="118.665981310699,37.4519256725736,14.9237988989626,196.389442120569,57.6052619798381,43.2171949422492" /></Unit><Unit UnitID="51" UnitName="2单元" Location="118.665715611732,37.4519446080531,9.20592299553391,195.549720726642,48.0383662242647,36.2971012611216" /><Unit UnitID="52" UnitName="3单元" Location="118.665411834776,37.4519465335843,9.06810868309549,195.549527035983,48.0383662242647,36.2971012626912" /></Building><Building BuildingName="10号楼" BuildingID="42" Location="118.665720993349,37.452254861167,30.367090122425,36.8113591437889,38.8257801738262,71.0011695082925"><Unit UnitID="83" UnitName="1单元" Location="118.665422273816,37.452154385008,9.12863727353397,24.2178574864871,55.1248870339487,40.2176633153923" /><Unit UnitID="84" UnitName="2单元" Location="118.665720909389,37.4521597466742,9.21545553501346,24.2180230069692,55.1248870339488,40.2176633172049" /><Unit UnitID="85" UnitName="3单元" Location="118.666020483131,37.4521617396672,9.10947428019426,24.2182026326062,55.1248870339488,40.2176633130629" /></Building><Building BuildingName="12号楼" BuildingID="38" Location="118.665782968561,37.4531510169207,29.5314533162382,36.8114287301039,38.8257801738263,71.0011695099937"><Unit UnitID="63" UnitName="1单元" Location="118.665670949452,37.4530475403375,8.85351546912716,19.6844526496105,49.455636438145,37.1734892711858" /><Unit UnitID="64" UnitName="2单元" Location="118.665980442677,37.4530764027199,9.11615017503209,19.6846494971662,49.455636438145,37.17348927171" /></Building><Building BuildingName="13号楼" BuildingID="39" Location="118.665852219856,37.4535424347887,29.3817332397593,36.811464394471,38.8257778841687,71.3373792817034"><Unit UnitID="88" UnitName="1单元" Location="118.666057153355,37.4536065830925,9.25253729928954,213.579375629009,56.187919481973,39.6177769453959" /><Unit UnitID="89" UnitName="2单元" Location="118.665757840556,37.4536049502947,9.27925264386431,213.579203814028,56.1879194819731,39.6177769518385" /></Building><Building BuildingName="14号楼" BuildingID="40" Location="118.665855240724,37.453898964419,29.3934853692263,36.8114930867583,38.8258619635161,54.0322497446802"><Unit UnitID="90" UnitName="1单元" Location="118.665736291027,37.4538008206957,9.08880823772051,36.1397168198052,50.5187116809881,35.0897527517525" /><Unit UnitID="91" UnitName="2单元" Location="118.66603073943,37.4538019640448,8.83164814695192,36.1398949706201,50.518711680988,35.0897527752395" /></Building><Building BuildingName="15号楼" BuildingID="56" Location="118.665962462946,37.4542804940588,29.1675033989377,161.148656183239,45.3793932948221,81.9244073400072"><Unit UnitID="110" UnitName="1单元" Location="118.666133703881,37.4543343616085,8.66966965077154,174.749560350089,41.3047867578718,53.4652962461246" /><Unit UnitID="111" UnitName="2单元" Location="118.665810108886,37.4543516921553,8.97335437002766,174.749560350089,41.3047867578718,53.4453808506423" /></Building><Building BuildingName="16号楼" BuildingID="57" Location="118.665776840822,37.4548754435672,7.14480814470153,0.000355067204987906,21.0990299010847,509.925332509379"><Unit UnitID="113" UnitName="1单元" Location="118.66300340196,37.4537204576318,9.39078023748152,190.363922355099,38.8241918684478,64.7602274583883"><Room RoomName="101" RoomID="202" Location="118.663110059341,37.4537043048754,9.66175211124209,178.917565821182,57.6038605459577,35.9197814127282" /><Room RoomName="102" RoomID="203" Location="118.662894122668,37.4537025088645,9.19383667223883,178.917565821182,57.6038605459577,35.9197814127282" /><Room RoomName="201" RoomID="204" Location="118.663106366955,37.4537043461857,12.8316248592455,178.917565821181,57.6038605459577,35.9197814127282" /><Room RoomName="202" RoomID="205" Location="118.662889839869,37.453702413436,12.2672615525516,178.917565821181,57.6038605459577,35.9197814127282" /><Room RoomName="301" RoomID="206" Location="118.663104002349,37.4537043719113,15.1395702423542,178.917565821181,57.6038605459577,35.9197814127282" /><Room RoomName="302" RoomID="207" Location="118.662887975568,37.4537023151245,14.9039102188908,178.917565821182,57.6038605459577,35.9197814127282" /><Room RoomName="401" RoomID="208" Location="118.663100307127,37.4537044128909,17.9697197308997,178.917559625076,57.6037796786186,46.5816888283178" /><Room RoomName="402" RoomID="209" Location="118.662876519852,37.4537020568115,17.9712852177545,178.917559625076,57.6037796786186,46.5816888283178" /><Room RoomName="501" RoomID="210" Location="118.663095868882,37.4537044640518,21.1162571040404,178.917559625076,57.6037796786186,46.5816888283178" /><Room RoomName="502" RoomID="211" Location="118.662872760911,37.4536801162839,20.4057885803195,178.917559625076,57.6037796786186,46.5816888283178" /></Unit><Unit UnitID="114" UnitName="2单元" Location="118.662782112033,37.4537237317789,9.3738096738889,190.363857321848,38.8241918684479,64.7530342859715" /><Unit UnitID="115" UnitName="3单元" Location="118.66255328514,37.4537202763671,9.00157544856484,190.363857321848,38.8241918684479,64.7530342859715" /></Building></Xml>';
window.onload=function(){//页面加载
    getAllBUR();
}

/*
  obj:Building{},Unit{},Room{} ID,Location,PoiGuid,Name
  type:0,1,2
  return:liBuilding, liUnit,liRoom
  效果:(1)创建li对象  绑定span,img事件
  备注:obj在传入前已创建poiguid
*/
function createLiObject(obj,type){
    if(type==0){
       var liBuilding=document.createElement("li");//房子li
       liBuilding.setAttribute("BuildingID",obj.BuildingID);
       liBuilding.setAttribute("Location",obj.Location);
       liBuilding.setAttribute("BuildingPoiGuid",obj.BuildingPoiGuid);
       liBuilding.setAttribute("BuildingName",obj.BuildingName);
       liBuilding.setAttribute("litype","0");
       liBuilding.className="indentBuild";
     
      var spanName=document.createElement("span");//展开
      spanName.innerText=obj.BuildingName;
      spanName.setAttribute("status","closed");
      
      spanName.onclick=function(e){
        var ulUnits= getUl(this.parentNode);
        var status=this.getAttribute("status");
        if(status=="closed"){ulUnits.style.display='block';this.setAttribute("status","open");ulUnits.style.background="ffffff";}
        else {ulUnits.style.display='none';this.setAttribute("status","closed");}
        stopBubble(e);
      };
      spanName.onmouseover=function(){
        this.style.cursor='pointer';
      }
      liBuilding.appendChild(spanName);
      
      var spanBuildingButtons=document.createElement("span");
      spanBuildingButtons.style.display="none";//存放操作按钮的容器
      
      var imgLocateBuilding=document.createElement("img");//定位
      
      var ulUnits=document.createElement("ul");//下属单元 容器
      ulUnits.style.display="none";
     
      liBuilding.appendChild(ulUnits);
      return liBuilding;
    }
    else if(type ==1){
       var liUnit=document.createElement("li");//房子li
       liUnit.setAttribute("UnitID",obj.UnitID);
       liUnit.setAttribute("Location",obj.Location);
       liUnit.setAttribute("UnitPoiGuid",obj.UnitPoiGuid);
       liUnit.setAttribute("UnitName",obj.UnitName);
       liUnit.setAttribute("litype","1");
       liUnit.className="indentUl";
    
      var spanName=document.createElement("span");//展开
      spanName.innerText=obj.UnitName;
      spanName.setAttribute("status","closed");
      spanName.onmouseover=function(){this.style.cursor="pointer";};
      spanName.onclick=function(e){
        var ulRooms=getUl(this.parentNode);
        var status=this.getAttribute("status");
        if(status=="closed"){ulRooms.style.display='block';this.setAttribute("status","open");ulRooms.style.background="ffffff";}
        else {ulRooms.style.display='none';this.setAttribute("status","closed");}
        stopBubble(e);
      };     
      liUnit.appendChild(spanName);
       
      var ulRooms=document.createElement("ul");//下属单元 容器
      ulRooms.style.display="none";
      liUnit.appendChild(ulRooms);
      return liUnit;
    }
    else if(type==2){
       var liRoom=document.createElement("li");//房子li
       liRoom.setAttribute("RoomID",obj.RoomID);
       liRoom.setAttribute("Location",obj.Location);
       liRoom.setAttribute("RoomPoiGuid",obj.RoomPoiGuid);
       liRoom.setAttribute("RoomName",obj.RoomName);
       liRoom.setAttribute("litype",2);
       liRoom.className="indentRoom";
      var spanName=document.createElement("span");//展开
      spanName.innerText=obj.RoomName;
      spanName.setAttribute("status","closed");
      spanName.onmouseover=function(){this.style.cursor="pointer";}; 
      liRoom.appendChild(spanName);
       return liRoom;
    }
}

//获取所有房屋
function getAllBUR(){
    var xmlDoc=loadXMLString(xmlStr);
    var renderStr="";//渲染字符串
    for(var i=0;i<=xmlDoc.selectNodes("Xml/Building").length-1;i++){
      var building=xmlDoc.selectNodes("Xml/Building")[i];
      var buildingObj={"BuildingName":building.getAttribute("BuildingName"),"BuildingPoiGuid":"","Location":building.getAttribute("Location"),"BuildingID":building.getAttribute("BuildingID")};
      var liBuilding=createLiObject(buildingObj,0);
      for(var j=0;j<=building.childNodes.length-1;j++){
            var unit=building.childNodes[j];
            var unitObj={"UnitName":unit.getAttribute("UnitName"),"UnitPoiGuid":"","Location":unit.getAttribute("Location"),"UnitID":unit.getAttribute("UnitID")};
            var liUnit=createLiObject(unitObj,1);
            liBuilding.lastChild.appendChild(liUnit);
          for(var k=0;k<=unit.childNodes.length-1;k++){//添加房间
                var room=unit.childNodes[k];
                var roomObj={"RoomName":room.getAttribute("RoomName"),"RoomPoiGuid":"","Location":room.getAttribute("Location"),"RoomID":room.getAttribute("RoomID")};
                var liRoom=createLiObject(roomObj,2);
                liUnit.lastChild.appendChild(liRoom);
          }
      }
      document.getElementById("ulBuildings").appendChild(liBuilding);
    }
}


/*parentEle: liBuilding,liUnit
*/
function getUl(parentEle){ //获取ul容器
    var ultemp=parentEle.lastChild;
    if(ultemp.tagName.toLowerCase()=="ul"){return ultemp};
    return null;
}

/*停止冒泡
*/
function stopBubble(e) {
    if (e){e.stopPropagation();}//非ie
    else{window.event.cancelBubble = true;}//ie
}
/*
xml方法
*/
function loadXMLString(xmlstr){
    var xmlDoc=null;
    try{
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async="false";
        xmlDoc.loadXML(xmlstr);
    }catch(e){
        try{
            var parser=new DOMParser();
            xmlDoc=parser.parseFromString(xmlstr,"text/xml");
        }catch(e){
            alert(e.message);
        }
    }
    return xmlDoc;
}

css:

*{ margin:0px; padding:0px;}
.mL30{ margin-left:30px;}
.mL6{ margin-left:6px;}

.indentBuild{ text-indent:15px;}
.indentUl{ text-indent:20px;}
.indentRoom{ text-indent:25px;}
ul{ list-style:none;}
li{ position:relative;bottom:3px;}/*有这句,scroll无法控制ul的滚动*/
                                    /*不设置容器的高宽,scroll将是huise*/
#ulBuildings{ list-style:none;height:310px; width:210px;overflow:scroll;}/*所有楼房容器*/

 

html:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<link href="css/scrollTree.css" rel="Stylesheet" />
<script type="text/javascript" src="Scripts/scrollTree.js"></script>
</head>
<body>
<div id="divBuildings"><ul id="ulBuildings" litype="-1"></ul></div>
</body>
</html>

 

 

抱歉!评论已关闭.