Новое
● Смена дизайна! Выражаем благодарность tørst vinden!

● Были подведены итоги неприлично затянувшихся конкурсов.
А еще Зефир ищет креативных, толковых людей, которые любят и умеют конкурсы устраивать.

● Голосование "Сахарная Вата. Декабрь-январь.".

● Подведены итоги. "Новый Год с Зефиром".

● А также открыт новый конкурс, с мандаринками и елочными ветками. "Дед Мороз всея Зефира" желает побродить по форумам и оценить самую красивую рекламу и самый волшебный зимний дизайн. Спешите участвовать!

● Мы дополнили наш конкурс сладостей, и теперь "Сладкая Вата" продлена до января. Самое время рассказать каталогу свою новогоднюю сказку! Принимаются также работы и осенней тематики.

● ГОЛОСОВАНИЕ. ВЫБИРАЕМ ЛУЧШИЙ ДИЗАЙН И РЕКЛАМУ.

● Зефир в поисках писателей! Ждем с нетерпением в наборе персонала.

● Уже совсем скоро! "Сладкая Вата. Ноябрь"

Зефир

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Зефир » Архив выполненной верстки » [Таблица]Время вперёд


[Таблица]Время вперёд

Сообщений 1 страница 8 из 8

1

1. Название ролевой, ссылка: Время вперёд
2. Что требуется: таблица в объявление
3. Дополнительно:
Макет таблицы при загрузке главной страницы:
http://sa.uploads.ru/t/TmOai.png
Исходники:

Фон объявления

http://sa.uploads.ru/t/9LxQd.png

Кнопки левой части в обычном состоянии

http://sa.uploads.ru/t/Xk8pR.jpg
http://sa.uploads.ru/t/9Woxe.jpg
http://sa.uploads.ru/t/Gjyfk.jpg
http://sa.uploads.ru/t/Wc9pj.jpg

Кнопки правой части в активном состоянии

http://sa.uploads.ru/t/6tcey.jpg
http://sa.uploads.ru/t/ROtcq.jpg
http://sa.uploads.ru/t/smaf1.jpg
http://sa.uploads.ru/t/zej7b.jpg

Кнопки серединной части в обычном состоянии

http://sa.uploads.ru/t/Y3NJ5.png

Кнопки серединной части в активном состоянии

http://sa.uploads.ru/t/TuybR.png

Всё остальное в принципе могу вставить сам, наверное.

Описание:
1. Левая часть таблицы - таблица с переключаемыми кнопками, они меняются при нажатии.
При нажатии на первую кнопку появляется текст (он также появляется при загрузке главной страницы форума).
При нажатии на вторую кнопку появляется текст.
При нажатии на третью кнопку - картинки (вставлю сам).
При нажатии на четвёртую кнопку - баннеры (-//-)
2. Серединная часть таблицы - слайдер с переключаемыми кнопками внизу, также меняются при нажатии.
При нажатии на каждую кнопку вылетает картинка (вставлю сам).
Большое и важное пожелание: хочется, чтобы эта часть таблицы автоматически плавно переключалась через какое-то время (как на Зефире в объявлении, например).
Ну вроде всё.

0

2

Подскажите тогда, пожалуйста, кто-нибудь знает человека, который мог бы сделать таблицу? Готов за небольшую цену даже.

0

3

Faceless Void написал(а):

Готов за небольшую цену даже.

На нашем форуме все выполняется бесплатно. Но нужно подождать немного, верстальщики сейчас заняты.

0

4

Нафаня, прошу меня простить за назойливость, просто мне таблица нужна в срочном порядке. Знаю, что вы выполняете работу бесплатно - я имел ввиду, знает ли кто-нибудь человека, даже не обязательно с Зефира, который мог бы быстро сделать таблицу.Потому что я искал очень долго в Интернете - и так и не нашёл.
Не подскажите ли Вы, какое время мне необходимо ждать? Хотя бы примерно, как минимум.

0

5

Faceless Void, Как минимум 3 дня нужно ждать.

0

6

Нафаня, благодарю.

0

7

Добрый вечер)

Демо

Таблица:

Код:
<div class="anonce-table">
    <div class="anon-table-col coll">
      <ul class="tabs">
        <li id="tabs1" class="active" ><a href="#tab1"><img src="http://sa.uploads.ru/t/6tcey.jpg" width="35px"></a></li>
        <li id="tabs2"><a href="#tab2"><img src="http://sa.uploads.ru/t/zej7b.jpg" width="35px"></a></li>
        <li id="tabs3"><a href="#tab3"><img src="http://sa.uploads.ru/t/smaf1.jpg" width="35px"></a></li>
        <li id="tabs4"><a href="#tab4"><img src="http://sa.uploads.ru/t/ROtcq.jpg" width="35px"></a></li>
      </ul>
      <div style="display: block;" id="tab1" class="tab_content">
        Контект вкладки 1
      </div>
      <div style="display: block;" id="tab2" class="tab_content">
        Контект вкладки 2
      </div>
      <div style="display: block;" id="tab3" class="tab_content">
        Контект вкладки 3
      </div>
      <div style="display: block;" id="tab4" class="tab_content">
        Контект вкладки 4
      </div>
    </div>
    <div class="anon-table-slider coll">
       <div id="slider-wrap">
        <div id="slider">
          <div class="slide">Контент 1</div>
          <div class="slide">Контент 2</div>
          <div class="slide">Контент 3</div>
          <div class="slide">Контент 4</div>
        </div>
      </div>
    </div>
    <div class="anon-table-simple coll">
      Текст
    </div>

</div>

HTML-низ

Код:
<!--Вкладки и слайдер-->
<script type="text/javascript">
$(document).ready(function() {


	$(".tab_content").hide(); 
	$("ul.tabs li:first").addClass("active").show();
	$(".tab_content:first").show();
	
	$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn(700);
    return false;
	});

  
  (function ($) {
var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = false;

$(document).ready(function(e) {
	$('.slide').css(
    {"position" : "absolute",
     "top":'0', "left": '0'}).hide().eq(0).show();
	var slideNum = 0;
	var slideTime;
	slideCount = $("#slider .slide").size();
	var animSlide = function(arrow){
    clearTimeout(slideTime);
    $('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
    if(arrow == "next"){
    	if(slideNum == (slideCount-1)){slideNum=0;}
    	else{slideNum++}
    	}
    else if(arrow == "prew")
    {
    	if(slideNum == 0){slideNum=slideCount-1;}
    	else{slideNum-=1}
    }
    else{
    	slideNum = arrow;
    	}
    $('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
    $(".control-slide.active").removeClass("active");
    $('.control-slide').eq(slideNum).addClass('active');
    }

	var $adderSpan = '';
	$('.slide').each(function(index) {
    	$adderSpan += '<span class = "control-slide">' + index + '</span>';
    });
	$('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
	$(".control-slide:first").addClass("active");
	$('.control-slide').click(function(){
	var goToNum = parseFloat($(this).text());
	animSlide(goToNum);
	});
	var pause = false;
	var rotator = function(){
    	if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
    	}
	$('#slider-wrap').hover(	
    function(){clearTimeout(slideTime); pause = true;},
    function(){pause = false; rotator();
    });
	rotator();
});
})(jQuery);
  
});
</script>

В свой стиль

Код:
.anonce-table {
  background: url("http://sa.uploads.ru/t/9LxQd.png") no-repeat;
  height:300px;
  width:100%;
  clear:both;
}

.anonce-table .coll {
  float:left;
  overflow:hidden;
}
.anon-table-col {
  width:165px;
  height:185px;
  margin:20px 20px;
}
.anon-table-slider {
  width:185px;
  margin:30px 30px;
  height: 140px;
}
.anon-table-simple {
  width:130px;
  margin:20px 10px;
  height: 160px;
}

.anonce-table ul li {
  list-style:none;
  display: inline;
}

.anonce-table .tabs li {
  opacity:0.6;
}

.anonce-table .tabs li:hover {
  opacity:0.8; 
  transition:1s;
}

.anonce-table .tabs .active {
  opacity:1;
}

.anonce-table ul {
  padding:0 5px;
  margin:0;
}


#slider {
height:115px;
	overflow: hidden;
	position:relative;
}
.sli-links {
  margin-left: 40px;
}

.sli-links .control-slide {
  opacity: 0.8;
	background: #8D8F8D;
	margin: 0 8px 0 0;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	cursor: pointer;
	overflow: hidden;
	display: block;
	float: left;
	box-shadow: 0 1px 2px #000;
  text-indent:-9999px;
}

.sli-links .control-slide:hover, .sli-links .control-slide.active {
	background:#464746;
  transition:1s;
}

Отредактировано Патему (2014-12-02 20:25:37)

0

8

http://zephyr.f-rpg.ru/files/0013/e6/99/52870.png
Спасибо, Faceless Void, что воспользовались нашими услугами! Если вам понравилась работа Верстальщика или же наоборот, оставьте свой отзыв в теме "Отзывы заказчиков о выполненной работе", нам важно знать ваше мнение.

0


Вы здесь » Зефир » Архив выполненной верстки » [Таблица]Время вперёд


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC