<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    雪湖小札@blogjava

    心情與技術文檔同行 http://hi.baidu.com/jingleq

    BlogJava 首頁 新隨筆 聯系 聚合 管理
      24 Posts :: 2 Stories :: 4 Comments :: 0 Trackbacks

       今天才發現原來html的基本標簽里面的屬性是可以由我們自己隨意添加的,而且通過DOM方式還能夠訪問到。這一功能可以做很多事情。
      這里我做的就是數據分離,這是用好ajax的前提條件。實現中,通過在span標簽中添加上bindingData屬性和bindingPattern屬性來指明數據和數據轉化邏輯。通過javascript處理填入數據內容。
      當然要處理javascript代碼,使用了jquery,jquery在操作DOM對象的時候帶來很大的便利。另外jquery在ajax與數據展示特效中都有出色的表現。后面會再有詳細說明。
      整個程序如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
       
    <title>HelloWorld</title>
       
    <script src="lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
       
    <script type="text/javascript" charset="utf-8">
      
       
    // --- 基本數據區 ---
       var dataMap = {"name":"0001","password":"123456"};
       
    var userMap = {"0001":"jingle","0002":"chen"}
       
    // --- end ---  

       
    // --- 基本數據格式轉換邏輯區 --- 
       function changeName(val) {
        
    return userMap[val];
       }

       
    // --- end ---
      
       
    // --- 數據綁定 ---
       $(document).ready(function (){
        $(
    "span").each(function (i,n) {
         
    if (n.bindingPattern != undefined || n.bindingPattern == ""{
          
    try {
           n.bindingPattern 
    = n.bindingPattern.replace("[function]","");
           
    // --- 調用處理方法 ---
           //當然可以在這里加強,不止只有一個參數
           n.innerHTML = eval(n.bindingPattern.replace("\{0\}","'" + dataMap[n.bindingData] + "'"));
          }
     catch (e) {
           alert(e);
          }

         }
     else {
          n.innerHTML 
    = dataMap[n.bindingData];
         }

        }
    )
       }
    )
       
    // --- end ---

       
    </script>
    </head>
    <body>
       
    <div id="head">HelloWOrld</div>
       
    <hr/>
       
    <div id="conent"> 
        
    <!-- 這樣寫在html區域代碼清晰明了 -->
        
    <table border="0" cellspacing="5" cellpadding="5">
         
    <tr>
              
    <td><span bindingData="name" bindingPattern="[function] changeName({0})"></span></td>
         
    </tr>
         
    <tr>
              
    <td><span bindingData="password"></span></td>
         
    </tr>
        
    </table>
       
    </div>
    </body>
    </html>

     

     

     

    posted on 2007-06-13 08:17 csnowfox 閱讀(499) 評論(0)  編輯  收藏

    只有注冊用戶登錄后才能發表評論。


    網站導航:
     
    主站蜘蛛池模板: 欧洲精品99毛片免费高清观看 | 久久精品国产亚洲av四虎| jizzjizz亚洲日本少妇| 毛片a级三毛片免费播放| 亚洲 欧洲 日韩 综合在线| 青青草免费在线视频| 亚洲真人无码永久在线观看| 99视频全部免费精品全部四虎| 亚洲图片校园春色| 色妞WWW精品免费视频| 亚洲av无码av在线播放| 国产又粗又长又硬免费视频 | 亚洲天堂免费在线视频| 亚洲精品无码久久一线| 无码人妻一区二区三区免费看| 99亚洲精品高清一二区| 欧美好看的免费电影在线观看| 亚洲欧美黑人猛交群| 亚洲成a人片在线观看国产| 国产美女视频免费观看的网站| 亚洲色偷拍另类无码专区| 鲁大师在线影院免费观看 | 亚洲w码欧洲s码免费| 亚洲国产日韩精品| 免费播放特黄特色毛片| 成人片黄网站色大片免费观看APP| 亚洲综合视频在线| 日韩视频免费一区二区三区| 一进一出60分钟免费视频| 亚洲av无码一区二区三区不卡| 3d动漫精品啪啪一区二区免费| 亚洲乱码av中文一区二区| 亚洲男人的天堂在线va拉文| 99久久国产免费中文无字幕| 亚洲精品福利你懂| 中文字幕精品亚洲无线码二区 | 久久精品九九亚洲精品| 永久免费看bbb| 免费一级毛片无毒不卡| 亚洲色欲色欲www在线播放| 国产亚洲美日韩AV中文字幕无码成人|