Xem bài viết Slider bar content - plugin tiết kiệm không gian cho website

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

Apr 03, 2013Jquery / Javascript
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 ở trên để 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".

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="http://2cweb.vn/templates/public/web2c/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 viết 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, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments