• 2008-01-12

    用json生成windows文件平铺样式数据 - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/13841001.html

    写了一段代码,严格模仿windows文件平铺样式,用json数据生成图标项和详细说明文字。层滚动条动态内嵌。存档。
    修订版兼容ff,代码见http://www.blogbus.com/lily64-logs/17827971.html
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>所有站点</title>
        <style>
    body{
        padding: 0px;
        margin: 0px;
        cursor: default;
        background:white;
    }
    .{font-size: 12px;}
    td.topArea{
        background: #f2f2ef url(http://files.blogbus.com/lily64.blogbus.com/files/12003210186.gif) repeat-y;
        height:22px;
        border-bottom: 3px solid #c00;
        font-size: 16px;
        font-weight: bold;
        color: #fe6519;
        padding-top: 18px;
        padding-left: 8px;
        cursor: default;
        margin-bottom: 6px;
    }
    td.headLogo{
        background: url(http://files.blogbus.com/lily64.blogbus.com/files/12003210187.gif) ;
        width: 67px;
        height: 12px;
        right: 12px;
        top: 24px;
        font-size:1px;
        position: absolute;
    }
    td.bottomArea{
        background: #eeead6;
        border-top: 1px solid #c00;
        width: 100%;
        height: 24px;
        padding: 8px 0px;
    }
    td.bottomArea input{
        width: 85px;
        height: 24px;
    }
    div.rightDiv input{
        width: 85px;
        height: 24px;
    }
    span.leftBlock{
        float: left;
        margin: 0 10px;
    }
    span.rightBlock{
        float: right;
        margin: 0 10px;
    }
    div.siteItem{
        float: left;
        overflow: hidden;
        width: 212px;
        height: 48px;
        cursor: default;
        margin-left: 3px;
        margin-right: 3px;
        margin-top: 6px;
        margin-bottom: 2px;
    }
    div.siteText{
        float:left;
        border:1px solid white;
        width:158px;
        height:36px;
        margin-top:4px;
        margin-left:4px;
        margin-bottom:6px;
    }
    div.siteLine{
        width:158px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        height:12px;
        margin-bottom:1px;
    }
    div.siteLine2{
        width:158px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        height:12px;
        margin-bottom:1px;
        color:#808080;
    }
    div.siteLine3{
        width:158px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        height:12px;
        color:#808080;
    }
        </style>
        <script type="text/javascript">
        arr=[["Unknow","未知站点"],["Empty","空站点"],["Runing","正在运行"],["Pause","暂停"],["Backup","备份站点"],["PauseWithError","出错暂停"],["BackupWithError","备份但有错误"]];
        selobj=null;

    preload=new Array();
    myimg=["http://files.blogbus.com/lily64.blogbus.com/files/12003209750.gif","http://files.blogbus.com/lily64.blogbus.com/files/12003209751.gif","http://files.blogbus.com/lily64.blogbus.com/files/12003225110.gif","http://files.blogbus.com/lily64.blogbus.com/files/12003225111.gif","http://files.blogbus.com/lily64.blogbus.com/files/12003225112.gif","http://files.blogbus.com/lily64.blogbus.com/files/12003225113.gif","http://files.blogbus.com/lily64.blogbus.com/files/12003225114.gif","http://files.blogbus.com/lily64.blogbus.com/files/12003209757.gif","http://files.blogbus.com/lily64.blogbus.com/files/12003210180.gif","http://files.blogbus.com/lily64.blogbus.com/files/12003210181.gif","http://files.blogbus.com/lily64.blogbus.com/files/12003210182.gif","http://files.blogbus.com/lily64.blogbus.com/files/12003210183.gif","http://files.blogbus.com/lily64.blogbus.com/files/12003210184.gif","http://files.blogbus.com/lily64.blogbus.com/files/12003210185.gif"];
    for(k=0;k<myimg.length;k++)
    {
    preload[k]=new Image();
    preload[k].src=myimg[k];
    }

        function siteLoad()
        {
            var arrayAsJSONText ='[{name:"Europe",title:"欧洲的历史和大陆文化",state:"5",fullUrl:"",pageCount:"",columnCount:""},{name:"NorthAmerica",title:"自由女神欢迎您,全世界的人们",state:"2",fullUrl:"http://server/NorthAmerica",pageCount:"3",columnCount:"29"},{name:"Asia",title:"东方的古老文明和延绵山脉",state:"6",fullUrl:"",pageCount:"",columnCount:""},{name:"Australia",title:"广袤无垠的大洋洲,随处是袋鼠",state:"1",fullUrl:"",pageCount:"",columnCount:""},{name:"Africa",title:"神秘的土地,热带雨林",state:"3",fullUrl:"",pageCount:"1",columnCount:"8"},{name:"Antarctica",title:"高寒无人区",state:"0",fullUrl:"",pageCount:"",columnCount:""},{name:"SouthAmerica",title:"桑巴舞和足球的故乡",state:"4",fullUrl:"",pageCount:"",columnCount:""},{name:"Mars",title:"火星人漫游地球,跨越时空的相会",state:"2",fullUrl:"http://server/Mars",pageCount:"2",columnCount:"15"}]';
            var continents = eval( arrayAsJSONText );
            for(i=0;i<continents.length;i++)
            {

            topoff=preload[continents[i].state*2].src;

            itemHtml="<div style='float:left;width:48px;height:48px;'><img src='"+topoff+"'></div><div class='siteText'><div class='siteLine'>"+continents[i].title+"</div><div class='siteLine2'>"+arr[continents[i].state][1]+"</div><div class='siteLine3'>"+continents[i].fullUrl+"</div></div>";       
           
            document.getElementById("maindiv").innerHTML+="<div onmousedown='event.cancelBubble=true;siteSel(this)' class='siteItem' title='"+continents[i].title+" ["+arr[continents[i].state][1]+"] "+continents[i].fullUrl+"' stitle='"+continents[i].title+"' sstate='"+continents[i].state+"' surl='"+continents[i].fullUrl+"' spage='"+continents[i].pageCount+"' scol='"+continents[i].columnCount+"'>"+itemHtml+"</div>";
            }
            pageResize();
        }

        function siteSel(obj)
        {  
            if(selobj)
            {
                selobj.firstChild.firstChild.src=preload[selobj.sstate*2].src;
                selobj.style.color="";
                selobj.lastChild.style.background="";
                selobj.lastChild.lastChild.style.color="#808080";
                selobj.lastChild.lastChild.previousSibling.style.color="#808080";
                selobj.lastChild.style.border="1px solid white";
                document.getElementById("btnEditSite").disabled=true;
            }
            obj.firstChild.firstChild.src=preload[obj.sstate*2+1].src;
            obj.style.color="white";
            obj.lastChild.style.background="#316ac5";
            obj.lastChild.lastChild.style.color="white";
            obj.lastChild.lastChild.previousSibling.style.color="white";       
            obj.lastChild.style.border="1px dotted gray";
           
            if(obj.sstate=="2"||obj.sstate=="3")
            document.getElementById("btnEditSite").disabled=false;
           
            detailHtml="<div style='margin:6px 6px 6px 6px'>";
            detailHtml+="<div style='margin-bottom:6px'><b>"+obj.stitle+"</b></div>";
            detailHtml+="<div style='margin-bottom:6px'>状态:"+arr[obj.sstate][1]+"</div>";
            if(obj.surl!="")
            detailHtml+="<div style='margin-bottom:6px'>访问地址:"+obj.surl+"</div>";
            if(obj.spage!="")
            detailHtml+="<div style='margin-bottom:6px'>页面数:"+obj.spage+"</div>";
            if(obj.scol!="")
            detailHtml+="<div style='margin-bottom:6px'>栏目数:"+obj.scol+"</div>";
           
            detailHtml+="<div><input id='btnShowDetail' type='button' value='查看详情'/>&nbsp;";
                   
            if(obj.sstate=="3")
                btnHtml="<input id='btnRunPause' type='button' value='运行' onclick='siteRun()'/>";
            else if(obj.sstate=="2")
                btnHtml="<input id='btnRunPause' type='button' value='暂停' onclick='sitePause()'/>";
            else
                btnHtml="<input id='btnRunPause' type='button' value='暂停' disabled='disabled' />";
           
            detailHtml+=btnHtml+"</div></div>";       
           
            document.getElementById("rightdiv").innerHTML=detailHtml;
           
            selobj=obj;  
           
        }
       
        function siteUnsel()
        {
            if(selobj)
            {
                selobj.firstChild.firstChild.src=preload[selobj.sstate*2].src;
                selobj.style.color="";
                selobj.lastChild.style.background="";
                selobj.lastChild.lastChild.style.color="#808080";
                selobj.lastChild.lastChild.previousSibling.style.color="#808080";           
                document.getElementById("btnEditSite").disabled=true;
            }
        }
       
        function siteRun()
        {
            selobj.sstate="2"; 
            event.srcElement.value="暂停";
            event.srcElement.onclick=sitePause;
     if(selobj.lastChild.style.background=="#316ac5")
            selobj.firstChild.firstChild.src=preload[selobj.sstate*2+1].src;
     else
            selobj.firstChild.firstChild.src=preload[selobj.sstate*2].src;
            selobj.lastChild.lastChild.previousSibling.innerText=arr[selobj.sstate][1];
            event.srcElement.parentNode.parentNode.childNodes[1].innerText=arr[selobj.sstate][1];     
        }
       
        function sitePause()
        {
            selobj.sstate="3";     
            event.srcElement.value="运行";       
            event.srcElement.onclick=siteRun;
     if(selobj.lastChild.style.background=="#316ac5")
            selobj.firstChild.firstChild.src=preload[selobj.sstate*2+1].src;
     else
            selobj.firstChild.firstChild.src=preload[selobj.sstate*2].src;
            selobj.lastChild.lastChild.previousSibling.innerText=arr[selobj.sstate][1];  
            event.srcElement.parentNode.parentNode.childNodes[1].innerText=arr[selobj.sstate][1];       
        }
       
        function pageResize(){
            h=document.body.clientHeight-74-6;
            h2=document.body.clientHeight-74-6;
            if(h<0) h=0;
            if(h2<0) h2=0;
            document.getElementById("maindiv").style.height=h;
            document.getElementById("rightdiv").style.height=h2;
        }
       
        window.onresize=pageResize;

        </script>
    </head>
    <body onload="siteLoad();" onselectstart='return false;'>

    <table style="height:100%;width:100%" cellpadding="0" cellspacing="0">
    <tr><td class="topArea">
            所有站点
        </td>
        <td class="headLogo">
    </td></tr>
    <tr><td colspan="2" valign="top">
        <table style="height:100%;width:100%;" cellpadding="0" cellspacing="0"><tr><td valign="top" onmousedown="siteUnsel()"><div id="maindiv" style="overflow-y:auto;margin-left:3px;padding-bottom:6px"></div></td><td valign="top"><div style="float:right;height:100%;width:209px;background:lightblue;overflow-y:auto" id="rightdiv" class="rightDiv"></div></td></tr></table>
    </td></tr>
    <tr><td class="bottomArea" colspan="2">
        <div>
            <span class="leftBlock">
                <input id="btnNewSite" type="button" value="新建站点" />
            </span>
            <span class="rightBlock">
                <input id="btnEditSite" type="button" value="编辑站点" disabled="disabled" />
                <input id="btnCancel" type="button" value="取消" onclick="window.close();" />
            </span>
        </div>
    </td></tr>
    </table>
     
    </body>
    </html>

    分享到:

    历史上的今天:


    评论

  • 呵呵,积极响应,已经加上图标,可以看效果了。看了提意见啊:)
  • 看不到效果...不爽... :(