<!DOCTYPE html>
<html>
<head>
<title>jQuery商品信息填写表单代码 - 【更多源码：www.96flw.com】</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>
<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="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jQuery商品信息填写表单代码.zip （5个子文件） 
jiaoben7066 js 
rangeslider.min.js 8KB jquery.min.js 91KB css style.css 14KB
index.html 5KB images 
banner.jpg 246KB资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5852
最新资源
- YOLO算法-塑料数据集-7张图像带标签-塑料.zip
- 极客时间-面试现场（关于面试相关的注意事项）
- YOLO算法-刀具检测数据集-58张图像带标签-.zip
- 劳斯莱斯豪车内部装饰及版本特色展示
- 面试神器（开箱即用，一键安装）
- 农村综合风貌展示平台项目源代码全套技术资料.zip
- 【源文件说明】(MMI)多模子系统文件说明
- 找工作薪资翻倍的独家揭秘.pdf
- 自学考试02331数据结构试题及答案2021-2022
- C++实现rpc，全程手写
- 【二开诺诺打赏】最新某站上买的二开诺诺打赏/独立代理后台/带教程
- MyTinySTL-master使用C++手写STL
- 网盘项目源代码全套技术资料.zip
- 手写WebServer-master
- 离散数学课后题答案+sdut往年试卷+复习提纲资料
- 支付宝当面付打赏系统源码开源版
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
