<html lang=”ko”>
select박스 선택으로 페이지 이동이 아닌 콘텐츠 내용이 바뀔 때 확인 버튼 제공
마크업으로 콘텐츠를 구성할 경우 <h4>, <h5> 태그에 hide 클래스를 적용하여 직접 해당 콘텐츠의 제목을 입력 : 예시 페이지 -http://team2.jiniworks.com/team2/tab/same-url-tab-menu03.do
전체
주요경력
....
탭이 해당 콘텐츠의 카테고리의 역할을 하여 전체 콘텐츠가 하나일 경우 : 예시 페이지 - https://www.yu.ac.kr/main/intro/profile.do
//-----------------------------------------------------------------------------------------
//select box(path)
//-----------------------------------------------------------------------------------------
App.pageTab = function () {
var self;
var $tab, $mTab;
var $pageContent;
var $cate;
var $cateIndex;
var $tabtxt;
var $pageContentBox;
return {
init: function () {
self = this;
$tab = $('.page-tab-box .tab-box ul li a');
$mTab = $('.page-tab-box .m-tab-box select');
$pageContent = $('.page-content-box table tbody tr');
$pageContentBox = $('.page-content-box');
$cateIndex = 0;
// 카테고리 동작 PC
$tab.on('click', function() {
if($(this).parent().hasClass('active')) return false;
/* 탭 아래 컨텐츠에 제목 넣어주는 코드 */
$tabtxt = $(this).text();
$pageContentBox.find('.hide').text($tabtxt);
/* 탭에 선택됌 타이틀 적용 */
$(this).parent().siblings().find('a').removeAttr('title');
$(this).attr('title', '선택됨');
})
// 카테고리 동작 Mobile
$mTab.on('change', function() {
/* 탭 아래 컨텐츠에 제목 넣어주는 코드 */
$tabtxt = $mTab.find('option:selected').text();
$pageContentBox.find('.hide').text($tabtxt);
})
}
}
}();
제목-내용-더보기 순서로 마크업, 더보기의 설명에는 해당 콘텐츠의 상세 설명 추가 필요 (예: 공지사항 더보기)
HTML5에서는 summary는 삭제되어야 하고, caption으로 요약 정보를 제공해야한다. (게시판도 동일하게 적용 필요)
현재는 cms-common.js에 caption > span에 thead의 목록을 자동으로 추가하도록 적용한 상태 (일반 컨텐츠의 테이블과 게시판 테이블에 적용하는 코드 분리)
공지사항공지사항으로 제목, 작성일, 조회의 정보 제공
//------------------------------------------------------
//table caption
//------------------------------------------------------
App.SetTableCaption = function(){
return {
init: function(tableId){
// 테이블 캡션에 설명글을 정의하지 않은 경우 자동 처리
var tableId = tableId;
$(tableId).each(function (){
if($(this).find('caption strong').length > 0 && $(this).find('caption span').length == 0) {
var tableTitle = $(this).find('caption strong').text();
var tableThArr = [];
if($(this).find('thead tr th').length > 0) { // thead에 th가 있는 경우
$(this).find('thead tr th').each(function() {
tableThArr.push($(this).text())
})
var tableThList = tableThArr.join();
} else if ($(this).find('thead tr th').length == 0 && $(this).find('tbody tr th').length > 0){
$(this).find('tbody tr th').each(function() { // tbody에만 th가 있는 경우
tableThArr.push($(this).text())
})
var tableThList = tableThArr.join();
}
$(this).find('caption').append('' + tableThList + '(으)로 구성된 ' + tableTitle + '을(를) 보여주는 표')
}
})
}
}
}();
//------------------------------------------------------
//table caption
//------------------------------------------------------
App.SetBoardTableCaption = function(){
return {
init: function(tableId){
// 게시판 테이블 캡션에 설명글을 정의하지 않은 경우 자동 처리
var tableId = tableId;
$(tableId).each(function (){
if($(this).find('table').attr('summary') && $(this).find('caption strong').length == 0 && $(this).find('caption span').length == 0) {
var tableTitle = $(this).find('table').attr('summary');
var tableThArr = [];
if($(this).find('thead tr th').length > 0) { // thead에 th가 있는 경우
$(this).find('thead tr th').each(function() {
tableThArr.push($(this).text())
})
var tableThList = tableThArr.join();
$(this).find('caption').text('');
$(this).find('caption').append('' + tableTitle + '')
$(this).find('caption').append('' + tableThList + '(으)로 구성된 ' + tableTitle + '의 게시판 내용을 보여주는 표')
}
}
})
}
}
}();
게시판 테이블 캡션 설명글을 자동으로 생성하는 스크립트는 th의 순서를 접근성 심사에 맞지 않게 생성하기 때문에 접근성 마크를 획득 해야하는 프로젝트라면 수기로 caption을 작성할 필요가 있다.
한빛사 국내 기관별 논문 통계기관명, 합계 2), 단독/공동 구분 3), 단독, 공동, 분야 4), 생명과학, 의약학, 바이오의료융합, 그 외(으)로 구성된 한빛사 국내 기관별 논문 통계을(를) 보여주는 표
표 내부의 표를 ul li로 변환하여 구성
ios 보이스오버 기능에서 해당 테이블에 대한 내용을 읽지 않는 오류있음
입력서식에 1:1 대응하는 레이블을 연결하거나 입력서식의 용도를 title로 제공해야 함
선택되지 않은 요소는 title 속성이 아예 사라져야한다.(BRIC 접근성 심사에서 문제되었던 사항)
//개인정보동의(선택)
$('input:checkbox[id="etcChar1"]').on('click keydown', function (event) {
var checked = $(this).prop('checked');
if(event.type == 'keydown' && event.keyCode == '13') checked = !checked;
if(!checked){
$('input:checkbox[id="etcChar1"]').attr('aria-label', '');
}else{
$('input:checkbox[id="etcChar1"]').attr('aria-label', '선택됨');
}
//선택동의 > 체크 x의 경우
if( !checked || !$('input:checkbox[id="infoProtectYn"]').is(":checked")){
$('input:checkbox[id="b-agree"]').prop("checked", false);
//title
$('input:checkbox[id="b-agree"]').attr('aria-label', '' );
}else{
$('input:checkbox[id="b-agree"]').prop("checked", true);
//title
$('input:checkbox[id="b-agree"]').attr('aria-label', '선택됨');
}
});
//------------------------------------------------------
//FAQ-list
//------------------------------------------------------
App.BoardFaqTab = function(){
var self;
var $item, $dest, $dv;
return {
init: function(){
self = this;
$(".bn-list-faq01 .b-title-box").find(".b-title").click(self.onClick);
$(".bn-list-faq01").find(".b-btn-faq").click(self.onClick);
if($('.bn-list-faq01').length > 0) {
// 열기/닫기 버튼 타이틀 설정
$('.b-btn-faq').attr('title','답변 열기')
$('.b-btn-faq').find('span').text('열기')
}
},
onClick: function(){
$item = $(this).parents(".b-quest-box");
if ($item.next(".b-ans-box").find('td > div').is(":hidden")) {
$(".bn-list-faq01").find(".b-ans-box > td > div").slideUp();
$item.next(".b-ans-box").find('td > div').slideDown();
$(".b-quest-box").removeClass("active");
$item.addClass("active");
$('.b-btn-faq').attr('title','답변 열기')
$('.b-btn-faq').find('span').text('열기')
$item.find('.b-btn-faq').attr('title','답변 닫기')
$item.find('.b-btn-faq').find('span').text('닫기')
} else if ($item.next(".b-ans-box").find('td > div').is(":visible")) {
$item.next(".b-ans-box").find('td > div').slideUp();
$item.removeClass("active");
$('.b-btn-faq').attr('title','답변 열기')
$('.b-btn-faq').find('span').text('열기')
}
}
}
}();
$(document).ready(function() {
if($('.tab-ul01').length > 0) {
$('.tab-ul01 li.active a, .tab-ul01 li a.active').attr('title','선택됨');
$('.tab-ul01 li:not(.active) a, .tab-ul01 li a:not(.active)').removeAttr('title');
}
});
$(document).ready(function() {
if($('.tab-wrap').length > 0){
$('.tab-ul > li > a').on('click', function () {
/* 탭에 선택됨 타이틀 적용 */
$(this).parent().siblings().find('a').removeAttr('title');
$(this).attr('title', '선택됨');
});
};
});