JQM水平滚动导航栏

    <div class=\"categories\">                
            <ul>                    
                <li><span><a href=\"\">ABC</a></span></li>
                <li><span><a href=\"\">DEF</a></span></li>
                <li><span><a href=\"\">GHI</a></span></li>
                <li><span><a href=\"\">JKL</a></span></li>
            </ul>               
        </div>

$(function(){           
    var step = 1;
    var current = 0;
    var maximum = $(\".categories ul li\").size();
    var visible = 2;
    var speed = 500;
    var liSize = 120;
    var height = 60;    
    var ulSize = liSize * maximum;
    var divSize = liSize * visible; 

    $(\'.categories\').css(\"width\", \"auto\").css(\"height\", height+\"px\").css(\"visibility\", \"visible\").css(\"overflow\", \"hidden\").css(\"position\", \"relative\");
    $(\".categories ul li\").css(\"list-style\",\"none\").css(\"display\",\"inline\");
    $(\".categories ul\").css(\"width\", ulSize+\"px\").css(\"left\", -(current * liSize)).css(\"position\", \"absolute\").css(\"white-space\",\"nowrap\").css(\"margin\",\"0px\").css(\"padding\",\"5px\");

    $(\".categories\").swipeleft(function(event){
        if(current + step < 0 || current + step > maximum - visible) {return; }
        else {
            current = current + step;
            $(\'.categories ul\').animate({left: -(liSize * current)}, speed, null);
        }
        return false;
    });

    $(\".categories\").swiperight(function(){
        if(current - step < 0 || current - step > maximum - visible) {return; }
        else {
            current = current - step;
            $(\'.categories ul\').animate({left: -(liSize * current)}, speed, null);
        }
        return false;
    });         
});

<div data-role=\"page\" data-theme=\"b\" id=\"jqm-home\">
    <ul >
        <li data-role=\"fieldcontain\"> 
            <fieldset data-role=\"controlgroup\" data-type=\"horizontal\">
                <div class=\"logo\"><a href=\"#\"><img src=\"img/iphoneheader.gif\" alt=\"Penn State Live\" /></a></div>
                <div id=\"link\"><a href=\"#type=colleges\">Colleges</a></div>
                <a href=\"#\">Campuses</a>
                <a href=\"#\">Faculty and Staff</a>
                <a href=\"#\">Of Interest</a>
                <a href=\"#\">Photos</a>
                <a href=\"#\">Video</a>
                <a href=\"#\">Newswire Subscription</a>
                <a href=\"#\">PSUTXT</a>
            </fieldset>
        </li>
    </ul>
</div>

allowHiliting:true