Переключатель с таблицы на список

Тема в разделе "Верстка", создана пользователем emil116rus, 14 июл 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. emil116rus

    emil116rus Постоялец

    Регистр.:
    29 мар 2008
    Сообщения:
    130
    Симпатии:
    15
    Нужна помощь, необходимо что бы изначально отображало thumb_view а не display

    Демо здесь


    Код:
    <script type="text/javascript">
    $(document).ready(function(){
        $("a.switch_thumb").toggle(function(){
          $(this).addClass("swap");
          $("ul.display").fadeOut("fast", function() {
              $(this).fadeIn("fast").addClass("thumb_view");
             });
          }, function () {
          $(this).removeClass("swap");
          $("ul.display").fadeOut("fast", function() {
              $(this).fadeIn("fast").removeClass("thumb_view");
            });
        });
    
    });
    </script>
    
    Код:
    <style type="text/css">
    
    .container {
        width: 758px;
        margin: 0 auto;
        padding-bottom: 100px;
        overflow: hidden;
    }
    ul.display {
        float: left;
        width: 756px;
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid #ddd;
        border-right: 1px solid #ddd;
        background: #eee;
    }
    ul.display li {
        float: left;
        width: 754px;
        padding: 10px 0;
        margin: 0;
        border-top: 1px solid #fff;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #fff;
        color:#000
    }
    ul.display li a {
        color: #0062ad;
        text-decoration: none;
    }
    ul.display li .content_block {
        padding: 0 10px;
    }
    ul.display li .content_block h2 {
        margin: 0;
        padding: 5px;
        font-weight: normal;
        font-size: 1.7em;
    
    }
    ul.display li .content_block p {
        margin: 0;
        padding: 5px 5px 5px 245px;
        font-size: 1.2em;
    }
    ul.display li .content_block a img{
        padding: 5px;
        border: 2px solid #ccc;
        background: #fff;
        margin: 0 15px 0 0;
        float: left;
    }
    
    ul.thumb_view li{
        width: 250px;
    }
    ul.thumb_view li h2 {
        display: inline;
    }
    ul.thumb_view li p{
        display: none;
    }
    ul.thumb_view li .content_block a img {
        margin: 0 0 10px;
    }
    
    
    a.switch_thumb {
        width: 122px;
        height: 26px;
        line-height: 26px;
        padding: 0;
        margin: 10px 0;
        display: block;
        outline: none;
        text-indent: -9999px;
        background-image: url(switch.gif);
        background-repeat: no-repeat;
    }
    a:hover.switch_thumb {
        filter:alpha(opacity=75);
        opacity:.75;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    }
    a.swap { background-position: left bottom; }
    
    
    </style>
    
    Код:
    <div class="container">
    <a href="#" class="switch_thumb">Иконка переключателя</a>
    <ul class="display">
        <li>
            <div class="content_block">
                <a href="#"><img src="sample.gif" alt="" /></a>
                <h2><a href="#">Название миниатюры</a></h2>
                <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
            </div>
        </li>
        <li>
            <div class="content_block">
                <a href="#"><img src="sample2.gif" alt="" /></a>
                <h2><a href="#">Название миниатюры</a></h2>
                <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
            </div>
        </li>
        <li>
            <div class="content_block">
                <a href="#"><img src="sample3.gif" alt="" /></a>
                <h2><a href="#">Название миниатюры</a></h2>
                <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
            </div>
        </li>
        <li>
            <div class="content_block">
                <a href="#"><img src="sample4.gif" alt="" /></a>
                <h2><a href="#">Название миниатюры</a></h2>
                <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
            </div>
        </li>
        <li>
            <div class="content_block">
                <a href="#"><img src="sample5.gif" alt="" /></a>
                <h2><a href="#">Название миниатюры</a></h2>
                <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
            </div>
        </li>
        <li>
            <div class="content_block">
                <a href="#"><img src="sample6.gif" alt="" /></a>
                <h2><a href="#">Название миниатюры</a></h2>
                <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
            </div>
        </li>
        <li>
            <div class="content_block">
                <a href="#"><img src="sample7.gif" alt="" /></a>
                <h2><a href="#">Название миниатюры</a></h2>
                <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
            </div>
        </li>
        <li>
            <div class="content_block">
                <a href="#"><img src="sample8.gif" alt="" /></a>
                <h2><a href="#">Название миниатюры</a></h2>
                <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. </p>
            </div>
        </li>
        <li>
            <div class="content_block">
                <a href="#"><img src="sample9.gif" alt="" /></a>
                <h2><a href="#">Название миниатюры</a></h2>
                <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'.</p>
            </div>
        </li>
        <li>
            <div class="content_block">
                <a href="#"><img src="sample10.gif" alt="" /></a>
                <h2><a href="#">Название миниатюры</a></h2>
                <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
            </div>
        </li>
        <li>
            <div class="content_block">
                <a href="#"><img src="sample11.gif" alt="" /></a>
                <h2><a href="#">Название миниатюры</a></h2>
                <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell. </p>
            </div>
        </li>
        <li>
            <div class="content_block">
                <a href="#"><img src="sample12.gif" alt="" /></a>
                <h2><a href="#">Название миниатюры</a></h2>
                <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
            </div>
        </li>
    </ul>
    </div>
     
  2. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    340
    Симпатии:
    162
    HTML Заменить
    Код:
    <ul class="display"> 
    На
    Код:
    <ul class="display thumb_view"> 
    JS:
    Код:
    <script type="text/javascript">
    $(document).ready(function(){
        $("a.switch_thumb").toggle(function(){
          $(this).addClass("swap");
          $("ul.display").fadeOut("fast", function() {
              $(this).fadeIn("fast").removeClass("thumb_view");
             });
          }, function () {
          $(this).removeClass("swap");
          $("ul.display").fadeOut("fast", function() {
              $(this).fadeIn("fast").addClass("thumb_view");
            });
        });
    
    });
    </script>
     
    Orestiy нравится это.