[MobileWeb]網路掛號Prototype-2(Listview Autodivider搭配JSON)

HTML更新如下

  

    回上頁
    
查詢時間
  


  

    

 
  

JavaScript

$(document).ready(function () {
    var jsonData = [
        {"醫師": "柯X哲", "科別": "外科", "時段": "上午(08:30~11:30)"},
        {"醫師": "邱X逹", "科別": "外科", "時段": "下午(13:30~17:00)"},
        {"醫師": "沈X雄", "科別": "內科", "時段": "上午(08:30~11:30)"},
        {"醫師": "賴X德", "科別": "內科", "時段": "上午(08:30~11:30)"},
        {"醫師": "柯X銘", "科別": "牙科", "時段": "上午(08:30~11:30)"},
        {"醫師": "涂X哲", "科別": "內科", "時段": "夜診(08:30~11:30)"}
    ];
    
    var targetList = $("#查詢時間List");
    
    if (jsonData) {
        var dataLength = jsonData.length;
        for (var i = 0; i < dataLength; i++) {
            targetList.append("
" + jsonData[i].醫師 + "
" + jsonData[i].科別 + "
");
        }
    }
    
    targetList.listview({
        autodividers: true,
        autodividersSelector: function ( li ) {
            return li.data("時段");
        }
    }).listview("refresh");
    
});

※ 原始碼及執行預覽(jsFiddle)： http://jsfiddle.net/ez0brabf/11/