RSSJavascript - Jquery - Ajax

Slider bar content - plugin tiết kiệm không gian cho website

Bài hôm nay 2Cwebvn xin gởi đến các bạn Slider bar content - plugin tiết kiệm không gian cho website, nói là plugin nhưng thực chất nó chỉ là 1 đoạn code nhỏ (cũng giống như toggle ấy) Đoạn code này có thể giúp cho bạn tiết kiệm được không gian website khá nhiều và bạn có thể show lên những dữ liệu khác mà bạn muốn.

Slider bar content - plugin tiết kiệm không gian cho website - 2Cwebvn

Slider bar content - plugin tiết kiệm không gian cho website

Bài hôm nay 2Cwebvn xin gởi đến các bạn Slider bar content - plugin tiết kiệm không gian cho website, nói là plugin nhưng thực chất nó chỉ là 1 đoạn code nhỏ (cũng giống như toggle ấy) Đoạn code này có thể giúp cho bạn tiết kiệm được không gian website khá nhiều và bạn có thể show lên những dữ liệu khác mà bạn muốn.
 
Qua các bài trước chắc các bạn cũng đã khá vững với các kiến thức của mình rồi, vì thế từ bài hôm nay mình sẽ hạn chế chú thích lại, để cho các bạn đỡ thấy dư thừa và bài viết ngắn gọn lại, quyết định thế nhé các tình yêu :D
 
Trước khi bắt đầu vào biết viết thì mình cùng xem qua demo để biết mình sẽ làm gì nhé.
 

1. PHẦN HTML

Đầu tiên mình có cặp thẻ bao bọc quanh tất cả với id="wrapper".
<div id="wrapper">
		<!-- NỘI DUNG INFO BÀI VIẾT -->
		
		<!-- NỘI DUNG CHÍNH - CONTENT SLIDER BAR -->

	</div>
  
Nội dung của 2 phần bên trong như sau:
<div id="wrapper">
		<div class="floatleft">
			<img src="images/logo_2cwebvn.png" alt="Logo 2Cweb" />
			<h2>Slider bar content - plugin tiết kiệm không gian cho website!</h2>
			<p><a href="http://www.2cweb.vn/blog" title="Trở về bài viết">Xem chi tiết</a></p>
		</div><!--END .floatleft-->
	   
		<div id="right-demo" class="contents">
			<!--pushup content bar statrs here-->
			<div class="btn-show">Show</div>
			<div class="pushup-form">
				<div class="btn-close">Close</div>
				<div class="clear"></div>
				<div class="cform">
					<div class="address">
						<p><strong>2Cweb Group</strong></p>
						<p><span>Website: </span>http://www.2cweb.vn<br />
							<span>Email: </span>2cwebvn@gmail.com
						</p>
					</div>
					<div class="map"><img src="images/map.jpg"/></div>
					<div class="contact-form">
						<h4>Contact Form</h4>
						<p><input type="text" class="name" value="Name" /></p>
						<p><input type="text" class="email" value="Email" /></p>
						<p><textarea class="message">Message</textarea></p>
						<p class="clear"><input type="submit" value="Send" class="submit"/></p>
					</div><!--END .contact-form-->
				</div><!--END .cform-->
			</div><!--END .pushup-form-->
		</div><!--END #right-demo-->
	</div><!--END #wrapper-->

 

2. PHẦN CSS

Để chi tiết cho phần CSS này mình chia ra các phần nhỏ để cho các bạn dễ đọc. Phần đầu tiên là phần định dạng cho trang.

	/********************************************************
					ĐỊNH DẠNG TRANG
	*********************************************************/
	body
	{
		margin: 0px; padding: 0px;
		font-family: Arial, Helvetica, sans-serif;
		background-color: #fffcf7 ;
	}
	#wrapper
	{
		width: 960px; height: 705px; 
		margin: 0 auto; overflow: hidden;
		background-color: #f3f3f3;
		border-left: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;
	}
	.floatleft
	{
		float: left; position: absolute;
		padding: 10px; text-align: center;
		border: 1px solid rgb(213, 213, 213);
		width: 450px; margin: 30px 0px 0 100px;
	}
	p{font-weight: normal !important;}
	.loatleft p{ color: #545454; font-weight: bold !important;}

 
Tiếp theo sẽ là định dạng cho cho các phần tử trong form:

	/********************************************************
						FORM
	*********************************************************/
	.cform{ width: 268px; margin: auto; }
	h4
	{
		color: #f1f1f1;
		font: bold 14px Arial;
		margin-bottom: 0;
	}
	.contact-form{ margin: 5px; padding: 0 0 150px 0; }

	.contact-form p input[type=text],
	.contact-form p textarea,
	.contact-form p input[type=submit]{
		background-color: #525461;
		color: #fff;
		border: none;outline:none;
		cursor: pointer;
	}
	.contact-form p input[type=text]
	{
		width: 100%; height: 36px;
		padding-left: 4px;
	}
	.contact-form p textarea
	{
		padding-left: 4px;
		width: 99%; height: 176px;
		font: normal 12px Verdana;
	}
	.contact-form p input[type=submit]
	{
		padding: 4px 16px 6px;
		margin-right: -3px;
		float: right;
	}
	.cform .map{ width: 100%;	height: 176px;}
	.address p{	font: bold 12px Arial; color: #fff; }

	.button
	{
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.50);
		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.50);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.50);
		border: 1px solid rgba(0, 0, 0, 0.25);
		color: #FFFFFF !important;	cursor: pointer;
		display: inline-block;	font-size: 13px;
		font-weight: bold;	line-height: 1;
		overflow: visible;	padding: 5px 15px 6px;
		position: relative; text-decoration: none;
		text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
		width: auto; text-align: center;
	}
	.button:hover{ background: #111111; color: #FFFFFF; }
	.button:active{ background: #242424; }

 
Cuối cùng là pushup form:

	/********************************************************
						PUSHUP FORM
	*********************************************************/
	.pushup-form
	{
		width: 302px; background-color: rgb(248, 33, 110);
		padding: 10px 0px; position: relative;
	}

	.pushup-form.right{ border-left: solid 2px rgb(165, 31, 95); }
	.clear { clear: both;}
	.btn-close
	{
		color: #f1f1f1; border: none;
		background-color: #525461;
		width: 40px; height: 16px;
		font-size: 12px;	text-align: center;
		cursor: pointer;	padding: 6px 8px 4px;
	}

	.btn-close.right { float: left;	margin-left: 15px;}
	.btn-show
	{
		color: #f1f1f1; background-color: #525461;
		border: none;	width: 40px;	height: 16px;
		font-size: 11px;	text-align: center;
		cursor: pointer;	padding: 6px 8px 4px;
		top: 30px;	position: absolute;	z-index: 99;
	}
	.pushup-form{z-index: 100; }

 

3. PHẦN AJAX

Trước tiên thì mình cần include thư viện của jQuery vào nhé.
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
Tiếp theo là code AJAX cho ứng dụng, phần code này mình chỉ có 1 hàm pupslider() với các option trong đó, và được đặt trong file custom.js để cho nội dung file html ngắn gọn hơn. Nội dung như sau:

(function($) {
		$.fn.extend({
			pupslider: function(options) {
				var settings = $.extend({ stick: 'right', speed: 1000, opacity: 1 }, options);
				var wrapper = $(this);
				var sw = $('.btn-show', wrapper).outerWidth();
				var w = $('.pushup-form', wrapper).outerWidth() + sw;
				var fw = $('.pushup-form', wrapper).outerWidth();
				$('.pushup-form', wrapper).css('opacity', settings.opacity);
				if (settings.stick == 'right') {
					var rLeft = wrapper.outerWidth();
					var sLeft = wrapper.outerWidth() + wrapper.offset().left - sw;
					$('.btn-show', wrapper).css('left', sLeft);
					$('.btn-close', wrapper).addClass('right');
					$('.pushup-form', wrapper).addClass('right').css({ left: rLeft, display: '' });
					$('.btn-show', wrapper).click(function() {
						$(this).css('display', 'none');
						$('.pushup-form', wrapper).css('display', '').animate({ left: '-=' + fw }, settings.speed);
					});
					$('.btn-close', wrapper).click(function() {
						$('.pushup-form', wrapper).animate({ left: '+=' + fw }, settings.speed, function() { $(this).css('display', ''); $('.btn-show').css('display', ''); });
					});
				}
			}
		});
	})(jQuery);

 
Cuối cùng là mình gọi ra để dùng và một phần nhỏ khi focus và bỏ focus trong các textbox.

$(document).ready(function() {
		$('#right-demo').pupslider({ stick: 'right', speed: 600, opacity: 0.9 });

		$('.name').focus(function() {
			$(this).val('');
		}).blur(function() {
			if ($(this).val() == '') $(this).val('Name');
		});
		$('.email').focus(function() {
			$(this).val('');
		}).blur(function() {
			if ($(this).val() == '') $(this).val('Email');
		});
		$('.message').focus(function() {
			$(this).val('');
		}).blur(function() {
			if ($(this).val() == '') $(this).val('Message');
		});

	});

 
Thế là xong, các bạn chạy thử đi nào, và đây là kết quả sau khi làm xong.
 
Slider bar content - plugin tiết kiệm không gian cho website - 2Cwebvn 01
 
Slider bar content - plugin tiết kiệm không gian cho website - 2Cwebvn 02
 

Kết luận

Bạn có thích bài hướng dẫn này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, 2Cwebvn xin cảm ơn!
 
Mọi ý kiến thắc mắc hay đóng góp xin gởi về cho chúng tôi bằng form bình luận bên dưới, xin chúc các bạn thành công!
Nguồn: 2Cwebvn

 

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu