当项目超过div宽度时，水平滚动/轮播

Question

I have a fixed size <div> which contains blocks. By clicking the + a user is able to add additional boxes (an infinite amount theoretically).

When the number of "boxes" exceeds the width of the <div> container I would like the user to be able to scroll left and/or right in-order to view all boxes.

Currently I am looking for a place to start as I have not implemented such a feature before.

There are JQuery examples out there however I would like to avoid JQuery if at all possible.

Please assist.

Answer 1

Following my comment and suggesting you to use KendoUI ScrollView and seeing that you missed the option itemsPerPage , I will slightly modify KendoUI demo for showing you how to use it.

When you want to show more than one item per page, you simply define how many you want in the initialization of the widget. Example:

  $("#scrollview").kendoMobileScrollView({
      dataSource:    dataSource,
      contentHeight: 150,
      itemsPerPage:  4,
      enablePager:   false,
      template:      kendo.template($("#template").html())
  });

You might also define a template where you define how to render each page. Example:

<script id="template" type="text/x-kendo-template">
    <table>
        <tr>
            # for (var i = 0; i < data.length; i++) { #
            <td>
                <img src="#: data[i].image_url #"/>
            </td>
            # } #
        </tr>
    </table>
</script>

When you put all together, you have: http://jsfiddle.net/OnaBai/5M9Vw/

Answer 2

I found a fairly straightforward algorithm to handle the left/right scrolling.

With a bit of work I should be able to get this working without JQuery.

JFiddle example is here .

HTML

<div class="mtabArrowLeft">&laquo;</div>
<div class="menuTabs">
        <div class="img-reel">
            <input class="menutabBTN" name="" type="button" value="a" />
            <input class="menutabBTN" name="" type="button" value="b" />
            <input class="menutabBTN" name="" type="button" value="c" />
            <input class="menutabBTN" name="" type="button" value="d" />
            <input class="menutabBTN" name="" type="button" value="e" />
            <input class="menutabBTN" name="" type="button" value="f"/>
        </div>
</div>
<div class="mtabArrowRight">&raquo;</div>

JavaScript

$(function() {
            var imageWidth = 71;
            var reelSize = 4;
            var imageSum = $('.img-reel input').size();
            var imageReelWidth = imageWidth * imageSum;
            $('.img-reel').css({'width' : imageReelWidth});

            rotate = function(){
                var trigger = $btn.attr('class');
                var image_reelPosition = (trigger=='mtabArrowLeft') ? -imageWidth : imageWidth;
                var reel_currentPosition = $('.img-reel').css('left').replace('px','');
                var pos = reel_currentPosition-image_reelPosition;
                var maxPos = (imageSum-reelSize)*-imageWidth;
                //console.log('pos='+pos+', max='+maxPos);
                if(pos>=maxPos && pos<=0){
                    $('.img-reel').animate({left:pos},300);
                    $('.mtabArrowLeft,.mtabArrowRight').fadeTo(250,1);
                    //console.log('move');
                    if(pos==maxPos){$('.mtabArrowRight').fadeTo(250,0.2);}
                    else if(pos==0){$('.mtabArrowLeft').fadeTo(250,0.2);}
                }
            };
            if (imageSum > 4) {
                $('.mtabArrowLeft,.mtabArrowRight').click(function(){
                    $btn = $(this);
                    rotate();
                    return false;
                });
            }
            else {
                $('.mtabArrowLeft,.mtabArrowRight').fadeTo(0,0.2).click(function(){return false});
            }
    })

CSS

html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
body { margin:20px; font:normal 62.5% tahoma }
p { margin:20px; }

.menuTabs {
    float: left;
    width: 284px;
    overflow:hidden;
    position:relative;
    height:50px;
}

.img-reel { position:absolute; left:0; top:0; height:50px; }

.mtabArrowLeft {
    float: left;
    height: 25px;
    width: 35px;
    margin-left: 15px;
    margin-right: 4px;
     cursor:pointer;
  font-size:20px;
}

.mtabArrowRight {
    float: left;
    height: 25px;
    width: 35px;
    margin-left: 15px;
    margin-right: 15px;
  cursor:pointer;
  font-size:20px;
}

      .mtabArrowLeft, .mtabArrowRight { color:#fff; font-weight:bold; background:red; text-indent:12px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; line-height:21px }

.menutabBTN {
    float: left;
    height: 25px;
    width: 65px;
    margin-right: 3px;
    margin-left: 3px;
    padding: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 25px;
}