<!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. python中的字符数字之间的转换函数

    int(x [,base ])         将x转换为一个整数     long(x [,base ])        将x转换为一个长整数     float(x )               ...

  2. 初探psutil

    系统性能信息模块psutil 1,psutil简介 psutil是一个跨平台能够轻松获取系统的进程和系统利用率,主要应用在系统监控,分析和限制系统资源以及进程管理.它实现了很多系统管理的命令,如ps, ...

  3. .Net Core 1.0.0 RC2安装及示例教程

    前几天微软发布了.Net Core1.0.0 RC2 Preview版本,一直都想尝试下跨平台的.Net Core,一直拖到今天,也参考了下园友们的经验,闲时整理了一下安装的步骤,供大家参考. 我们要 ...

  4. IE6和IE7中<a>标签宽高设置无效的问题

    昨天写了一个引导界面, 发现界面中的IE67存在一个问题, 在某些情况下,  A锚链接如果设置了宽高,而且position:absolute的情况下, A标签的宽高无效, 至于总体的效果, 因为这个A ...

  5. Canvas是什么

    Canvas 是通过 JavaScript 来绘制 2D 图形,是 HTML 5 中新增的元素. Canvas 有如下特点: 绘制的是位图,图像放大后会失真. 不支持事件处理器. 能够以 .png 或 ...

  6. bzoj 1101 zap

    gcd(x,y)=d-->gcd(x/d,y/d)=1. 即求Σ(i<=n/d)Σ(j<=m/d) e(gcd(i,j)) 因为e=miu×1,可以卷积. 因为多组询问,需要sqrt ...

  7. 【BZOJ-4591】超能粒子炮·改 数论 + 组合数 + Lucas定理

    4591: [Shoi2015]超能粒子炮·改 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 95  Solved: 33[Submit][Statu ...

  8. shell脚本批量调用git命令

    有时候想对本地的几个repository都进行一下pull,一个一个操作比较繁琐,所以写了个shell脚本进行简化操作. git_pull_all.sh #!/bin/sh clear functio ...

  9. Codeforces Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) B. Batch Sort（暴力）

    传送门 Description You are given a table consisting of n rows and m columns. Numbers in each row form a ...

  10. CF 213A Game（拓扑排序）

    传送门 Description Furik and Rubik love playing computer games. Furik has recently found a new game tha ...