[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.

  • Professionaloiv

    Professionaloiv zwusaymernjczqaGP xzusaymekmlgzguGP

    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.
  • Professionaloiv

    Professionaloiv zwusaymernjczqaGP xzusaymekmlgzguGP

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

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

    Pouringoff xwusaymehndhxsaGP zvusafmegmdqzhkGP

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

     
  • Professionaloiv

    Professionaloiv zwusaymernjczqaGP xzusaymekmlgzguGP

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

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

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

    Pouringoff xwusaymehndhxsaGP zvusafmegmdqzhkGP


    cảm ơn adevil

     
  • sochibearlyday

    sochibearlyday sochibearlydayXG sochibearlydayXG

    không giống demo 

     
  • Professionaloiv

    Professionaloiv zwusaymernjczqaGP xzusaymekmlgzguGP

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

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

    sochibearlyday sochibearlydayXG sochibearlydayXG

     

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

     
  • copy file vao đâu vậy

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

    sochibearlyday sochibearlydayXG sochibearlydayXG

    có hướng dẫn mà

     
  • Augustoqy

    Augustoqy svusaymeumsdxphGP xzusaymermokxmfGP

    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

     
  • Professionaloiv

    Professionaloiv zwusaymernjczqaGP xzusaymekmlgzguGP

    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