<!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. 工具软件发现（编写chm 文件的工具）

    编写chm 文件的工具 1.PrecisionHelper 安装之后,发现 编写的很不方便,直接在html 上编写-- 不好用 2.Winchm (推荐) 很好用,赞!至少对比了上面那个复杂的操作之后 ...

  2. Event&Condition pyton

    Event 一个线程需要根据另外一个线程的状态来确定自己的下一步操作,需要调用threading库中Event对象:Event包含一个可由线程设置的信号标志,在初始情况下,event对象的标志位为假( ...

  3. css-a与a:link的一些认识

    1.a元素有四种状态: a:link {color:blue;}//未点击的链接状态 a:visited {color:blue;}//已点击的连接状态 a:hover {color:red;}//鼠 ...

  4. 【bzoj2456】 mode

    http://www.lydsy.com/JudgeOnline/problem.php?id=2456 (题目链接) 只看了一眼,直觉便告诉我这是水题.于是跟某码农打赌说10分钟做出来叫爸爸,结果输 ...

  5. ajax版本带搜索的下拉框

    demo地址:https://github.com/aa1356889/MyAjaxSelectSearch

  6. Bzoj3663/4660 CrazyRabbit

    题意:给定平面上一个圆和一堆圆外的点,要求选出尽可能多的点使得它们之间两两连线都不和圆相交.保证任意两点连线不和圆相切.点数<=2000 这题是很久以前在某张课件上看见的.看了题解还搞了三小时, ...

  7. MongoDB: 数据库复制

    db.copyDatabase("from","to","127.0.0.1:16161"); 将127.0.0.1上的from库.拷贝到t ...

  8. STM32F207和DM9161A的以太网实现方案

    摘要:电力抄表系统常通过网络采集和传输电网中的谐波等信息.本文提出了一种适合电力系统的网络设计方案.在STM32F207和DM9161A为核心的硬件平台上,完成了LwIP协议栈的移植,实现了远程终端和 ...

  9. Maven中配置maven-compiler-plugin插件

    这个插件就如同名字所显示的这样,用来编译源代码的. 加载第三方包 <dependency> <groupId>cn.eshore.bnet</groupId> &l ...

  10. gzip、bzip2、tar压缩命令使用

    1. gzip gzip test.txt //压缩 gzip -d test.txt.gz //解压缩 gzip -9 test.txt //设置压缩等级(9最好,1最差,默认6) 相关:zcat ...