<!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. android textview改变部分文字的颜色和string.xml中文字的替换（转）

    转   :http://blog.csdn.net/ljz2009y/article/details/23878669 一:TextView组件改变部分文字的颜色: TextView textView ...

  2. 学习Spring(三) 设置Bean作用域

    Spring中几种不同的作用域 Singleton     每个Spring IoC容器中创建一个Bean实例 Prototype    每次请求时创建一个新的Bean实例 Request     为 ...

  3. HttpHelper类

    using System;using System.Collections.Generic;using System.Text;using System.Net;using System.IO;usi ...

  4. html-div中内容自动换行

    <div style='width: 100px;display:block;word-break: break-all;word-wrap: break-word;'> 内容超出div宽 ...

  5. 【USACO 2.2】Runaround Numbers

    找出第一个大于n的数满足:每一位上的数都不同,且没有0,第一位开始每次前进当前这位上的数那么多位,超过总位数就回到开头继续往前进,最后能不能每个位都到过一次且回到第一位,$n<10^9$. 暴力 ...

  6. 【USACO】Transformations（模拟）

    Transformations A square pattern of size N x N (1 <= N <= 10) black and white square tiles is ...

  7. windows下关闭进程

    1.首先查找到占用8080端口的进程号PID是多少 CMD>netstat -ano | findstr 8888 这个命令输出的最后一列表示占用8080端口的进程号是多少,这里是5880 2. ...

  8. leetcode 402. Remove K Digits

    Given a non-negative integer num represented as a string, remove k digits from the number so that th ...

  9. java 基础拾漏

    1.java语言支持的类型非为两类:基础类型(primitive Type) 和引用类型(Reference Type),基础类型8种 2.数组元素的类型是基本类型中的整数类型(byte,short, ...

  10. POJ1185 炮兵阵地

    题目描述 Description 司令部的将军们打算在N × M的网格地图上部署他们的炮兵部队.一个N × M的地图由N行M列组成,地图的每一格可能是山地(用"H"表示),也可能是 ...