object(HotopayModel)#1143 (23) {
["error"]=>
int(0)
["message"]=>
string(7) "success"
["variables"]=>
array(0) {
}
["httpStatusCode"]=>
int(200)
["module"]=>
string(7) "hotopay"
["module_info"]=>
NULL
["origin_module_info"]=>
NULL
["module_config"]=>
NULL
["module_path"]=>
string(52) "/home/eond/web/eond.com/public_html/modules/hotopay/"
["xml_info"]=>
NULL
["module_srl"]=>
NULL
["mid"]=>
NULL
["act"]=>
NULL
["template_path"]=>
NULL
["template_file"]=>
NULL
["layout_path"]=>
NULL
["layout_file"]=>
NULL
["edited_layout_file"]=>
NULL
["stop_proc"]=>
bool(false)
["user"]=>
object(Rhymix\Framework\Helpers\SessionHelper)#1142 (20) {
["member_srl"]=>
int(0)
["user_id"]=>
NULL
["user_name"]=>
NULL
["nick_name"]=>
NULL
["email_address"]=>
NULL
["phone_number"]=>
NULL
["homepage"]=>
NULL
["blog"]=>
NULL
["birthday"]=>
NULL
["denied"]=>
NULL
["status"]=>
NULL
["is_admin"]=>
string(1) "N"
["is_site_admin"]=>
NULL
["profile_image"]=>
NULL
["image_name"]=>
NULL
["image_mark"]=>
NULL
["signature"]=>
NULL
["description"]=>
NULL
["group_list"]=>
array(0) {
}
["menu_list"]=>
array(0) {
}
}
["request"]=>
object(Rhymix\Framework\Request)#10 (13) {
["method"]=>
string(3) "GET"
["compat_method"]=>
string(3) "GET"
["url"]=>
string(28) "coding/376803/comment/465387"
["hostname"]=>
string(8) "eond.com"
["domain"]=>
NULL
["protocol"]=>
string(5) "https"
["callback_function"]=>
string(0) ""
["_route_status":protected]=>
int(200)
["_route_options":protected]=>
object(stdClass)#11 (5) {
["cache_control"]=>
bool(true)
["check_csrf"]=>
bool(true)
["is_forwarded"]=>
bool(false)
["is_indexable"]=>
bool(true)
["enable_session"]=>
bool(true)
}
["module"]=>
string(5) "board"
["mid"]=>
string(6) "coding"
["act"]=>
string(16) "dispBoardContent"
["args"]=>
array(4) {
["document_srl"]=>
string(6) "376803"
["comment_srl"]=>
string(6) "465387"
["mid"]=>
string(6) "coding"
["act"]=>
string(16) "dispBoardContent"
}
}
["ajaxRequestMethod"]=>
array(2) {
[0]=>
string(6) "XMLRPC"
[1]=>
string(4) "JSON"
}
["gzhandler_enable"]=>
bool(true)
}
※ Collapse ( 컬랩스 )
☞ 제목 클릭하면 해당 내용이 펼쳐지고, 다른내용은 접히는 특수한 효과를 의미한다. ( 아코디언 효과라고도 한다 )
☞ 주로 FAQ 혹은 도움말 부분에 적용하면 효과적.
☞ 토글 행위를 위한 몇개의 클래스를 이용하는 플러그인이다. ( 사용하기 위해서는 전환 플러그인이 필요 )
※ 전환 플러그인은 transition.js로서, bootstrap.js에 포함되어있다.
※ CSS 전환 에뮬레이터만큼 좋은 transitionEnd 이벤트를 위한 기본 헬퍼이다.
☞ 사용 예시를 통해 확인해보자. < 버튼 클릭을 통해 글 보이기 >
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false"
aria-controls="collapseExample">
Link with href
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
▶ collapse 클래스 선택자 : 콘텐츠를 숨긴다.
▶ collapsing 클래스 선택자 : 전환중에 적용된다.
▶ collapse in 클래스 선택자 : 콘텐츠를 보여준다.
▶ collapsed 클래스 선택자 : 콘텐츠가 닫힌다.
▶ data-toggle : "collapse"로 설정한다 ( a 태그 )
▶ aria-expanded : 웹 접근성 측면에서 열린 부분은 true, 닫힌부분은 false
▶ aria-controls 속성값은 본문이 보여지게될 부분의 id와 일치해야 한다.
▶ href : 본문이 보여지게될 부분의 id를 입력한다 ( a 태그 )
▶ 본문이 보여지게 될 부분의 class는 collapse가 되어야 한다.
☞ 사용 예시를 통해 확인해보자. < 아코디언(Accordion) 만들어보자 >
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
첫번째 본문
</div>
</div>
</div>
...
</div>
▶ aria-expanded : 스크린리더와 비슷한 보조공학에 명확하게 컬랩스 할수 있는 요소의 현재 상태를 정의 ( 닫혀있다면 기본적으로 false 값을 가지게 된다 ( in 클래스 선택자를 사용하여 기본적으로 열리게끔 한다면 true로 설정. )
▶ data-target 속성이 id 셀렉터를 가리키고 있다면 추가적으로 aria-controls 속성을 추가할수 있는데, 이는 스크린 리더와 비슷한 보조 공학은 컬랩스요소를 직접 탐색할 수 있도록 해준다.
▶ panel-heading 부분에 collapse를 감싸면 된다.
▶ data-toggle="collapse"와 data-parent를 panel-group으로 묶고있는 부모의 ID를 넣어주면 된다.
▶ href는 panel-body를 감싸는 요소의 ID를 넣어주면 된다.
▶ 추가적으로 panel-body를 감싸는 요소는 panel-collapse collapse 클래스 선택자를 설정해야 한다. ( 활성화를 원하면 in도 설정해야 한다 )
▶ 글자가 아닌 전체적 영역을 클릭했을 때, 이동하도록 만들고 싶다면 css를 추가해주면 된다.
.panel-heading { padding : 0; }
.panel-heading a { padding : 10px 15px; display : block; text-decoration : none ; }
※ Collapse ( 컬랩스 ) 옵션
☞ data옵션은 data- 와 같이 사용된다.
▶ parent : 기본값은 false로, 셀렉터가 제공된다면, 접을 수 있는 요소가 보여질 때 특정 부모 아래 모든 접을수 있는 요소는 닫게 된다.
(일반적으로 panel에 의존한다.)
▶ toggle : 기본값은 true로, 접을 수 있는 요소를 토글한다.
※ Collapse ( 컬랩스 ) 메소드
☞ .collapse(options)
▶ 콘텐츠를 접을 수 있는 요소를 활성화. 추가적 옵션은 객체를 사용할 수 있다.
▶ 아래 코드와 같이 사용된다.
$('#myCollapsible').collapse({
toggle: false
})
☞ .collapse('show')
▶ 접을 수 있는 요소를 보여준다.
☞ .collapse('hide')
▶ 접을 수 있는 요소를 가린다.
※ Collapse ( 컬랩스 ) 이벤트
☞ show.bs.collapse
▶ show 인스턴스 메소드가 호출되는 즉시 실행
☞ shown.bs.collapse
▶ 컬랩스가 사용자에게 보여진 후 실행 ( CSS전환이 완료되기를 기다림 )
☞ hide.bs.collapse
▶ hide 인스턴스 메소드가 호출되는 즉시 실행
☞ hidden.bs.collapse
▶ 컬랩스가 사용자로부터 가려진 후 실행 ( CSS전환이 완료되기를 기다림 )
$('#collapsesample').on('show.bs.collapse', function (e) {
console.dir(e);
})
댓글 0
댓글작성칸으로