Tìm kiếm nhanh

[Share] Block lấy tin được hiển thị theo dạng accordion

Thảo luận trong 'Blocks' đăng bởi khicon038, 17/10/2016 10:51.

  • khicon038

    khicon038 Nguyễn Minh Hoàng

    Sau khi tham gia khóa làm giao diện Nukeviet online của Lê Thúc Vinh. Cũng cố gắng mày mò tí để gọi là cho biết. Và đây là kết quả của em nó 

    File download bên dưới

    Copy đoạn css dưới vào style.css

    .sj-accordion  {
    	padding:0;
    	overflow: hidden;
    }
    .sj-accordion .acd-items {margin:0;}
    .sj-accordion .acd-items .acd-item{
    	margin:0;
    	padding:0;
    }
    .sj-accordion .acd-items .acd-item .acd-header{
    	cursor: pointer ;
    	border: 1px solid #ddd;
    	margin:2px 0;
    	padding: 5px 8px 5px 8px;
    	white-space: nowrap;
    	overflow: hidden;
    	text-overflow:ellipsis;
    }
    .sj-accordion .acd-items .acd-item.selected .acd-header {
    	font-weight: bold;
    	color: #fff;
        background-color: #1192f6;
        background-image: -moz-linear-gradient(top,#1c9cff,#0083e8);
        background-image: -webkit-gradient(linear,0 0,0 100%,from(#1c9cff),to(#0083e8));
        background-image: -webkit-linear-gradient(top,#1c9cff,#0083e8);
        background-image: -o-linear-gradient(top,#1c9cff,#0083e8);
        background-image: linear-gradient(to bottom,#1c9cff,#0083e8);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1c9cff', endColorstr='#ff0083e8', GradientType=0);
        border-color: transparent;
    }
    .sj-accordion .acd-items .acd-item.selected .acd-header:hover {
        background-color: #0b8df1;
        background-image: -moz-linear-gradient(top,#0083e8,#1c9cff);
        background-image: -webkit-gradient(linear,0 0,0 100%,from(#0083e8),to(#1c9cff));
        background-image: -webkit-linear-gradient(top,#0083e8,#1c9cff);
        background-image: -o-linear-gradient(top,#0083e8,#1c9cff);
        background-image: linear-gradient(to bottom,#0083e8,#1c9cff);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0083e8', endColorstr='#ff1c9cff', GradientType=0);
        color: #fff;
    }
    .sj-accordion .acd-items .acd-item.selected .acd-header i {
        display: none;
    }
    .sj-accordion .acd-items .acd-item.selected .acd-header a{
    	color: #fff;
    }
    .sj-accordion .acd-items .acd-item .acd-header:hover {
        color: #0083e8;
        background: #f1f1f1;
    }
    .acd-header a:hover {
        color: #0083e8;
    }
    .acd-content-wrap .acd-image .image-overlay {
        width: 100%;
        height: 100%;
        background-color: rgba(102,102,102,0.5);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: all 0.25s ease-in-out 0s;
        -moz-transition: all 0.25s ease-in-out 0s;
        -o-transition: all 0.25s ease-in-out 0s;
        transition: all 0.25s ease-in-out 0s;
    }
    .acd-content-wrap .acd-image:hover .image-overlay {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    .acd-content-wrap .acd-image .image-overlay .hover-links {
        position: absolute;
        top: 50%;
        right: 50%;
        margin: -18px -10px 0 0;
    }
    .acd-content-wrap .acd-image .image-overlay .hover-links a {
        width: 35px;
        height: 35px;
        background: #0083e8;
        line-height: 32px;
        text-align: center;
        margin: 0 2px;
        display: inline-block;
        -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 0 1px rgba(0,0,0,0.2);
        box-shadow: 0 0 1px rgba(0,0,0,0.2);
        border: 1px solid #1298ff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .acd-content-wrap .acd-image:hover .image-overlay .hover-links a.hover-zoom:hover, .acd-content-wrap .acd-image:hover .image-overlay .hover-links a.hover-link:hover {
        background: #1c9cff;
    }
    .acd-content-wrap .acd-image .image-overlay .hover-links a i {
        margin: 0;
        font-size: 14px;
        color: white;
    }
    
    .sj-accordion .acd-items .acd-item .acd-content-wrap .acd-content .acd-description{display: inline;}
    /* .sj-accordion .acd-items .acd-item.selected .acd-content-wrap{
    	height: auto;
    } */
    .sj-accordion .acd-items .acd-item .acd-content-wrap{
     	overflow: hidden; 
      	height: 0; 
    	width:100%;
    }
    .sj-accordion .acd-content-wrap .acd-content-wrap-inner{
    	margin:0;
    	padding:0;
    	overflow: hidden;
    	display: block;
    }
    .sj-accordion .acd-content-wrap .acd-content-wrap-inner .acd-image{
    	overflow: hidden;
    	margin: 10px 0;
    	position: relative;
    	padding: 4px;
    	border: 1px solid #ddd;
    }
    
    .sj-accordion .acd-content-wrap .acd-content-wrap-inner .acd-image img{
    	float:left;
    	max-width: 100%;
    	width:100%;
    	border:0;
    	margin:0;
    	padding:0;
    }
    
    .icon-add {
        width: 14px;
        height: 14px;
        text-align: center;
        background: #0083e8;
        padding:1px;
    	color:#fff;
    }

    Vậy là xong.

    P/s : gửi lời cám ơn Trần Phương nữa nhé.

     
    anhyeuviolet NamSon thích điều này.
  • khicon038

    khicon038 Nguyễn Minh Hoàng

    Thêm tệp tin rồi mà sao không thấy gì?

     
    NamSon thích điều này.
  • NamSon

    NamSon Trần Nam Sơn

    không thấy file đâu hết

     
  • khicon038

    khicon038 Nguyễn Minh Hoàng

    Lấy ở đây đi vậy 

    https://drive.google.com/file/d/0B4iuqPCf8BmdQ01KWXdZU1lqU3M/view?usp=sharing

     
    anhyeuviolet NamSon thích điều này.
  • NamSon

    NamSon Trần Nam Sơn


    cảm ơn adevil

     
  • anpy.ceo

    anpy.ceo David An

    không giống demo 

     
  • khicon038

    khicon038 Nguyễn Minh Hoàng

    Sao thế được? Inbox cho mình xem thử ?

     
    anpy.ceo thích điều này.
  • anpy.ceo

    anpy.ceo David An

     

    quên ko chép js đó mà

     
  • sinpink

    sinpink Trương Thành Tâm

    copy file vao đâu vậy

     
    anpy.ceo thích điều này.
  • anpy.ceo

    anpy.ceo David An

    có hướng dẫn mà

     
  • vietlv

    vietlv Viet Lv

    copy hết css mà đoạn kia nó ko ra dấu cộng ở đầu tin bác nhỉ ? cái này thêm toôtip nữa thì ngon :3

     
  • khicon038

    khicon038 Nguyễn Minh Hoàng

    bạn muốn thêm tooltip thì copy nó ở file block_groups.tpl sang là được mà. Mình xóa đi vì thấy k cần thiết.

     

Chia sẻ trang này

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây