ComicBox DEMO

JQuery + YQL = APP

HTML

<a href="http://goo.gl/0GX1t" target="_blank">
    Google Chrome 上的完整版 ComicBox 套件</a>
<ol id="selectable" class="list"></ol>
<ol id="img_list" class="list"></ol>
<img id="comic_img"/>

CSS

#feedback { 
    font-size: 1.4em;
}
.list .ui-selecting { 
    background: #FECA40; 
}
.list .ui-selected { 
    background: #F39814; color: white; 
}
.list { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 60%; 
}
.list li { 
    margin: 0.8px; 
    padding: 0.4em; 
    font-size: 12px; 
    height: 18px; 
    cursor:pointer;
}
#selectable {
    float:left;
    width:180px;
    height:500px;
    overflow-x:hidden;
    overflow-y:auto;
}
#img_list {
    float:left;
    width:100px;
    height:500px;
    overflow-x:hidden;
    overflow-y:auto;
}
#comic_img {
    float:left;
    max-width:70%;
    max-height:100%;
}
a {
    float:left;
    width:100%;
}

JavaScript

$(function() {
    var comic_id = '102';  //102=火影 103=海賊 104=死神
    $('#comic_img').attr('src','http://www.8comic.com/pics/0/'+comic_id+'.jpg');
    get_codes('www.8comic.com/view/'+comic_id+'.html?ch=1');
    get_pages('www.8comic.com/html/'+comic_id+'.html');
    $("#selectable").selectable({
        stop: function() {
            var code = $(".ui-selected", this).data('code');  
            var itemid = comic_id;
            var num=code.split(' ')[0];
            var sid=code.split(' ')[1];
            var did=code.split(' ')[2];
            var page=code.split(' ')[3];
            var code=code.split(' ')[4];
            var img="";
            $('#img_list').empty();
            for(p=1; p<=page; p++){
                if(p<10) img="00"+p;else if(p<100) img="0"+p;else img=p;
                var m=(parseInt((p-1)/10)%10)+(((p-1)%10)*3);
                img+="_"+code.substring(m,m+3);
                $('#img_list').append(
                    $('<li/>')
                    .html('第'+p+'頁')
                    .data('img',
"http://img"+sid+".8comic.com/"+did+"/"+itemid+"/"+num+"/"+img+".jpg"                        
                    )
                );
            }
        }
    });
    $("#img_list").selectable({
        stop: function() {
            var img_src = $(".ui-selected", this).data('img');
            $('#comic_img').attr('src',img_src);
        }
    });
    function get_pages (URL) {
        var YQL = 'http://query.yahooapis.com/v1/public/yql?q=';
        YQL += ' SELECT table.tr.td.table.tr.th.table.tr.td.a FROM html';
        YQL += ' WHERE url="'+ URL +'"';
        YQL += ' &format=json&callback=?';
        $.getJSON(YQL, function(result) {
            var body = result.query.results.body;
            var list = $('#selectable');
            var code = list.data('codes').split('|');
            $.each(body, function(key, val) {
                var arr_a = val.table.tr.td.table.tr.th.table.tr.td.a;
                var part  =...