jQuery商品信息填写表单页面特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

8 29 10



特效描述:商品信息填写 表单页面。jQuery css3商品信息填写表单ui特效。带产品名称、品牌、电话号码、用户名、email、地址、范围、填写备注等表单验证功能。

代码结构

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/rangeslider.min.js"></script>

3. HTML代码

<div class="main">
	<h1>商品获取填写信息表单HTML页面</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 class="agileits_copyright">
		<p>&copy; 2019 Products Request Form Widget. All rights reserved</p>
	</div>
</div>
<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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片头像上传 文件上传 文本框 下拉框 复选 单选 登录框 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 切换按钮 form表单

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到