Comments (9)
title, content 관련 현재 아래와 같이 작업되었습니다.
title
이 것은 그 동안 작업을 통해서 data-role="title" 로 확정된 것으로 알고 이 값으로 작업했습니다.
content
늘곁애 작업을 하면서...data-content="" 값 하나만 가지고서는 아무것도 할 수 없음을 체험했습니다.
data- 속성으로 넘겨야할 불특정 내용들이 매우 많이 필요하다는 것을 알았습니다.
또한, 하나의 엘리먼트(이벤트 핸들러)에 data- 값이 중복사용되면 안되는 이슈도 있습니다.
그래서...data-title 을 제외한 data 속성 값을 아래와 같이 구분 및 사용하도록 했습니다.
-
이벤트 핸들러 data- 마크업 형식
아래와 같이 dataType 과 dataName 을 ':' 로 구분을 해서 넘깁니다.
data-dataType:dataName="dataValue"여기서 dataType 은 아래의 4 가지로 구분되며 해당 컴포넌트의 해당 엘리먼트에
적용하는 방법은 아래와 같습니다.
$target(엘리먼트) = $ (component).find('[data-'+dataName+'-role="'+dataName+'"]')- bg : $(target).css('background-image','url('+dataValue+')')
- img : $(target).attr('src',dataValue)
- inputVal : $(target).val(dataValue)
- text : $(target).text(dataValue)
- html : $(target).html(dataValue)
-
해당 엘리먼트(target) 마크업 형식
data-dataName-role="dataName"
data- 마크업 예제
- 배경 이미지 적용하는 경우
<a data-toggle="modal" data-target="#myModal" data-bg:coverImg="cover.jpg">모달 오픈</a>
<!-- modal 시작 -->
<div id="myModal" class="modal">
<header class="bar bar-nav">
<a class="icon icon-close pull-right" data-history="back"></a>
<h1 class="title" data-role="title">Modal</h1>
</header>
<div class="content">
<p class="content-padded" data-coverImg-role="coverImg">배경이미지 적용</p>
</div>
</div>
이상입니다.
from rc.
어떤 내용인지 이해했습니다. 그렇다면, 스크립트방식의 적용은 어떻게 되나요 ?
가장 많이 사용되는 data-type이 text 형 이라고 판단되는데요. 기본값 개념을 적용하여 복잡도를 줄이고 BS와의 일관성을 유지하면 어떨까 합니다.
예를 들어 아래의 2가지 경우는 같게 처리하는 것 입니다.
data-text:content=“컨텐츠”
과 data-content=“컨텐츠”
가능할까요 ?
from rc.
data-role="title"
을 문서의 데모에 적용해 놓았습니다.
https://jsfiddle.net/gitaek/Lvg7ukdr/
https://jsfiddle.net/gitaek/t2hmcdmc/
from rc.
- 스크립트 방식 예제는 아래에서 확인할 수 있습니다.
http://www.withconsumer.net/rc-test/modal/1-4-4-script.html
위 예제 소스를 통해서 아래의 2 가지 사항을 발견했습니다.
- text 타입인 경우 기본값 적용 관련
-
기능을 만드는 것은 문제가 안되나 그 과정이 오히려 로직을 복잡하게 만들 수 있을 것 같습니다.
-
또한, 스크립트 방식인 경우를 보면 url, title 같은 값과 text:aaa, html:bbb 같은 값들이 형태가
다르게 나타납니다. 오히려 이렇게 구분을 하는 것이 좋지 않나 생각합니다. -
즉, data- 속성으로 넘어오는 값들을 아래와 같이 크게 2 가지로 구분해야 할 것 같습니다.
가. 모달 기능에 영향을 미치는 값
나. 모달 마크업 및 내용에 영향을 미치는 값 ( type : name 형식)요컨대, 해당 컴포넌트 기능에 영향을 미치는 값(show,backdrop,trigger,title,url 등)은
':' 없이 사용하고 해당 컴포넌트 마크업에 적용(내용 추가/변경 및 html 추가/변경)하는 값들은
':' 를 사용해서 그 값의 타입을 명확히 표현을 해주는 것입니다. (기본값 없이)
- 'title' or title 이슈 추가의견
'html:snsBtn' : 추가버튼 과 같이....
':' 이 포함된 경우에는 해당 키값에 반드시 홑따옴표('')를 붙여줘야 합니다.
결국, 일관성을 유지하기 위해서 일괄적으로 'title' 과 같은 방법으로 하는 것이 맞을 것 같습니다.
이상입니다.
from rc.
좀더, 다양한 상황을 통해 검증해봐야 할 것 같습니다.
해당 마크업 형식을 아래와 같이 조정하면 어떨까 합니다. dataName
를 2번 기술해야 하는 것은 비효율적으로 보입니다. 타이틀의 경우, data-role="title"
인데요. 일관성있는 기술이 필요해 보입니다.
data-dataName-role="dataName"
--> data-role="dataName"
from rc.
이렇게 한 이유는 중복 이슈 때문입니다.
늘곁애 하면서 발생했던 문제이구요...
예를 들어서...어떤 엘리먼트에 2 개 이상의 data-role="" 을 부여해야 할 상황이 발생했을때..
data-role="coverimg" data-role="content" ...이런 경우...
data-role="coverimg" 하나만 인식됩니다.
요컨대, 하나의 엘리먼트에 여러개의 data-role 값을 사용하기 위한 것입니다.
from rc.
원칙적으로 단일 엘리먼트에 복수의 data-role는 적용하지 않는것으로 하겠습니다.
from rc.
복수의 data-role 을 적용하지 않는다는 표현은....조금 부적절한 것 같습니다.
- 적용하던 안하던 data-role 은 앞에 것 하나만 인식됩니다.
- 즉, rc 차원에서 가이드하거나 권고할 사항이 아니라...rc 가 아닌 상황에서도 그렇게 사용하면
안되는 이슈입니다.
from rc.
확인했습니다.
Open Business Platform ::킴스큐 kimsQ ::
(주)레드블럭 권기택
- [email protected] Office : 1544-1507
- www.kimsq.com
2016년 5월 11일 오후 5:28, kiere [email protected]님이 작성:
복수의 data-role 을 적용하지 않는다는 표현은....조금 부적절한 것 같습니다.
- 적용하던 안하던 data-role 은 앞에 것 하나만 인식됩니다.
- 즉, rc 차원에서 가이드하거나 권고할 사항이 아니라...rc 가 아닌 상황에서도 그렇게 사용하면
안되는 이슈입니다.—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#2 (comment)
from rc.
Related Issues (20)
- backdrop 지속시간 관련
- photoswipe 익스텐션 구조화 요청 HOT 5
- js 소스코드 저장소 관련
- push control 작동시 photoswipe 컨테이너 생성되는 오류 HOT 1
- loader > overlay 안됐던 이슈 관련
- 컴포넌트 닫기 data-dismiss="컴포넌트명" 관련 이슈 2 가지
- swiper 도규먼트에 대한 저의 의견
- 미처리 작업 정리 -- 금주 주말내 완료 목표 HOT 7
- 단위 js 파일 위치 변경
- toggle.js 제외 및 추가 요청 HOT 5
- 브랜드 변경 ( Ratchet plus --> kimsQ RC ) HOT 2
- Accordion(collapse) 적용 컴포넌트 추가 요청 HOT 2
- 모달 content 에 infinite-scroll 적용시 이슈
- Static Backdrop with Animation 관련 HOT 7
- material-design-style drawer 옵션화 요청 HOT 1
- [공지] modal,popup 닫기 데이타속성명 변경 HOT 1
- 검색시 autocomplete 기능구현을 위한 Bootstrap-3-Typeahead 커스텀 요청 HOT 1
- [개선] modal 에서 popup,sheet 호출할 경우에 대응한 component z-index 수정
- modal에서 popup을 호출할 경우, data-dismiss 문제
- page 컴포넌트 direction 옵션의 필요성에 대하여
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rc.