Question

我正在尝试使用jQuery.mobile-1.4.5.js滑动事件将脚本标记中的内容加载到同一页面上的div id="contentArea"。我是jQuery mobile的新手，所以我不知道从哪里开始。一点帮助将不胜感激。

<div class="container body-content" id="contentArea">

    <div class="col-md-12 col-xs-12 col-sm-12 text-center">
        <h2 class="contentHeader"><b>Telkom Insurance: <span style="color:#0084c4;">How to sell</span></b></h2>
    </div> 

    <div class="col-md-12 col-xs-12 col-sm-12 text-center">
        <img id="homeImage" src="images/Picture2.png" style="margin-top:30px;" />
    </div>    
    <div class="row">
        <div class="col-xs-4 col-sm-4"></div>
        <div class="col-md-4 col-xs-4 col-sm-4 text-center" id="instructionImage" onclick="loadFisrtPage()"><h4 style="color:white;font-family:FS Albert-Bold;font-size: 19px;">Start course</h4></div>  
        <div class="col-xs-4 col-sm-4"></div>
    </div>

</div>

<!--<div class="panel-footer" id="footer">
</div>-->

<script type="text/html" id="page1">
    <div class="col-md-12 col-xs-12 col-sm-12 holder" id="1">

        <div class="col-md-12 col-xs-12 col-sm-12 text-center">
            <h2 class="contentHeader"><b>Telkom Insurance: <span style="color:#0084c4;">How to sell</span></b></h2>
        </div>

        <div class="col-md-12 col-xs-12 col-sm-12 text-center">
            <h3 style="color:#0084c4;font-family:FS Albert-Bold;">Telkom insurance provides cover for loss, theft and damage of:</h3>
            <div class="col-md-12 col-xs-12 col-sm-12 text-center"><img src="images/Picture2.png" style="margin-top:30px;" /></div>
        </div>


        <div class="navBar col-md-12 col-xs-12 col-sm-12 text-center">

            <img id="nextButton" onclick="loadNextPage(1)" src="images/slider-btn2-hover.png" style="cursor:pointer;    width: 70px;" />
        </div>
    </div>


</script>

javascript： $（＆＃34; .holder＆＃34;）。swiperight（function（）{ var id = $（this）.attr（＆＃34; id＆＃34;）; loadNextPage（ID）; }）; $（＆＃34; .holder＆＃34;）。swipeleft（function（）{ var id = $（this）.attr（＆＃34; id＆＃34;）; loadPrevPage（ID）; }）;

  function loadPrevPage(a) {
    var b = a - 1;

    var text = $("#page"+b).html();
    $("#contentArea").empty();
    $("#contentArea").append(text);
    updateLocation("page" + b);

}

function loadNextPage(b) {
    var d = b + 1;

    var text = $("#page" + d).html();
    $("#contentArea").empty();
    $("#contentArea").append(text);
    updateLocation("page" + d);    
}

使用jquery移动滑动加载动态内容

0 个答案: