文档章节

10.EASYUI Slider组件

F
 Favour
发布于 2016/08/15 12:56
字数 646
阅读 13
收藏 0
点赞 0
评论 0

一,基本滑动器组件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Slider - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>基本滑动器组件</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>拖动滑动器来改变值.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<div style="margin-top:20px;">
		<input class="easyui-slider" style="width:300px" data-options="showTip:true">
	</div>
</body>
</html>

二,滑动器标尺

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Slider - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>滑动器标尺</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>如何定义滑动器标尺.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<div style="margin-top:20px;">
		<input class="easyui-slider" style="width:300px" data-options="
					showTip:true,
					rule: [0,'|',25,'|',50,'|',75,'|',100]
				">
	</div>
</body>
</html>

三,格式化提示信息

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Slider - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>格式化提示信息</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>如何格式化提示信息.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<div style="margin-top:20px;">
		<input class="easyui-slider" value="12" style="width:300px" data-options="
				showTip: true,
				rule: [0,'|',25,'|',50,'|',75,'|',100],
				tipFormatter: function(value){
					return value+'px';
				},
				onChange: function(value){
					$('#ff').css('font-size', value);
				}">
	</div>
	<div id="ff" style="margin-top:50px;font-size:12px">www.java1234.com</div>

</body>
</html>

四,垂直滑动器

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Slider - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>垂直滑动器</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>如何创建一个垂直滑动器.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<input class="easyui-slider" style="height:300px" data-options="
				showTip: true,
				mode: 'v',
				reversed: false,
				rule: [0,'|',25,'|',50,'|',75,'|',100]
			">

</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
F
粉丝 4
博文 185
码字总数 96673
作品 0
成都
程序员
uiw 1.3.3 发布,紧急 bug 修复

新版发布, 高品质的 UI 工具包,React 16+ 的组件库。 更新内容: Bug 修复: 修复TimePicker组件下拉菜单默认选中值问题。 01847a8 修复Slider组件拖拽按钮的提示被遮挡。 0480b4d 修复复制...

同一种调调 ⋅ 2017/11/24 ⋅ 2

Apache Slider

Apache Slider 是一个 Yarn 应用,它可以用来在 Yarn 上部署并监控分布式应用。Slider 可以在应用运行期随意扩展或者收缩应用。目前它是 Apache 的孵化项目。 Yarn 上的应用在停止之后可以重...

夕水溪下 ⋅ 2015/03/09 ⋅ 1

Ajax框架--ZK

ZK是一套以 AJAX/XUL/Java 为基础的网页应用程式开发框架,用于丰富网页应用程式的使用接口。最大的好处是,在设计AJAX网络应用程式时,轻松简便的操作就像设计桌面程式一样。 ZK包含了一个以...

匿名 ⋅ 2008/09/05 ⋅ 2

ZK 6 开发者预览版发布

日前,ZK 发布了 6.0 的开发者预览吧,该版本改进了对泛型的支持、全新的数据绑定,引入新的模板概念,详情请看官方发行说明。 下载地址: http://sourceforge.net/projects/zk1/files/ZK%2...

红薯 ⋅ 2011/10/13 ⋅ 0

Apache Slider 0.81.1-incubating 发布

Apache Slider 0.81.1-incubating 发布,此版本现已提供下载: src="http://www.apache.org/dyn/closer.cgi/incubator/slider/0.81.1-incubating/" href="http://www.apache.org/dyn/closer.......

oschina ⋅ 2015/11/03 ⋅ 0

ZK 6.5.2 发布,支持 Portlet 2.0

ZK 6.5.2 包含 18 个新特性和超过 80 个 bug 的修复,包括改进了的 MVVM、Portlet 2.0 支持,一个更简单的方法来加载自定义主题等等。 ZK是一套以 AJAX/XUL/Java 为基础的网页应用程式开发框...

oschina ⋅ 2013/03/27 ⋅ 0

Ajax框架 -- ZK 3.6.1 发布

ZK是一套以 AJAX/XUL/Java 为基础的网页应用程式开发框架,用于丰富网页应用程式的使用接口。最大的好处是,在设计AJAX网络应用程式时,轻松简便的操作就像设计桌面程式一样。 ZK包含了一个以...

红薯 ⋅ 2009/04/30 ⋅ 0

Foundation v6.2.2-rc2 发布,Web 的 UI 框架

Foundation v6.2.2-rc2 发布了。Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。改进记录如下: Ab...

oschina ⋅ 2016/05/21 ⋅ 0

Element 1.2.5 发布,饿了么 Vue 2.0 组件库

Element 是由饿了么公司前端团队开源,是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。 Element 1.2.5 版本更新内容: 新增 Sl...

王练 ⋅ 2017/03/20 ⋅ 11

lae界面开发工具入门之介绍八--

1、消息转发器组件属性 目标类型包括: 1、父窗口,TransferWndName,可指定父窗口名字,如果为空,则指上一层。 2、兄弟窗口,TransferWndName,指定兄弟窗口名字 3、子窗口,TransferWndNa...

ouloba ⋅ 2016/07/02 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mysql in action / alter table

change character set ALTER SCHEMA `employees` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci ;ALTER TABLE `employees`.`t2` CHARACTER SET = utf8mb4 , COLLAT......

qwfys ⋅ 今天 ⋅ 0

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

MySQL

查看表相关命令 - 查看表结构    desc 表名- 查看生成表的SQL    show create table 表名- 查看索引    show index from  表名 使用索引和不使用索引 由于索引是专门用于加...

stars永恒 ⋅ 昨天 ⋅ 0

easyui学习笔记

EasyUI常用控件禁用方法 combobox $("#id").combobox({ disabled: true }); ----- $("#id").combobox({ disabled: false}); validatebox $("#id").attr("readonly", true); ----- $("#id").r......

miaojiangmin ⋅ 昨天 ⋅ 0

金山WPS发布了Linux WPS Office

导读 近日,金山WPS发布了Linux WPS Office中文社区版新版本,支持大部分主流Linux系统,功能更加完善,兼容性、稳定性大幅度提升。本次更新WPS将首次在Linux提供专业办公文件云存储服务,实...

问题终结者 ⋅ 昨天 ⋅ 0

springboot2输出metrics到influxdb

序 本文主要研究一下如何将springboot2的metrics输出到influxdb maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-bo......

go4it ⋅ 昨天 ⋅ 0

微信小程序 - 选择图片显示操作菜单

之前我分享过选择图片这个文章,但是我在实际开发测试使用中发现一个问题在使用 wx.chooseImage 选择照片显示出第一格是拍照,后面是相册里的图片。这种实现之前说过了,效果如下。 但是你从...

hello_hp ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部