关于JS写出滑动栏效果

最新推荐文章于 2022-09-04 23:43:41 发布

hanbin51987

最新推荐文章于 2022-09-04 23:43:41 发布

阅读量120

点赞数

分类专栏： javascript 文章标签： jQuery JavaScript CSS UI XHTML ViewUI

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

以下是完整的HTML 代码只需要下载包解压缩就成就OK 了样式是可以调的
其实隐藏了一个<select>标签
其实你也可以把他显现出来其实<select>标签跟滑动条的数据是绑定在一起的哦 ~~
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Demo Page: Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider</title>
<link type="text/css" href="js/jquery-ui-themeroller.southstreet.css" media="screen" rel="Stylesheet" />
<link type="text/css" href="js/jquery-ui-slider-additions.css" media="screen" rel="Stylesheet" />
<style type="text/css">
body {font-size: 62.5%; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; }

fieldset { border:0; margin: 6em; height: 12em;}
label {font-weight: normal; float: left; margin-right: .5em; font-size: 1.1em;}
select {margin-right: 1em; float: left;}
.ui-slider {clear: both; top: 5em;}
</style>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/accessibleUISlider.jQuery.js" type="text/javascript"></script>
<script src="js/themeSwitcher.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//demo 1
$('select#speed').accessibleUISlider({width: 400});

//demo 2
$('select#valueA, select#valueB').accessibleUISlider({width: 400});

//demo 3
$('select#valueAA, select#valueBB').accessibleUISlider({
width: 460,
labels: 12
});

$('#switcher').loadSwitcher();
});
</script>

</head>

<body>

<form action="#">
<fieldset>
<label for="speed"></label>
<select name="speed" id="speed" style="display:none">
<option value="Slower">1</option>
<option value="Slow">2</option>
<option value="Med" selected="selected">3</option>
<option value="Fast">4</option>
<option value="Faster">5</option>
</select>
</fieldset>
</form>


</body>
</html>

hanbin51987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于JS写出滑动栏效果

以下是完整的HTML 代码只需要下载包解压缩就成就OK 了样式是可以调的其实隐藏了一个&lt;select&gt;标签其实你也可以把他显现出来其实&lt;select&gt;标签跟滑动条的数据是绑定在一起的哦 ~~ &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding...
复制链接

扫一扫