jqueryui组件progressbar进度条和日期组件datepickers的简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datepickers</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="progressbar"></div> <button class="btn btn-success" id="test01">增加10%</button>
<button class="btn btn-success" id="test02">100%</button>
<button class="btn btn-success" id="test03">切换</button> <script>
$(function() {
var num = 0
$( "#progressbar" ).progressbar({
value: num
}); //点一次进度条增加10%
$('#test01').on('click', function(){
num = num+10
console.log(num)
$( "#progressbar" ).progressbar("value", num );
}) //进度条100%
$('#test02').on('click', function(){
$( "#progressbar" ).progressbar({
value: 100
})
}) //禁用和激活进度条
$('#test03').on('click', function(){
var is_disabled = $( "#progressbar" ).progressbar( "option", "disabled" );
// alert(is_disabled);
if(is_disabled){
$( "#progressbar" ).progressbar( "enable" );
$('#test03').html('禁用');
}else{
$( "#progressbar" ).progressbar( "option", "disabled", true );
$('#test03').html('激活');
}
})
} ); </script>
</body>
</html>
jqueryui组件datepickers的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datepickers</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p> <script>
$( function() {
$( "#datepicker" ).datepicker({
//改变格式为yy-mm-dd
dateFormat: "yy-mm-dd"
})
} );
</script>
</body>
</html>
jqueryui组件progressbar进度条和日期组件datepickers的简单使用的更多相关文章
- progressbar进度条组件
Progressbar 进度条组件 通过$.fn.progressbar.fn.defaults重写默认的defaults进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更 ...
- 第一百九十八节,jQuery EasyUI,ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
- 第33讲 UI组件_进度条ProcessBar和消息队列处理器handler
第33讲UI组件_进度条ProcessBar和消息队列处理器handler 1. 进度条ProcessBar 一个可视化的进度指示器,代表正在执行的耗时任务.可以为用户展示一个进度条,表示正在执行的任 ...
- 使用tqdm组件构造程序进度条
使用tqdm组件构造程序进度条 觉得有用的话,欢迎一起讨论相互学习~Follow Me 主要代码 import tqdm # 引用tqdm组件 TRAIN_STEPS = N for i in tqd ...
- progress组件(进度条)
progress组件:进度条 progress组件的属性: percent:类型:number 设置百分比 (0~100) show-info:类型:布尔 在进度条右侧显示百分比 border-rad ...
- EasyUI系列学习(八)-ProgressBar(进度条)
一.创建组件 1.class加载 <div class="easyui-progressbar"></div> 2.js加载 <div id=&quo ...
- Android学习笔记- ProgressBar(进度条)
本节引言: 本节给大家带来的是Android基本UI控件中的ProgressBar(进度条),ProgressBar的应用场景很多,比如 用户登录时,后台在发请求,以及等待服务器返回信息,这个时候会用 ...
- ProgressBar(进度条)、SeekBar(拖动条)与星级评分条(RatingBar)
1.ProgressBar(进度条) (1)介绍 (2)常用属性 (3)xml代码 <ProgressBar android:id="@+id/progressBar2" s ...
- Qt Quick 常用元素:ComboBox(下拉列表) 与 ProgressBar(进度条)
一.ComboBox ComboBox,即下拉列表框,由一个列表框和一个标签控件(或编辑控件)组成.ComboBox 的下拉列表是使用 Menu 实现的,列表内的每个条目对应一个 Menultem. ...
随机推荐
- Vue.js入门系列教程(三)
序言
- HTTP 响应类型 ContentType 对照表
Ø 前言 1. 下面是 HTTP 响应类型 ContentType 的可选值,有备无患先保存一下.摘自:https://wiki.selfhtml.org/wiki/MIME-Type/%C3% ...
- luogu 2296 寻找道路 简单BFS
简单的BFS,练习基础 #include<bits/stdc++.h> #define rep(i,x,y) for(register int i=x;i<=y;i++) #defi ...
- poj2559/hdu1506 单调栈经典题
我实在是太菜了啊啊啊啊啊 到现在连个单调栈都不会啊啊啊 写个经典题 #include<cstdio> #include<algorithm> #include<cstri ...
- tensorflow---alexnet training (tflearn)
# 输入数据 import input_data mnist = input_data.read_data_sets("/tmp/data/", one_hot=True) imp ...
- java实现数据缓存
摘抄自java并发实战 有时候需要对数据缓存.用Map缓存数据比较合适.但是由于对吞吐量,一致性,计算性能的要求,对数据进行缓存的设计还是需要慎重考虑的. 一.利用HashMap加同步 (1)说明 把 ...
- 利用ssh操控远程服务器
这里的”远程”操控的方法实际上也不是真正的远程.,這此操作方法主要是在一个局域网内远程操控电脑 (在一个路由器下).可以把它做成在互联网中的远程操控, 不过技术难度上加了一个等级, 如果你想是想人在公 ...
- Debian Security Advisory(Debian安全报告) DSA-4410-1 openjdk-8 security update
Debian Security Advisory(Debian安全报告) DSA-4410-1 openjdk-8 security update Package :openjdk-8 CVE ID: ...
- PHP取微信access_token并全局存储与更新
来源:http://www.zcphp.com/html/weixinkaifa-show-20.html 官方的说明: access_token是公众号的全局唯一票据,公众号调用各接口时都需使用ac ...
- luogu P4363 [九省联考2018]一双木棋chess
传送门 对抗搜索都不会,我真是菜死了qwq 首先根据题目条件,可以发现从上到下每一行的棋子数是单调不增的,然后n m都比较小,如果把状态搜出来,可以发现合法状态并不多,所以可以用一个11进制数表示状态 ...