<!DOCTYPE html>
<html>
<head>
<title>jQuery商品信息填写表单布局样式代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="main">
<h1>jQuery商品信息填写表单代码</h1>
<div class="agileinfo_main_grid">
<form action="#" method="post">
<div class="styled-input">
<input type="text" name="ProductName" placeholder="产品名称" required="" />
<span></span>
</div>
<div class="styled-input">
<select id="country" onchange="change_country(this.value)" class="frm-field required">
<option value="null">品牌</option>
<option value="null">Brand1</option>
<option value="AX">Brand2</option>
<option value="AX">Brand3</option>
</select>
<span></span>
</div>
<div class="styled-input">
<input type="text" name="Phone Number" placeholder="电话号码" required="" />
<span></span>
</div>
<div class="clear"></div>
<div class="styled-input">
<input type="text" name="Username" placeholder="用户名" required="" />
<span></span>
</div>
<div class="styled-input">
<input type="email" name="Email" placeholder="Email" required="" />
<span></span>
</div>
<div class="styled-input">
<input type="text" name="Address" placeholder="地址" required="" />
<span></span>
</div>
<div class="clear"></div>
<div class="w3agile_budget">
<h4>范围</h4>
<div>
<input name="Range" type="range" min="0" max="1000" data-rangeslider="" />
<output></output>
<div class="clear"></div>
</div>
</div>
<div class="styled-input w3_styled_input_textarea">
<textarea name="Review" placeholder="填写备注" required=" "></textarea>
<span></span>
</div>
<input type="submit" value="发送消息" />
</form>
</div>
</div>
<script type="text/javascript" src="js/rangeslider.min.js"></script>
<script type="text/javascript">
$(function() {
var $document = $(document);
var selector = '[data-rangeslider]';
var $element = $(selector);
var textContent = ('textContent' in document) ? 'textContent': 'innerText';
function valueOutput(element) {
var value = element.value;
var output = element.parentNode.getElementsByTagName('output')[0] || element.parentNode.parentNode.getElementsByTagName('output')[0];
output[textContent] = value;
}
$document.on('input', 'input[type="range"], ' + selector,
function(e) {
valueOutput(e.target);
});
$document.on('click', '#js-example-disabled button[data-behaviour="toggle"]',
function(e) {
var $inputRange = $(selector, e.target.parentNode);
if ($inputRange[0].disabled) {
$inputRange.prop("disabled", false);
} else {
$inputRange.prop("disabled", true);
}
$inputRange.rangeslider('update');
});
$document.on('click', '#js-example-change-value button',
function(e) {
var $inputRange = $(selector, e.target.parentNode);
var value = $('input[type="number"]', e.target.parentNode)[0].value;
$inputRange.val(value).change();
});
$document.on('click', '#js-example-change-attributes button',
function(e) {
var $inputRange = $(selector, e.target.parentNode);
var attributes = {
min: $('input[name="min"]', e.target.parentNode)[0].value,
max: $('input[name="max"]', e.target.parentNode)[0].value,
step: $('input[name="step"]', e.target.parentNode)[0].value
};
$inputRange.attr(attributes);
$inputRange.rangeslider('update', true);
});
$document.on('click', '#js-example-destroy button[data-behaviour="destroy"]',
function(e) {
$(selector, e.target.parentNode).rangeslider('destroy');
}).on('click', '#js-example-destroy button[data-behaviour="initialize"]',
function(e) {
$(selector, e.target.parentNode).rangeslider({
polyfill: false
});
});
$document.on('click', '#js-example-hidden button[data-behaviour="toggle"]',
function(e) {
var $container = $(e.target.previousElementSibling);
$container.toggle();
});
$element.rangeslider({
polyfill: false,
onInit: function() {
valueOutput(this.$element[0]);
},
onSlide: function(position, value) {
console.log('onSlide');
console.log('position: ' + position, 'value: ' + value);
},
onSlideEnd: function(position, value) {
console.log('onSlideEnd');
console.log('position: ' + position, 'value: ' + value);
}
});
});
</script>
<div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="https://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>
