利用jQuery实现商品信息填写表单代码



10 37 13



特效描述:利用jQuery实现 商品信息 填写表单 代码,利用jQuery实现商品信息填写表单代码

代码结构

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>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">
$(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';">
</div>



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


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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