codaSlider hack - как добавить маленькие треугольники, накладывающие изображение - PullRequest
Новая
       26

codaSlider hack - как добавить маленькие треугольники, накладывающие изображение

0 голосов
/ 14 октября 2011

Выезд CodaSlider .

Я удалил UL и выбрал div для управления им, но столкнулся с проблемой. Я хочу добавить треугольник, показывающий, какая панель отображается в данный момент. В данный момент я думаю о добавлении треугольника в сам слайд.jpg, но это очень плохо, если кто-то хочет добавить еще один слайд.

Как бы вы добавили треугольник к текущей панели динамически?

Как: http://i.imgur.com/B0BwU.jpg (добавлено на изображении)

Мой CSS: 

#control {

width: 938px;
height: 65px;
border-right: 1px solid #d1d1d1;
border-left: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
background: #fff url(sliderbg.jpg) repeat;

}

.button { float: left; width: 220px; height: 65px;
margin-right: 15px; border-right: 1px dotted  #d1d1d1; }

.buttonInside { padding: 8px; }

.buttonLast { margin-right: 0; margin-left: 2px; border-right: 0px;}

Решение:

Включить 

ul.navigation a.selected {
background: url(../img/arrow.png) no-repeat top center;
position: relative;
top: -13px;
padding-top: 23px;

} * * тысяча двадцать-один

Установить плавающий элемент, так как встроенные элементы не могут иметь ширину и высоту 

ul.navigation li {
float: left;
margin-right: 12px;
width: 220px;
height: 65px;
border-right: 1px dotted #ddd;

}

Ответы [ 3 ]

2 голосов
/ 14 октября 2011

Я бы использовал псевдоэлемент и CSS для добавления стрелки без изображения: http://jsfiddle.net/blineberry/fqKHK/

CSS со стоковым CodaSlider будет выглядеть так: 

ul.navigation a.selected {
  position: relative;

  background: blue;

  color: #FFF;
}
ul.navigation a.selected:before {
  content: '';

  position: absolute;
  height: 0;
  width: 0;
  bottom: -9px;
  left: 50%;
  margin-left: -9px;
  z-index: 1;

  border: 10px solid transparent;
  border-top: 10px solid blue;
  border-bottom: none;
}

Браузер поддерживает современные браузеры и IE8 +. Для IE 7 и ниже я бы использовал изображение, как советует @Marco, или просто не беспокоюсь об этом.

UPDATE:

У меня было немного времени, поэтому я немного поиграл с вашей конкретной реализацией.

Просто чтобы прояснить, вам нужна помощь в получении javascript для работы с вашими изменениями в разметке в дополнение к получению стрелки "текущий слайд".

Посмотрите на код здесь: http://jsfiddle.net/blineberry/SfJzv/

Запишите эти изменения:

В HTML я добавил класс .navigation к вашему элементу #control. Это поможет вашей разметке работать со скриптом CodaSlider.

В javascript: в строке 34 скрипта (ссылка на этот скрипт: http://jqueryfordesigners.com/demo/coda-slider.js), изменена .parents('ul:first') на .parents('.navigation:first'), а в строке 53 изменена $('ul.navigation a:first').click(); на $('div.navigation a:first').click();.

В CSS я сделал несколько объявлений стилей, чтобы переопределить некоторые стандартные CSS CodaSlider для работы с вашими размерами. Это может вам понадобиться, а может и не понадобиться, в зависимости от вашей реализации.

Вот полноэкранное демо: http://jsfiddle.net/blineberry/SfJzv/embedded/result/

0 голосов
/ 14 октября 2011 
 <script type="text/javascript" language="javascript">
    function ShowHide(obj) {
        document.getElementById("div1").style.display = 'none';
        document.getElementById("div2").style.display = 'none';
        document.getElementById("div3").style.display = 'none';
        document.getElementById("div4").style.display = 'none';
        document.getElementById(obj).style.display = 'inline';


        return false;
    }
</script>
 <style type="text/css">
    a
    {
        cursor: pointer;
        background-color: Transparent;
        top: 0;
        vertical-align: text-top;
    }
</style>

Тело 

<body>
<form id="form1" runat="server">
<div>
    <p>
        Hope this works</p>
    <div style="width: 938px; height: 100px; z-index: -1; border-right: 1px solid #d1d1d1;
        border-left: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; position: absolute;
        left: 8px; top: 20px; z-index: -1; background-color: Black">
    </div>
    <div style="margin-top: 75px; z-index: 99; background-color: Red; height: 35px; width: 940px">
        <div style="float: left; width: 50%; height: 35px; text-align: center; vertical-align: middle">
            <div style="float: left; width: 50%; height: 35px; background-color: Blue; text-align: center;">
                <div id="div1" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%;">
                </div>
                <a onclick="ShowHide('div1');">ClickMe1</a>
            </div>
            <div style="float: left; width: 50%; height: 35px; background-color: Aqua; text-align: center;
                vertical-align: middle">
                <div id="div2" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%; display: none">
                </div>
                <a onclick="ShowHide('div2');">ClickMe1</a>
            </div>
        </div>
        <div style="float: left; width: 50%; height: 35px">
            <div style="float: left; width: 50%; height: 35px; background-color: Fuchsia; text-align: center;
                vertical-align: middle">
                <div id="div3" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%; display: none">
                </div>
                <a onclick="ShowHide('div3');">ClickMe1</a>
            </div>
            <div style="float: left; width: 50%; height: 35px; background-color: Green; text-align: center;
                vertical-align: middle">
                <div id="div4" style="height: 20px; width: 20px; background-color: Black; position: absolute;
                    margin-left: 5%; display: none">
                </div>
                <a onclick="ShowHide('div4');">ClickMe1</a>
            </div>
        </div>
    </div>
</div>
</form>

Надеюсь, это сработает ..... Вы можете поместить свое изображение в сторону div (div1, div2, div3, div4).И извините, код нуждается в очистке.:)

0 голосов
/ 14 октября 2011

Я бы сделал это на кнопке вместо изображения.

Я вижу, у тебя есть кнопка.

Таким образом, вы можете добавить активное состояние к кнопке АКТИВНОЕ изображение, а затем иметь 

.active .buttonInside {margin-top:-20px; background:url(arrow.png) top center; padding-top:28px;}

или что-то в этом роде:)

...