<commit_before>﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滑动条-range</title>
		<link rel="stylesheet" type="text/css" href="../public/cssreset-min.css">
		<link rel="stylesheet" type="text/css" href="../public/common.css">
		<style type="text/css">			
			.panel{
				margin-bottom:20px;
			}
			.range{
				width:240px;
				height:4px;
				margin-bottom:15px;
				border:1px solid #e2e2e2;
			}
			.range .value{
				background:#0064cd;
			}
			.range .handle{
				display:block;
				top:-3px;
				width:8px;
				height:8px;
				margin-left:-5px;
				border:1px solid #e2e2e2;
				background:#fff;
				cursor:default;
				outline:0;
			}
		</style>
		<script type="text/javascript" src="../public/jquery.min.js"></script>
		<script type="text/javascript" src="../code/jquery.range.js"></script>
	</head>
	<body>
		<div class="main">
			<div class="panel">
				<div class="range" id="range1"></div>
				<p><input id="input1" type="text" readonly value=""/></p>
			</div>
			<div class="code">
				<p>移动结束显示</p>
				<p>
				$('#range1').range({<br/>
					min:0,<br/>
					max:50,<br/>
					value:40,<br/>
					step:5,<br/>
					change:function(status){<br/>
						$('#input1').val(status.value);<br/>
					}<br/>
				});
				</p>
			</div>
			<script type="text/javascript">
				$('#range1').range({
					min:0,
					max:50,
					value:40,
					step:5,
					change:function(status){
						$('#input1').val(status.value);
					}
				});			
			</script>
			<div class="panel">
				<div class="range" id="range2"></div>
				<p><input id="input2" type="text" readonly/></p>
			</div>
			<div class="code">
				<p>移动过程中显示</p>
				<p>
				$('#range2').range({<br/>
					min:10,<br/>
					max:62,<br/>
					value:40,<br/>
					step:5,<br/>
					slide:function(status){<br/>
						$('#input2').val(status.value);<br/>
					}<br/>
				});
				</p>
			</div>
			<script type="text/javascript">
				$('#range2').range({
					min:10,
					max:62,
					value:40,
					step:5,
					slide:function(status){
						$('#input2').val(status.value);
					}
				});
			</script>
			<div class="example">
				<div class="call">
					<h1>调用方法：</h1>
					<p>$(selector).range(options,callback(api));</p>
				</div>
				<h2> options参数</h2>
				<table>
					<thead>
						<tr>
							<th  style="width:150">参数</th>
							<th  style="width:80">默认值</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>valueCls</td>
							<td>value</td>
							<td>当前有效值范围显示class</td>
						</tr>
						<tr>
							<td>handleCls</td>
							<td>handle</td>
							<td>拖动滑块class</td>
						</tr>
						<tr>
							<td>min</td>
							<td>0</td>
							<td>变化范围的最小值</td>
						</tr>
						<tr>
							<td>max</td>
							<td>100</td>
							<td>变化范围的最大值</td>
						</tr>
						<tr>
							<td>value</td>
							<td>1</td>
							<td>默认显示的值</td>
						</tr>
						<tr>
							<td>step</td>
							<td>1</td>
							<td>每次移动的步长</td>
						</tr>
						<tr>
							<td>type</td>
							<td>'outer'</td>
							<td>outer进度计算以进度条宽为准，inner进度计算需扣除条滑块宽</td>
						</tr>
						<tr>
							<td>slide</td>
							<td>function(){}</td>
							<td>当前值变化时触发的事件，传入对象:event为事件,value为当前值</td>
						</tr>
						<tr>
							<td>change</td>
							<td>function(){}</td>
							<td>当前值变化后触发的事件，传入对象:event为事件,value为当前值</td>
						</tr>
					</tbody>
				</table>
				<h2> callback(api)参数</h2>
				<table>
					<thead>
						<tr>
							<th  style="width:200">方法</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>setValue(value)</td>
							<td>设置值</td>
						</tr>
						<tr>
							<td>resize()</td>
							<td>重置尺寸</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</body>
<html>
<commit_msg>updated range演示修改<commit_after>﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滑动条-range</title>
		<link rel="stylesheet" type="text/css" href="../public/cssreset-min.css">
		<link rel="stylesheet" type="text/css" href="../public/common.css">
		<style type="text/css">			
			.panel{
				margin-bottom:20px;
			}
			.range{
				width:240px;
				height:4px;
				margin-bottom:15px;
				border:1px solid #e2e2e2;
			}
			.range .value{
				background:#0064cd;
			}
			.range .handle{
				display:block;
				top:-3px;
				width:8px;
				height:8px;
				margin-left:-5px;
				border:1px solid #e2e2e2;
				background:#fff;
				cursor:default;
				outline:0;
			}
		</style>
		<script type="text/javascript" src="../public/jquery.min.js"></script>
		<script type="text/javascript" src="../code/jquery.range.js"></script>
	</head>
	<body>
		<div class="main">
			<div class="panel">
				<div class="range" id="range1"></div>
				<p><input id="input1" type="text" readonly value=""/></p>
			</div>
			<div class="code">
				<p>移动结束显示</p>
				<p>
<pre>$('#range1').range({
	min:0,
	max:50,
	value:40,
	step:5,
	change:function(status){
		$('#input1').val(status.value);
	}
});</pre>
				</p>
			</div>
			<script type="text/javascript">
				$('#range1').range({
					min:0,
					max:50,
					value:40,
					step:5,
					change:function(status){
						$('#input1').val(status.value);
					}
				});			
			</script>
			<div class="panel">
				<div class="range" id="range2"></div>
				<p><input id="input2" type="text" readonly/></p>
			</div>
			<div class="code">
				<p>移动过程中显示</p>
				<p>
<pre>$('#range2').range({
	min:10,
	max:62,
	value:40,
	step:5,
	slide:function(status){
		$('#input2').val(status.value);
	}
});</pre>
				</p>
			</div>
			<script type="text/javascript">
				$('#range2').range({
					min:10,
					max:62,
					value:40,
					step:5,
					slide:function(status){
						$('#input2').val(status.value);
					}
				});
			</script>
			<div class="example">
				<div class="call">
					<h1>调用方法：</h1>
					<p>$(selector).range(options,callback(api));</p>
				</div>
				<h2> options参数</h2>
				<table>
					<thead>
						<tr>
							<th  style="width:150">参数</th>
							<th  style="width:80">默认值</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>valueCls</td>
							<td>value</td>
							<td>当前有效值范围显示class</td>
						</tr>
						<tr>
							<td>handleCls</td>
							<td>handle</td>
							<td>拖动滑块class</td>
						</tr>
						<tr>
							<td>min</td>
							<td>0</td>
							<td>变化范围的最小值</td>
						</tr>
						<tr>
							<td>max</td>
							<td>100</td>
							<td>变化范围的最大值</td>
						</tr>
						<tr>
							<td>value</td>
							<td>1</td>
							<td>默认显示的值</td>
						</tr>
						<tr>
							<td>step</td>
							<td>1</td>
							<td>每次移动的步长</td>
						</tr>
						<tr>
							<td>type</td>
							<td>'outer'</td>
							<td>outer进度计算以进度条宽为准，inner进度计算需扣除条滑块宽</td>
						</tr>
						<tr>
							<td>slide</td>
							<td>function(){}</td>
							<td>当前值变化时触发的事件，传入对象:event为事件,value为当前值</td>
						</tr>
						<tr>
							<td>change</td>
							<td>function(){}</td>
							<td>当前值变化后触发的事件，传入对象:event为事件,value为当前值</td>
						</tr>
					</tbody>
				</table>
				<h2> callback(api)参数</h2>
				<table>
					<thead>
						<tr>
							<th  style="width:200">方法</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>setValue(value)</td>
							<td>设置值</td>
						</tr>
						<tr>
							<td>resize()</td>
							<td>重置尺寸</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</body>
<html>

{'fraction_non_alphanumeric': 0.22564802182810367, 'fraction_numerical': 0.02291950886766712, 'mean_word_length': 2.046965918536991, 'pattern_counts': {'":': 0, '<': 367, '<?xml version=': 0, '>': 367, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4590197', 'n_tokens_mistral': 4506, 'n_tokens_neox': 3241, 'n_words': 429}