완전한 패치 워크 "프런트 엔드 프레임"(5) - 탭 동작

디렉토리

• 패치 워크 완벽한 배경 "프런트 엔드 프레임"(1) - 레이아웃
• 패치 워크가 배경 "프런트 엔드 프레임"(2) 완료 - 글꼴 아이콘
• 패치 워크 완료 "프런트 엔드 프레임"(3) - 사이드 바
• 패치 워크 완료 "프런트 엔드 프레임"(4) - 탭 페이지

사설

기본 작업 완료 탭 페이지를 완료,하지만 기능은 아직 완전하지 않다 :

• 탭 페이지의 개방 정도를 초과 처리?
• 모든 탭 페이지, 가까운 다른 작업을 닫습니다
• 탭 페이지 새로 고침 작업

디자인

여기에 참조 LayUIAdmin의 설계 방식을 :

1. 미지에 대한 탭 열은 동적으로 조정할 수 있습니다
2. 페이지를 초과 탭을 열고 지정된 탭의 표시 위치를 조정
3. 출근 다른 범위 탭
   

레이아웃

• 막대 탭 위치는 좌측 및 우측 조정 후 탭 막대 절대 위치를 찾을 수있다
• 애니메이션 주위를 조정 transaction

코드

HTML

···
 <div class="ls-tab-container">
    <div class="header flex">
        <!--left-->
        <div class="tab-operate tab-operate-left">
            <a class="fa fa-2x fa-angle-double-left opt-left"></a>
        </div>
        <!--titles-->
        <div class="ls-tab-titles flex">
            <div class="tab-title active" data-id="0">
                <span class="title">
                    <i class="ls-icon ls-icon-home"></i>
                </span>
            </div>
        </div>
        <!--right-->
        <div class="tab-operate tab-operate-right">
            <a class="fa fa-2x fa-angle-double-right opt-right"></a>
            <a class="fa fa-2x fa-angle-double-down">
                <div class="dropdown-panel">
                    <ul>
                        <li class="opt" data-opt="refresh">刷新</li>
                        <li class="opt" data-opt="closeOthers">关闭其它</li>
                        <li class="opt" data-opt="closeAll">全部关闭</li>
                    </ul>
                </div>
            </a>
        </div>
    </div>
···
</div>
···

CSS

<!--Tabs栏-->
.ls-tab-container .ls-tab-titles {
    position: absolute;
    left: 39px;
    right: 78px;
    overflow: hidden;
    transition: all 300ms ease-in;
    -webkit-transition: all 300ms ease-in;
}
<!--操作-->

.tab-operate {
    position: absolute;
    display: flex;
    text-align: center;
    border-bottom: 1px solid #e6e6e6;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 6px rgba(196, 199, 202, 0.35);
    z-index: 8;
}

.tab-operate .fa:hover {
    background: rgba(238, 238, 238, .6);
    cursor: pointer;
}

.tab-operate.tab-operate-left {
    left: 0;
}

.tab-operate.tab-operate-right {
    right: 0;
}

.tab-operate .fa {
    color: #666;
    font-size: 22px;
    line-height: 36px;
    width: 38px;
    display: inline-block;
}

.tab-operate-left .fa {
    border-right: 1px solid rgb(230, 230, 230, .8);
}

.tab-operate-right .fa {
    border-left: 1px solid rgb(230, 230, 230, .8);
    position: relative;
}

효과

드롭 다운 메뉴

동작을 오른쪽 마우스 버튼 후 때 아이디어는 매우 간단 의사 클래스 인 경우에도 다운 메뉴에서 쇼 풀, hover달성하기 위해,하지만의 사용에 transaction애니메이션을 할 수있는 검색 프로세스, display속성 및 transaction속성 충돌 솔루션을 통해 height:0;overflow:hidden;애니메이션을 달성하기 위해 :

.dropdown-panel {
    background: #fff;
    position: absolute;
    width: 120px;
    right: 0;
    font-size: 13px;
    transition: top 200ms ease-in, opacity 200ms ease-in;
    -webkit-transition: top 200ms ease-in, opacity 200ms ease-in;
    border-radius: 4px;
    top: 46px;
    height: 0;
    opacity: 0;
    overflow: hidden;
    box-shadow: 0 0 6px rgba(196, 199, 202, .35);
}

.tab-operate-right .fa:hover .dropdown-panel {
    top: 37px;
    opacity: 1;
    height: auto;
    border: 1px solid rgb(230, 230, 230, .8);
}

결과 미리보기

운영

사고

탭의 복수의 긴 사용하여도 1에 도시 된 잉여 부분으로 열기 얻을 수 백 업 특성 :Tab栏margin-left
margin-left: (Tab栏.Offset().Left+Tabs栏.Width() - TabItem.Offset().Left-TabItem.Width()) + 'px'

키 코드 구현

// 激活Tab时触发
···
// 位置调整
var pleft = $tab.offset().left + 39;
var pright = $tab.offset().left + $tab.width() - 80;
var cleft = $tabTitle.offset().left;
var cright = cleft + $tabTitle.width() + 30;
var cmgLeft = parseFloat($tabTitle.parent().css("margin-left").replace("px", ""));

if (cleft < pleft) {
    cmgLeft = (cmgLeft + pleft - cleft);
    $tabTitle.parent().css("margin-left", cmgLeft + "px");
} else if (cright > pright) {
    cmgLeft = (cmgLeft + pright - cright);
    $tabTitle.parent().css("margin-left", cmgLeft + "px");
}
···

강타

사고

페이징 생각 : 컬럼 폭 비유 탭이 PageSize[分页大小]점유하는 전체 길이 유사 탭을 열고TotalCount[总数]

키 코드 구현

/**
 * 翻页
 * @param {页码}} pageIndex 
 */
var changePage = function(diff) {
    // 容器宽度
    var cWidth = $('.ls-tab-container').width() - 119;
    var $firstTitle = $('.ls-tab-titles .tab-title:first'),
        $lastTitle = $('.ls-tab-titles .tab-title:last');
    // 内容宽度
    var tsWidth = $lastTitle.offset().left -
        $firstTitle.offset().left +
        $lastTitle.width() + 30;
    var curPage = $title_container.attr("cur-p");

    // 容器 margin-left 用于计算当前页码
    var cmgLeft = parseFloat($title_container.css("margin-left").replace("px", ""));
    curPage = Math.floor(Math.abs(cmgLeft) / cWidth) + 1;

    var totalPage = Math.floor(tsWidth / cWidth) + (tsWidth % cWidth > 0 ? 1 : 0);
    curPage = curPage + diff;
    if (curPage >= totalPage) {
        curPage = totalPage;
        $title_container
            .css("margin-left", (1 - totalPage) * cWidth + "px")
            .attr("cur-p", totalPage);
    } else if (curPage <= 1) {
        curPage = 1;
        $title_container
            .css("margin-left", "0px")
            .attr("cur-p", "1");
    } else {
        $title_container
            .css("margin-left", (1 - curPage) * cWidth + "px")
            .attr("cur-p", curPage);
    }
}

결과 미리보기

비판에 오신 것을 환영합니다

소스 주소

https://github.com/LaosanShang/ls-admin-frontend