<!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. [转]Java_List元素的遍历和删除

    原文地址:http://blog.csdn.net/insistgogo/article/details/19619645 1.创建一个ArrayList List<Integer> li ...

  2. bzoj1012

    Description 现在请求你维护一个数列,要求提供以下两种操作:1. 查询操作.语法:Q L 功能:查询当前数列中末尾L 个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度.2. ...

  3. Extjs-Ext.Ajax.request设置超时

    ExtJs的Ajax提交主要是:Ext.Ajax.request或form1.getForm().submit,超时时间默认是30秒. 很多时候,后台处理比较多,往往需要超出30秒的限制.此时,可以通 ...

  4. Html-Css标签lable中定义宽度需要其他的支持

    lable的标签如果定义了width,如果要使起生效,则需要定义display width: 130px; display: inline-block;

  5. AOPR弹出Order Now窗口怎么办

    当我们忘记了我们自己设置的office密码的时候,需要一款office密码破解软件来帮我们破解,Advanced Office Password Recovery就是这样的一款软件,其简称AOPR.试 ...

  6. 【Codeforces 707B】Bakery 水题

    对每个storages找一下最短的相邻边 #include <cstdio> #define N 100005 #define inf 0x3f3f3f3f using namespace ...

  7. Redis的发布订阅

    是什么: 进程间的一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. 订阅/发布消息图 先订阅后发布后才能收到消息 1.可以一次性订阅多个,SUBSCRIBE c1 c2 c3 2 ...

  8. 【BZOJ-2453&2120】维护队列&数颜色 分块 + 带修莫队算法

    2453: 维护队列 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 653  Solved: 283[Submit][Status][Discuss] ...

  9. 【uoj261】 NOIP2016—天天爱跑步

    http://uoj.ac/problem/261 (题目链接) 题意 给出一棵树,给出一些起点和终点,没走一条路径耗费时间1,每个节点上有一个权值w,问有多少条路径经过这个节点时所用的时间恰好是w. ...

  10. 【bzoj2286】 消耗战

    http://www.lydsy.com/JudgeOnline/problem.php?id=2286 (题目链接) 一个小小的细节,WA了一天,欲哭无泪了.. 题意 给出一个n个节点的带权树,总共 ...