iscroll滑动下拉 结合 jquery mobile 实例应用

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title></title>
    <link href="../Scripts/Jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"
        type="text/css" />
    <script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../Scripts/Jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
    <script src="../Scripts/Jquerymobile/iscroll/iscroll.js" type="text/javascript"></script>
    <style type="text/css" media="all">
        body, ul, li
        {
            padding: 0;
            margin: 0;
            border: 0;
        }

        body
        {
            -webkit-user-select: none;
            -webkit-text-size-adjust: none;
            font-family: 微软雅黑;
            background-color: #f9f9f9;
            background-position: center center;
            background-repeat: no-repeat;
            border-radius: 1em;
        }
        #wrapper
        {
            position: absolute;
            z-index: 1;
            top: 0px;
            bottom: 0px;
            left: 0;
            width: 100%;
            overflow: auto;
        }

        #scroller
        {
            position: relative; /*    -webkit-touch-callout:none;*/
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            float: left;
            width: 100%;
            padding: 0;
        }

        #scroller ul
        {
            position: relative;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            text-align: left;
        }

        #scroller li
        {
            background-color: #fafafa;
        }

        #scroller li > a
        {
            display: block;
        }

        /**
 *
 * 下拉样式 Pull down styles
 *
 */
        #pullDown, #pullUp
        {
            background: #fff;
            height: 40px;
            line-height: 40px;
            padding: 5px 10px;
            font-weight: bold;
            font-size: 12px;
            color: #888;
        }
        #pullDown .pullDownIcon, #pullUp .pullUpIcon
        {
            display: block;
            float: left;
            width: 40px;
            height: 40px;
            background: url(../Scripts/Jquerymobile/iscroll/[email protected]) 0 0 no-repeat;
            -webkit-background-size: 40px 80px;
            background-size: 40px 80px;
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 250ms;
        }
        #pullDown .pullDownIcon
        {
            -webkit-transform: rotate(0deg) translateZ(0);
        }
        #pullUp .pullUpIcon
        {
            -webkit-transform: rotate(-180deg) translateZ(0);
        }

        #pullDown.flip .pullDownIcon
        {
            -webkit-transform: rotate(-180deg) translateZ(0);
        }

        #pullUp.flip .pullUpIcon
        {
            -webkit-transform: rotate(0deg) translateZ(0);
        }

        #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon
        {
            background-position: 0 100%;
            -webkit-transform: rotate(0deg) translateZ(0);
            -webkit-transition-duration: 0ms;
            -webkit-animation-name: loading;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }
        #thelist
        {
            min-height: 600px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div data-role="page" id="pageone">
            <div id="scroller">
                <div data-role="content">
                    <div id="pullDown">
                        <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
                    </div>
                    <ul id="thelist" data-role="listview" data-icon="false">
                        @*<li><a href="#">
                            <img src="../Content/Wallet/list/guoqi.png" width="100%" />
                            <h3>
                                test</h3>
                            <p>
                                testtesttesttesttesttesttesttesttesttest.</p>
                            <p class="ui-li-aside">
                                2014-12-25 20:37</p>
                        </a></li>*@
                        @{
                            string tempHtml = string.Empty;
                            string imgShow = string.Empty;
                            string tempTime = string.Empty;
                            if (tempGoldList != null && tempGoldList.Count > 0)
                            {
                                foreach (KeyValuePair<AdDividendCDTO, string> _model in tempGoldList)
                                {
                                    tempHtml += "<li>";
                                    if (_model.Key.Status == 1)
                                    {
                                        imgShow = "../Content/Wallet/list/";
                                    }
                                    else if (_model.Key.Status == 2)
                                    {
                                        imgShow = "../Content/Wallet/list/";
                                    }
                                    else
                                    {
                                        imgShow = "../Content/Wallet/list/";
                                    }
                                    tempHtml += "<a href=\"#\" onclick=\"Goto(‘RemindWallet?curChangeOrg=00000000-0000-0000-0000-000000000000&sessionId=" + ViewBag.sessionid + "&userId=" + ViewBag.UserId + "&appId=" + ViewBag.AppId + "&isAnnon=" + ViewBag.IsAnnon + "&deviceId=" + ViewBag.DeviceId + "&os=" + ViewBag.MobileType + "&appName=" + ViewBag.AppName + "&msgId=" + _model.Key.Id + "‘)\">";
                                    tempHtml += "<img src=\"" + imgShow + "\" width=\"50em\" height=\"50em\" style=\"margin:0.3em;\">";
                                    tempHtml += "<p style=\"font-size:1.0em;width:80%;\">" + _model.Value + "</p>";
                                    tempHtml += "<p style=\" color:#a3a3a3; font-size:0.95em;\"></p>";
                                    tempHtml += " <p class=\"ui-li-aside\" style=\" color:#a3a3a3; font-size:0.95em; top:0.7em;\">" + _model.Key.DueDateStr + "<p>";
                                    tempHtml += "</a>";
                                    tempHtml += "</li>";
                                }
                            }

                        }
                        @(new HtmlString(tempHtml))
                    </ul>
                    <div id="pullUp">
                        <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <input type="hidden" id="HidSessionId" value="@(ViewBag.sessionid)" />
        <input type="hidden" id="HidUserId" value="@(ViewBag.UserId)" />
        <input type="hidden" id="HidAppId" value="@(ViewBag.AppId)" />
        <input type="hidden" id="HidIsAnnon" value="@(ViewBag.IsAnnon)" />
        <input type="hidden" id="HidDeviceId" value="@(ViewBag.DeviceId)" />
        <input type="hidden" id="HidMobileType" value="@(ViewBag.MobileType)" />
        <input type="hidden" id="HidAppName" value="@(ViewBag.AppName)" />
    </div>
</body>
</html>
<script type="text/javascript">

    var myScroll,
    pullDownEl, pullDownOffset,
    pullUpEl, pullUpOffset,
    generatedCount = 0;

    /**
    * 下拉刷新 （自定义实现此方法）
    * myScroll.refresh();        // 数据加载完成后，调用界面更新方法
    */
    function pullDownAction() {
        setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!

            //模拟浏览器数据加载延迟
            UpOrDown = 0;
            CurrentPage = 1;
            GetData();

            myScroll.refresh();     //数据加载完成后，调用界面更新方法   Remember to refresh when contents are loaded (ie: on ajax completion)
        }, 1000); // <-- Simulate network congestion, remove setTimeout from production!
    };

    /**
    * 滚动翻页 （自定义实现此方法）
    * myScroll.refresh();        // 数据加载完成后，调用界面更新方法
    */
    function pullUpAction() {
        setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
            UpOrDown = 1;
            GetData();

            myScroll.refresh();     // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
        }, 1000); //
    };

    /**
    * 初始化iScroll控件
    */
    function loaded() {
        pullDownEl = document.getElementById(‘pullDown‘);
        pullDownOffset = pullDownEl.offsetHeight;
        pullUpEl = document.getElementById(‘pullUp‘);
        pullUpOffset = pullUpEl.offsetHeight;

        myScroll = new iScroll(‘wrapper‘, {
            scrollbarClass: ‘myScrollbar‘, /* 重要样式 */
            useTransition: false, /* 此属性不知用意，本人从true改为false */
            topOffset: pullDownOffset,
            onRefresh: function () {
                if (pullDownEl.className.match(‘loading‘)) {
                    pullDownEl.className = ‘‘;
                    pullDownEl.querySelector(‘.pullDownLabel‘).innerHTML = ‘下拉刷新...‘;
                } else if (pullUpEl.className.match(‘loading‘)) {
                    pullUpEl.className = ‘‘;
                    pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘上拉加载更多...‘;
                }
            },
            onScrollMove: function () {
                if (this.y > 5 && !pullDownEl.className.match(‘flip‘)) {
                    pullDownEl.className = ‘flip‘;
                    pullDownEl.querySelector(‘.pullDownLabel‘).innerHTML = ‘松手开始更新...‘;
                    this.minScrollY = 0;
                } else if (this.y < 5 && pullDownEl.className.match(‘flip‘)) {
                    pullDownEl.className = ‘‘;
                    pullDownEl.querySelector(‘.pullDownLabel‘).innerHTML = ‘下拉刷新...‘;
                    this.minScrollY = -pullDownOffset;
                } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match(‘flip‘)) {
                    pullUpEl.className = ‘flip‘;
                    pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘松手开始更新...‘;
                    this.maxScrollY = this.maxScrollY;
                } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match(‘flip‘)) {
                    pullUpEl.className = ‘‘;
                    pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘上拉加载更多...‘;
                    this.maxScrollY = pullUpOffset;
                }
            },
            onScrollEnd: function () {
                if (pullDownEl.className.match(‘flip‘)) {
                    pullDownEl.className = ‘loading‘;
                    pullDownEl.querySelector(‘.pullDownLabel‘).innerHTML = ‘加载中...‘;
                    pullDownAction(); // Execute custom function (ajax call?)
                } else if (pullUpEl.className.match(‘flip‘)) {
                    pullUpEl.className = ‘loading‘;
                    pullUpEl.querySelector(‘.pullUpLabel‘).innerHTML = ‘加载中...‘;
                    pullUpAction(); // Execute custom function (ajax call?)
                }
            }
        });

        setTimeout(function () { document.getElementById(‘wrapper‘).style.left = ‘0‘; }, 800);
    }

    //初始化绑定iScroll控件
    document.addEventListener(‘touchmove‘, function (e) { e.preventDefault(); }, false);
    document.addEventListener(‘DOMContentLoaded‘, loaded, false); 

</script>
<script type="text/javascript">
    var CurrentPage = 2;
    var UpOrDown = 1; //0:下滑，1:上滑

    $(function () {
    });

    function GetData() {

        if (UpOrDown == 0) {
            CurrentPage = 1;
        }
        var postdata = {
            userId: $("#HidUserId").val(),
            appId: $("#HidAppId").val(),
            isAnnon: $("#HidIsAnnon").val(),
            deviceId: $("#HidDeviceId").val(),
            os: $("#HidMobileType").val(),
            appName: $("#HidAppName").val(),
            sessionid: $("#HidSessionId").val(),
            pageIndex: CurrentPage,
            pageSize: 15
        };

        $.ajax({
            async: true,
            type: "POST",
            dataType: "json",
            url: "/Wallet/AjaxGetWalletList?r=" + Math.random(),
            data: postdata,
            success: function (data) {
                if (data) {
                    var dataContent = "";
                    var RefContent = "";
                    var itemThelist = $("#thelist");
                    for (var i = 0; i < data.length; i++) {
                        dataContent = createItem(data[i]);
                        if (UpOrDown == 1) {
                            itemThelist.append(dataContent)
                        } else {
                            RefContent += dataContent
                        }
                    }
                    if (UpOrDown == 0) {
                        itemThelist.html(RefContent);
                    }
                    //数据加载完成后，调用页面更新方法
                    myScroll.refresh();
                    if (data.length > 0) {
                        CurrentPage++;
                    }
                }
            },
            error: function (err) {
                myScroll.refresh();
            }
        });
    }

    var template = ‘<li class="ui-li-has-thumb ui-first-child"><a class="ui-btn" href="#" onclick="Goto(\‘RemindWallet?curChangeOrg=00000000-0000-0000-0000-000000000000&sessionId={sessionid}&userId={userid}&appId={appid}&isAnnon={isAnnon}&deviceId={deviceId}&os={MobileType}&appName={appName}&msgId={msgId}\‘)">‘
                        + ‘<img src="{image}" width="50em" height="50em" style="margin:0.3em;" />‘
                        + ‘<p style="font-size:1.0em;width:80%;">{message}</p>‘
                        + ‘<p style=\" color:#a3a3a3; font-size:0.95em;\"></p>‘
                        + ‘<p class="ui-li-aside" style="color:#a3a3a3; font-size:0.95em; top:0.7em;">‘
                        + ‘{time}</p></a></li>‘;

    function createItem(data) {
        var str = template;
        str = str.replace("{sessionid}", $("#HidSessionId").val());
        str = str.replace("{userid}", $("#HidUserId").val());
        str = str.replace("{appid}", $("#HidAppId").val());
        str = str.replace("{isAnnon}", $("#HidIsAnnon").val());
        str = str.replace("{deviceId}", $("#HidDeviceId").val());
        str = str.replace("{MobileType}", $("#HidMobileType").val());
        str = str.replace("{time}", data.Key.DueDateStr);
        str = str.replace("{msgId}", data.Key.Id);
        str = str.replace("{message}", data.Value);
        str = str.replace("{appName}", $("#HidAppName").val());

        if (data.Key.Status == 1) {
            str = str.replace("{image}", "../Content/Wallet/list/");
        } else if (data.Key.Status == 2) {
            str = str.replace("{image}", "../Content/Wallet/list/");
        }
        else {
            str = str.replace("{image}", "../Content/Wallet/list/");
        }
        return str;
    }

    function Goto(_href) {
        window.location.href = _href;
    }
</script>

jquery mobile 全局性比较强，因此在页面设计的时候尽可能的 单独添加元素的样式，修改本身样式表一定要谨慎，以免影响其他页面。

时间： 2024-11-05 21:41:34

iscroll滑动下拉 结合 jquery mobile 实例应用的相关文章

jQuery手写几个常见的滑动下拉菜单 分分秒秒学习JS

一般的企业网站再我们再实际工作中,有些特效,用jQuery来做,显得极其简单,除非一些大的公司,需要封装自己的类. 今天,我们讲解jQuery入门知识,来写几个简单jQuery滑动下拉菜单.感受一下jQuery的简单快速的神奇之处. 学完本章,可以书写最常见的下拉菜单写法. 案例1 效果如图所示: 在书写这个滑动的下拉菜单的时候,我们首先来认识下jQuery里面的滑动方法 :slideToggle() slideToggle(执行时间,运动方式,返回函数) 执行时间: 常用的是 "slow&qu

基于iscroll实现下拉和上拉刷新

http://www.zhangyunling.com/359.html 重要提示 本插件已经经过更新,查看更新的插件代码,以及介绍请查看:基于iscroll实现下拉和上拉刷新(优化); 在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在IOS系统中,新版本还需要经过审核才能通过,这就使得版本的更新受到很大的限制,而如果我们改用网页来展示,那么只要改变服务器中网页的

Jquery Mobile实例--利用优酷JSON接口读取视频数据

本文将介绍,如何利用JqueryMobile调用优酷API JSON接口显示视频数据. (1)注册用户接口. 首页,到 http://open.youku.com 注册一个账户,并通过验证.然后找到API接口 (http://open.youku.com/docs/tech_doc.html) 可以看到优酷提供不少API,本文将演示“通过视频关键词”接口. 点击进去后,会发现client_id和keyword是必填的,因此,未来构造的URL应该类似 https://openapi.youku.c

纯CSS实现的二级下拉菜单效果代码实例

纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一,当前的此效果一般哟结合js实现,本章节介绍一个使用纯CSS实现的二级下拉菜单效果,希望能够给需要的朋友带来一定的帮助,不过此代码也有一点浏览器兼容问题,那就是在IE6中不兼容.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conten

用Iscroll实现下拉刷新的简单方法

用Iscroll实现下拉刷新的简单方法: 基本步骤分三步: 1.开始滚动=== scrollStart 2,滚动过程中 === scroll 3.停止滚动=== scrollEnd 注意:在内容滚动时触发,只有在iscroll-probe.js 版本中有用.   1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <ti

页面多选下拉框 jquery.multiple.select

1.首先引用jquery.multiple.select.js.multiple-select.css 2.在页面select下拉列表里面加一个multiple="multiple" <select name="nimbusHost" id="nimbusHost" multiple="multiple"> <c:forEach items="${stormIps}" var="

省份城市下拉框联动简单实例实现方法

效果如下 //定义字典 Dictionary<string, string> Address = new Dictionary<string, string>(); void loadData() { //这是你要添加的数据 //也可以选择动态添加但是考虑到数据不多不影响性能就这么做了 Address.Add("绵阳", "四川"); Address.Add("成都", "四川"); Address.A

JQuery Mobile实例

<!DOCTYPE html> <html> <head> <title>jQuery Mobile: Pages within Pages</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="ht

bootstrap中selectpicker下拉框使用方法实例

最近一直在用bootstrap 的一些东西,写几篇博客记录下.... bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 下拉框的使用上基本操作一般是:单选.多选.模糊搜索.动态赋值等,下面来看如何使用: 使用方法如下 1.首先需要引入的css和js: bootstrap.css    bootstrap-select.m