Main Page Main Page Feedback Main Page Ads Page
Geodles.Com-Georgian Dle Support
სიახლეების განლაგების შეცვლა ერთი ღილაკით

ამ გაკვეთილში ვისწავლით როგორ გავაკეთოთ სიახელეების გადამართველ. რამოდენიმე სვეტიანიდან ერთ სვეტზე ან პირიქიტ. ეს გაკვეთილიც შეიცავს მედია მოთხოვნებს სხვადასხვა სახის მოწყობილობებთან ადაპტირებისათვის
HTML
<div id="cbp-vm" class="cbp-vm-switcher cbp-vm-view-grid">
    <div class="cbp-vm-options">
        <a href="#" class="cbp-vm-icon cbp-vm-grid cbp-vm-selected" data-view="cbp-vm-view-grid">Grid View</a>
        <a href="#" class="cbp-vm-icon cbp-vm-list" data-view="cbp-vm-view-list">List View</a>
    </div>
    <ul>
        <li>
            <a class="cbp-vm-image" href="#"><img src="images/1.png"></a>
            <h3 class="cbp-vm-title">Silver beet</h3>
            <div class="cbp-vm-price">$19.90</div>
            <div class="cbp-vm-details">
                Silver beet shallot wakame tomatillo salsify mung bean beetroot groundnut.
            </div>
            <a class="cbp-vm-icon cbp-vm-add" href="#">Add to cart</a>
        </li>
        <li>
            <!--  ... -->
        </li>
        <!--  ... -->
    </ul>
</div>


CSS
@font-face {
    font-family: 'fontawesome';
    src:url('../fonts/fontawesome/fontawesome.eot');
    src:url('../fonts/fontawesome/fontawesome.eot?#iefix') format('embedded-opentype'),
        url('../fonts/fontawesome/fontawesome.woff') format('woff'),
        url('../fonts/fontawesome/fontawesome.ttf') format('truetype'),
        url('../fonts/fontawesome/fontawesome.svg#fontawesome') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Основной контейнер */
.cbp-vm-switcher {
    padding: 20px;
    border: 3px solid #47a3da;
}

/* контейнер выбора опции */
.cbp-vm-options {
    text-align: right;
    padding-bottom: 10px;
    border-bottom: 3px solid #47a3da;
}

.cbp-vm-options a {
    display: inline-block;
    width: 40px;
    height: 40px;
    overflow: hidden;
    white-space: nowrap;
    color: #d0d0d0;
    margin: 2px;
}

.cbp-vm-options a:hover,
.cbp-vm-options a.cbp-vm-selected {
    color: #47a3da;
}

.cbp-vm-options a:before {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    text-align: center;
    display: inline-block;
}

/* Основные стили для переключения между режимами */

.cbp-vm-switcher ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Сброс основных CSS настроек */
.cbp-vm-switcher ul:before,
.cbp-vm-switcher ul:after {
    content: " ";
    display: table;
}

.cbp-vm-switcher ul:after {
    clear: both;
}

.cbp-vm-switcher ul li {
    display: block;
    position: relative;
}

.cbp-vm-image {
    display: block;
    margin: 0 auto;
}

.cbp-vm-image img {
    display: inline-block;
    max-width: 100%;
}

.cbp-vm-title {
    margin: 0;
    padding: 0;
}

.cbp-vm-price {
    color: #c0c0c0;
}

.cbp-vm-add {
    color: #fff;
    background: #47a3da;
    padding: 10px 20px;
    border-radius: 2px;
    margin: 20px 0 0;
    display: inline-block;
    transition: background 0.2s;
}

.cbp-vm-add:hover {
    color: #fff;
    background: #02639d;
}

.cbp-vm-add:before {
    margin-right: 5px;
}

/* Основные иконки */
.cbp-vm-icon:before {
    font-family: 'fontawesome';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.cbp-vm-grid:before {
    content: "\f00a";
}

.cbp-vm-list:before {
    content: "\f00b";
}

.cbp-vm-add:before {
    content: "\f055";
}

/* Виды отображений */

/* Отображение сеткой */
.cbp-vm-view-grid ul {
    text-align: center;
}

.cbp-vm-view-grid ul li {
    width: 33%;
    text-align: center;
    padding: 25px;
    margin: 20px 0 0;
    display: inline-block;
    min-height: 420px;
    vertical-align: top;
}

.cbp-vm-view-grid .cbp-vm-title {
    font-size: 2em;
}

.cbp-vm-view-grid .cbp-vm-details {
    max-width: 300px;
    min-height: 70px;
    margin: 0 auto;
}

.cbp-vm-view-grid .cbp-vm-price {
    margin: 10px 0;
    font-size: 1.5em;
}


/* Отображение списком */
.cbp-vm-view-list li {
    padding: 20px 0;
    white-space: nowrap;
}

.cbp-vm-view-list .cbp-vm-image,
.cbp-vm-view-list .cbp-vm-title,
.cbp-vm-view-list .cbp-vm-details,
.cbp-vm-view-list .cbp-vm-price,
.cbp-vm-view-list .cbp-vm-add {
    display: inline-block;
    vertical-align: middle;
}

.cbp-vm-view-list .cbp-vm-image {
    width: 10%;
}

.cbp-vm-view-list .cbp-vm-title {
    font-size: 1.3em;
    padding: 0 10px;
    white-space: normal;
    width: 23%;
}

.cbp-vm-view-list .cbp-vm-price {
    font-size: 1.3em;
    width: 10%;
}

.cbp-vm-view-list .cbp-vm-details {
    width: 40%;
    padding: 0 15px;
    overflow: hidden;
    white-space: normal;
}

.cbp-vm-view-list .cbp-vm-add {
    margin: 0;
}

@media screen and (max-width: 66.7em) {
    .cbp-vm-view-list .cbp-vm-details  {
        width: 30%;
    }
}

@media screen and (max-width: 57em) {
    .cbp-vm-view-grid ul li {
        width: 49%;
    }
}

@media screen and (max-width: 47.375em) {
    .cbp-vm-view-list .cbp-vm-image {
        width: 20%;
    }

    .cbp-vm-view-list .cbp-vm-title {
        width: auto;
    }

    .cbp-vm-view-list .cbp-vm-details  {
        display: block;
        width: 100%;
        margin: 10px 0;
    }

    .cbp-vm-view-list .cbp-vm-add  {
        margin: 10px;
    }
}

@media screen and (max-width: 40.125em) {
    .cbp-vm-view-grid ul li {
        width: 100%;
    }
}


javascript

(function() {

    var container = document.getElementById( 'cbp-vm' ),
        optionSwitch = Array.prototype.slice.call( container.querySelectorAll( 'div.cbp-vm-options > a' ) );

    function init() {
        optionSwitch.forEach( function( el, i ) {
            el.addEventListener( 'click', function( ev ) {
                ev.preventDefault();
                _switch( this );
            }, false );
        } );
    }

    function _switch( opt ) {
        // удаление других классов и выделенных опций
        optionSwitch.forEach(function(el) {
            classie.remove( container, el.getAttribute( 'data-view' ) );
            classie.remove( el, 'cbp-vm-selected' );
        });
        // добавление класса отображения
        classie.add( container, opt.getAttribute( 'data-view' ) );
        // эта опция остаётся выбранной
        classie.add( opt, 'cbp-vm-selected' );
    }

    init();

})();




გადაწერეთ მზა არქივი: თქვენ არ შეგიძლიათ ფაილების გადმოწერა სერვერიდან

0
ავტორი: admin ნანახია: 796 | კომენტარი: 0 | Other | 15-04-2014, 23:10
სიახლეების განლაგების შეცვლა ერთი ღილაკით
ინფორმაცია
ჯგუფ სტუმარი-ის წევრებს არ აქვთ კომენტარის დატოვების უფლება.






რა სისტემაზე მუშაობთ

დამწყები ვარ
უქოზზე
დლეზე
ჯუმლაზე
ვორდპრესზე
რამოდენიმეზე ერთდროულად



����������� ������


© 2009-2012 Powered By Geodles.Com