webapp 开发之iScroll 学习

demo.html

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>Document</title>

    <script src="lib/jquery.js"></script>

    <script src="lib/iScroll.js"></script>

    <script src="js/demo8.js"></script>

    <style>

        /******************reset****************************/

        body{font-family: 'Microsoft Yahei';background: #eee;}

        *{margin:0;padding: 0;}

        h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;font-style: normal;}

        ul li{list-style: none;}

        /*****************common*****************************/

        .mb20{margin-bottom: 20px;}

        .clearfix{*zoom:1;}

        .clearfix:before,

        .clearfix:after{display: table;line-height: 0;content: '';}

        .clearfix:after{clear: both;}

        /******************layout****************************/

        .header{position: absolute;top: 0;height: 30px;line-height: 1.5;text-align: center;width: 100%;background: brown;color: white;}

        .section{position: absolute;top: 30px;bottom: 30px;overflow: auto;width: 100%;}

        .footer{position: absolute;bottom: 0;height: 30px;line-height: 1.5;text-align: center;width: 100%;background: brown;color: white;}

        .app-wrapper{height: 100%;}

        /**

         * 滚动图片

         */

        .prod-scro-list{background: #fff;padding: 10px;}

        .prod-wrapper{width: 300px;background: pink;margin: 0 auto;}

        .prod-wrapper .prod-container{width: 1200px;}

        .prod-wrapper .prod-container ul {}

        .prod-wrapper .prod-container ul li{width: 280px;height: 100px;padding: 10px;float: left;}

        .scro-nav-bar {width: 100px;margin: 0 auto;}

        .scro-nav-bar ul {}

        .scro-nav-bar ul li{float: left;width: 23px;text-align: center;display: block;}

        .scro-nav-bar ul li.active{background: brown;color: white;}

        /**

         * 产品详情介绍

         */

        .prod-detail-intr{background: #fff;}

        .prod-detail-intr article{padding: 20px;}

        /**

         * 产品规格

         */

        .prod-format{background: #fff;padding: 10px;}

        .prod-format-wrapper{overflow: hidden;width: 300px;background: pink;margin: 0 auto;}

        .prod-format-wrapper .prod-format-list{overflow: hidden;width: 900px;}

        .prod-format-wrapper .prod-format-list ul{}

        .prod-format-wrapper .prod-format-list ul li{width: 280px;height: 100px;padding: 10px;float: left;}

        nav.prod-format-nav-bar{}

        nav.prod-format-nav-bar ul {width: 250px;margin: 0 auto;}

        nav.prod-format-nav-bar ul li {float: left;width: 80px;text-align: center;display: block;}

        nav.prod-format-nav-bar ul li.active{background: brown;color: white;}

    </style>

</head>

<body>

    <header class="header"><h1>Header</h1></header>

    <section class="section">

        <div id="app-wrapper" class="app-wrapper">

            <div class="app-container">

                <div class="prod-scro-list mb20">

                    <div id="prod-wrapper" class="prod-wrapper">

                        <div class="prod-container">

                            <ul class="clearfix">

                                <li>this is prod 1 pic</li>

                                <li>this is prod 2 pic</li>

                                <li>this is prod 3 pic</li>

                                <li>this is prod 4 pic</li>

                            </ul>

                        </div>

                    </div>

                    <nav class="scro-nav-bar">

                        <ul class="clearfix">

                            <li class="active">1</li>

                            <li>2</li>

                            <li>3</li>

                            <li>4</li>

                        </ul>

                    </nav>

                </div>

                <div class="prod-detail-intr mb20">

                    <article>

                        <h1>this is prod title</h1>

                        <p>this is introduction paragraph!</p>

                    </article>

                </div>

                <div class="prod-format mb20">

                    <nav class="prod-format-nav-bar">

                        <ul class="clearfix">

                            <li class="active">产品名称</li>

                            <li>产品参数</li>

                            <li>商品价值</li>

                        </ul>

                    </nav>

                    <div id="prod-format-wrapper" class="prod-format-wrapper">

                        <div class="prod-format-list">

                            <ul class="clearfix">

                                <li>this is format 1</li>

                                <li>this is format 2</li>

                                <li>this is format 3</li>

                            </ul>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>

    <footer class="footer"><p>Footer</p></footer>

</body>

</html>

demo6.js

;(function () {

    'use strict';

    var ProdDetailApp = function () {

        var sectScrol = null,

            prodScrol = null,

            prodFormScrol = null;

        this.run = function () {

            // console.log('running!');

            $(window).load(function () {

                sectScrol = new iScroll('app-wrapper');

                prodScrol = new iScroll('prod-wrapper', {

                    snap: true,

                    momentum: false,

                    hScrollbar: false,

                    onScrollEnd: function () {

                        document.querySelector('.scro-nav-bar ul li.active').className = '';

                        document.querySelector('.scro-nav-bar ul li:nth-child('+(this.currPageX+1)+')').className='active';

                    }

                });

                prodFormScrol = new iScroll('prod-format-wrapper', {

                    snap: true,

                    momentum: false,

                    hScrollbar: false,

                    onScrollEnd: function () {

                        document.querySelector('.prod-format-nav-bar ul li.active').className = '';

                        document.querySelector('.prod-format-nav-bar ul li:nth-child('+(this.currPageX+1)+')').className='active';

                    }

                });

            });

            $(document).delegate('.prod-format-nav-bar ul li', 'click', navScrolAction);

            function navScrolAction (e) {

                var $this = $(e.target),

                    index = $this.index();

                prodFormScrol.scrollToPage(index, 1);

            }

        }

    }

    var prodDetailApp = new ProdDetailApp();

    prodDetailApp.run();

}());

webapp 开发之iScroll 学习的更多相关文章

IOS开发之XCode学习011：UISwitch控件
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 1.定义UIswitch控件,添加UIswitc ...
移动开发之h5学习大纲
移动开发学习形式:授课.自学 1.html5 css3 htm5shiv.js response.js 2.流式布局自适应布局盒模型弹性盒模型响应式布局3.iscroll swiper boo ...
iOS开发之git学习
本人是参考廖雪峰的git学习的.他写的非常详细,我在这里就是把我学习中的总结以及碰到的坑写出来. /* 初始化git仓库:git init */ /* 添加文件到git仓库 */ 分两步: 第一步:追 ...
IOS开发之XCode学习012：Slider和ProgressView
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 1.定义UISlider和UIProgressV ...
IOS开发之XCode学习010：定时器和视图对象
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 1.通过点击"启动定时器"按钮 ...
IOS开发之XCode学习009：UIViewController使用
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 通过点击屏幕事件,调用ViewController ...
IOS开发之XCode学习008：UIViewController基础
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 红色框选部分用A代替,AppDelegate类在程序框架启动时,如果在i ...
IOS开发之XCode学习007：UIWindow对象
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm #import "AppDelegate.h" @i ...
IOS开发之XCode学习013：步进器和分栏控件
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 1.定义UIStepper和UISegmente ...

随机推荐

【Python】内置数据类型
参考资料: http://sebug.net/paper/books/dive-into-python3/native-datatypes.html http://blog.csdn.net/hazi ...
hdu 1301 Jungle Roads 最小生成树
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1301 The Head Elder of the tropical island of Lagrish ...
Visual Studio快捷键设置
1.查看当前快捷键:环境-键盘-按快捷键2.文本编辑器-C#-显示-行号3.文本编辑器-C#-制表符-插入空格4.文本编辑器-所有语言-没有选定内容时对空行应用剪切或复制命令5.Ctrl+Shift- ...
GDI+的常用类
VisualStyleRenderer 提供用于绘制和获取有关 System.Windows.Forms.VisualStyles.VisualStyleElement 的信息的方法. VisualS ...
[百度空间] [转]关于Direct3D多窗口编程的一篇翻译
Introduction In DirectX 8, support for rendering to multiple windows is provided through the creatio ...
.NET设计模式（17）：命令模式（Command Pattern）（转）
概述在软件系统中,“行为请求者”与“行为实现者”通常呈现一种“紧耦合”.但在某些场合,比如要对行为进行“记录.撤销/重做.事务”等处理,这种无法抵御变化的紧耦合是不合适的.在这种情况下,如何将“行为 ...
《暗黑世界GM管理后台系统》部署+功能说明文档
http://www.9miao.com/product-10-1073.html <暗黑世界GM管理后台系统>部署+功能说明文档 <暗黑世界GM管理后台系统>部署+功能说明文 ...
IE8中能继续使用Expression的解决方案
在实际工作中,长的报表需要固定表头,比如DataGrid等控件. 过去在用IE8以前版本的时候,只需要在css中加上 position:relative ; top:expresion(this.of ...
支持DISTINCT的通用分页存储过程（SQL2005）
/****** 对象: StoredProcedure [dbo].[P_CommonPagination] 脚本日期: 07/22/2009 10:22:01 ******/ SET ANSI_NU ...
HDU4782 Beautiful Soup
成都赛里的一道坑爹码力题,突然间脑抽想做一下弥补一下当时的遗憾.当时没做出这道题一是因为当时只剩大概45分钟,对于这样的具有各种条件的题无从下手,二则是因为当时估算着已经有银牌了,所以就不挣扎了.但是 ...

webapp 开发之iScroll 学习

webapp 开发之iScroll 学习的更多相关文章

随机推荐

热门专题