<!doctype html>

<html>

<head>

    <title>iOS7风格的进度条</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <!--demo展示所用css，不用关心 begin-->

    <link rel="stylesheet" type="text/css" href="http://gmu.baidu.com/assets/reset.css" />

    <!--demo展示所用css end-->

    <!--组件依赖css begin-->

    <link rel="stylesheet" type="text/css" href="http://gmu.baidu.com/assets/widget/progressbar/progressbar.css" />

    <link rel="stylesheet" type="text/css" href="http://gmu.baidu.com/assets/widget/progressbar/progressbar.iOS7.css" />

    <!--组件依赖css end-->

    <!--组件依赖js begin-->

    <script type="text/javascript" src="http://gmu.baidu.com/dist/zepto.js"></script>

    <script type="text/javascript" src="http://gmu.baidu.com/src/extend/touch.js"></script>

    <script type="text/javascript" src="http://gmu.baidu.com/src/core/gmu.js"></script>

    <script type="text/javascript" src="http://gmu.baidu.com/src/core/event.js"></script>

    <script type="text/javascript" src="http://gmu.baidu.com/src/core/widget.js"></script>

    <script type="text/javascript" src="http://gmu.baidu.com/src/widget/progressbar/progressbar.js"></script>

    <!--组件依赖js end-->

    <style type="text/css">

        body {

            padding: 10px;

            background-color: #F9F9F9;

        }

        #progressbar- {

            width:250px;

            margin:30px 10px;

        }

        #progressbar- {

            height: 200px;

            margin: 40px;

        }

        input {

            line-height: 30px;

            color: #0079FF;

            border: 1px solid #E1E1E1;

            border-radius: 5px;

            padding:  3px;

        }

        #set_val-,

        #set_val- {

            background-color: #0079FF;

            border: none;

            color: #FFF;

            width: 100px;

            height: 30px;

            border-radius: 5px;

        }

    </style>

</head>

<body>

    <h3>横向的滚动条</h3>

    <div id="progressbar-1"></div>

    <input id="cur_val-1"/>

    <button id="set_val-1">Set</button>

    <br /><br />

    <h3>竖向的滚动条</h3>

    <div id="progressbar-2"></div>

    <input id="cur_val-2"/>

    <button id="set_val-2">Set</button>

    <script>

        //创建横向组件

        $('#progressbar-1').progressbar({

            valueChange: function() {

                $('#cur_val-1').val(this.value());

            }

        });

        $('#set_val-1').click(function() {

            $('#progressbar-1').progressbar('value', $('#cur_val-1').val());

        });

        //创建竖向组件

        $('#progressbar-2').progressbar({

            horizontal: false,

            valueChange: function() {

                $('#cur_val-2').val(this.value());

            }

        });

        $('#set_val-2').click(function() {

            $('#progressbar-2').progressbar('value', $('#cur_val-2').val());

        });

    </script>

</body>

</html>

GMU 简单使用一的更多相关文章

  1. js简单放羊式单元测试-上

    这是看了很多js单元测试资料后第一次自己做单元测试,因为资料都在介绍工具怎么使用,js单元测试的工具是在是太多了,各种风格,各种支持的,新的旧的,so 还是自己动手来体验一次 简单 是我给自己的需求很 ...

  2. Grunt打包GMU组件 报错处理

    莫Q群的大神推荐移动GMU组件,GMU是基于zepto的mobile UI组件库,提供webapp.pad端简单易用的UI组件,官网:http://gmu.baidu.com/具有以下特点: 简单易用 ...

  3. 【造轮子】打造一个简单的万能Excel读写工具

    大家工作或者平时是不是经常遇到要读写一些简单格式的Excel? shit!~很蛋疼,因为之前吹牛,就搞了个这东西,还算是挺实用,和大家分享下. 厌烦了每次搞简单类型的Excel读写?不怕~来,喜欢流式 ...

  4. Fabio 安装和简单使用

    Fabio(Go 语言):https://github.com/eBay/fabio Fabio 是一个快速.现代.zero-conf 负载均衡 HTTP(S) 路由器,用于部署 Consul 管理的 ...

  5. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  6. 哪种缓存效果高？开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  7. 在Openfire上弄一个简单的推送系统

    推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...

  8. 我的MYSQL学习心得（一） 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  9. 使用 Nodejs 搭建简单的Web服务器

    使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程,因为要完成一个简单的Web服务器,你需要学习Nodejs中几个比较重要的模块,比如:http协议模块.文件系统.url解析模块. ...

随机推荐

  1. [转] EJB到底是什么，真的那么神秘吗？？

    原文地址:http://blog.csdn.net/jojo52013145/article/details/5783677 1. 我们不禁要问,什么是"服务集群"?什么是&quo ...

  2. 【BZOJ 1758】【WC 2010】重建计划 分数规划+点分治+单调队列

    一开始看到$\frac{\sum_{}}{\sum_{}}$就想到了01分数规划但最终还是看了题解 二分完后的点分治,只需要维护一个由之前处理过的子树得出的$tb数组$,然后根据遍历每个当前的子树上的 ...

  3. C#元组示例详解

    元组的概要: 数组合并了相同类型的对象,而元组合并了不同类型的对象.元组起源于函数编程语言(如F#) ,在这些语言中频繁使用元组.在N盯4中,元组可通过.NET Fmmework用于所有的NET语言. ...

  4. 100114J

    经过思考后,很明显,我们可以看出应该是求出两条最长的链,链是指挂在连通块上的

  5. 【CodeForces 266C】Below the Diagonal（模拟）

    题目每次把空列换到最后一列,把非空行换到最下一行. #include<cstdio> #include<algorithm> #define N 1005 using name ...

  6. Thinking in java学习笔记之初始化

    1.基本数据类型:类的每个基本数据类型保证有一个初值(char为0输出则是空白) 2.构造器: 3.静态初始化顺序示例及总结 4.非静态初始化顺序 4.数组

  7. Leetcode 270. Closest Binary Search Tree Value

    Given a non-empty binary search tree and a target value, find the value in the BST that is closest t ...

  8. 【poj1020】 Anniversary Cake

    http://poj.org/problem?id=1020 (题目链接) 题意 有一个S*S的大蛋糕,还有许多正方形的小蛋糕,问能否将大蛋糕完整的分成所有的小蛋糕,不能有剩余. Solution 像 ...

  9. Jenkins的Publish Over FTP Plugin插件参数使用

    无论在Windows还是Linux下,都是采用这样方式${WORKSPACE}

  10. CodeForces 51F Caterpillar

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...