You cannot see this page without javascript.

자료실 상세소개
Xe자료실에 있는 자료들은 이곳 저곳에서 제가 필요하다고 생각되는 것들을 모아 놓은 게시판입니다.
저작권 관계로 자료들을 올리진 않습니다. 원래 사이트의 자료가 없어진 경우는 꼭 필요한 경우는 저에게 쪽지로 주시면 제가 가지고 있는 한도내에서는 보내 드리겠습니다.
저작권침해가 되지 않는 경우에 한 합니다.
애드온
2017.11.04 22:37

말풍선(툴팁) 애드온

조회 수 211 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form
제작자 prologos
출처 https://www.xetown.com/rxe_file/777583
적용여부 적용

기존에 레이아웃에서 로드해서 사용하던 툴팁 생성용 css와 jquery를 따로 떼어내서 애드온을 만들어 봤습니다.

만들고보니 쓸모가 있을까... 하는 생각이 들기도 합니다. ㅎㅎㅎ

jquery나 애드온의 정규식이 허접해서 모든 환경에 잘 적용될 수 있을지도 의문이네요 @.@

 

 

말풍선 애드온 0.1

pr_tooltip_v0.1.zip

 

 

애드온을 적용 한다음 말풍선이 필요한곳에 pr_tooltip 클래스를 추가해 주시면 해당 태그에 마우스를 가져가면 말풍선을 띄워주는 애드온 입니다.

추가로 지정 가능한 속성은 아래와 같습니다.

pr_uid : 애드온에서 관리하기위해 부여하는 번호입니다. 영문, 숫자, 하이픈, 언더바로만 구성할 수 있습니다.

pr_color : 말풍선의 색을 지정합니다.

pr_position : 말풍선의 위치를 지정합니다.

title : 말풍선에 띄울 글을 지정합니다.

 

사용 가능한 색상 코드는 아래와 같습니다. 색상은 bootstrap에서 따왔습니다.

태그에 pr_color="primary" 이런식으로 사용하시면 됩니다.

pr_color.png

 

사용가능한 말풍선 위치 지정 코드는 아래와 같습니다.

말풍선을 우상단에 띄우고 싶다면 pr_position="t_right" 로 적어 주시면 됩니다.

pr_position.png

 

 

이 애드온의 사용법은 크게 두가지로 나눌 수 있습니다.

1. 직접 코딩

 

아래처럼 말풍선이 필요한곳의 class에 pr_tooltip을 추가하고 title, pr_color, pr_position을 지정 합니다.

마우스를 가져가면 Point History라고 적힌 노란 말풍선이 상단 중앙에 뜨게 됩니다.

ex1.png

 

2. 애드온에서 관리

 

아래처럼 말풍선이 필요한곳의 class에 pr_tooltip을 추가하고 pr_uid만 지정을 합니다.

이상태에서는 마우스를 가져가도 말풍선은이 뜨지안습니다.

ex2.png

 

애드온 설정화면에서 위에 지정한 pr_uid번호인 info-001의 옵션값들을 지정 후 저장합니다.

이후부터는 해당 태그에 마우스를 가져가면 말풍선이 뜨게 됩니다.

admin.png

 

우선순위

태그에 모든 속성을 지정하고 pr_uid까지 지정했어도 해당 uid에대한 설정값이 애드온에 있다면 애드온에 설정한값이 우선합니다.

아래처럼 pr_uid가 001로 지정하고 모든 속성을 코딩했어도 애드온 설정에 001의 설정값이 있다면 기존 코딩은 무시되고 애드온 설정값으로 변경되어 출력됩니다.

ex3.png

 

위의 애드온 설정창의 uid: 002의 경우처럼 title만 지정된 경우는 다른 값은 코딩값대로 유지되며 title만 변경되어 출력합니다.

 

[문하우스의 적용팁]

http://moonhouse.co.kr/xe/423318

어떠셨나요? 0.00 (0명)
0
0
0
0
0
Extra Form
TAG •
?

XE Data

Xe자료실에 있는 자료들은 이곳 저곳에서 제가 필요하다고 생각되는 것들을 모아 놓은 게시판입니다.

  1. 템플릿 컴포넌트

    - '템플릿 컴포넌트'입니다. - 미리 완성된 서식(템플릿)을 이용해 문서를 편집할 수 있게 해주는 에디터 컴포넌트입니다. 기본 기능 - 원래는 회원 발송용 뉴스레터 템플릿을 제공하기 위해 만들었던 컴포넌트입니다. GG님의 관리자 메일 모듈과 같이 쓰면 좋...
    Date2018.07.05 Category기타 Reply0 Views61 file
    Read More
  2. 가입권유 애드온 v2.3

    가입권유 애드온 1. 애드온이 html 상단에 출력되서 발생하던 css 문제를 수정했습니다. 2. 회원가입창등에서 뜨지 않도록 수정했습니다. 3. 로그인 이후에도 뜨는 문제 수정 4. 무료로 전환 (그동안 포인트 먹튀해서 죄송합니다 -_ㅜ ) 본업이 인터넷 관련직...
    Date2018.02.14 Category애드온 Reply6 Views249 file
    Read More
  3. 날씨 위젯

    현재 위치(지오로케이션)기반 날씨 위젯을 만들기로하고 일주일이 지났네요 @.@ 너무 오래 붙잡고 있으면 안될꺼 같아서 주말에 시간내서 마무리 지었습니다. 우선 배포하고 문제가 발견되면 추후 수정하는게 좋다는 생각입니다... ㅎㅎ 개인적으로 사용하던 ...
    Date2018.02.07 Category위젯 Reply0 Views224 file
    Read More
  4. zip 다운로드 애드온

    게시글의 전체 첨부파일을 zip 파일로 통합해서 원클릭으로 다운로드하는 기능을 추가하는 애드온입니다. 이미지 파일들을 많이 올리는 사이트의 경우는 일일이 파일 저장하지 않아도 편리하게 파일들 내려 받을 수 있어서 좋은 것 같습니다.
    Date2018.01.02 Category애드온 Reply0 Views107 file
    Read More
  5. 말풍선(툴팁) 애드온

    기존에 레이아웃에서 로드해서 사용하던 툴팁 생성용 css와 jquery를 따로 떼어내서 애드온을 만들어 봤습니다. 만들고보니 쓸모가 있을까... 하는 생각이 들기도 합니다. ㅎㅎㅎ jquery나 애드온의 정규식이 허접해서 모든 환경에 잘 적용될 수 있을지도 의문...
    Date2017.11.04 Category애드온 Reply0 Views211 file
    Read More
  6. 쪽 나누기 애드온

    업데이트 1.2.6 - php 5.3.x 이하 버전과 호환성 해결 1.2.5 - default 스킨에서 애드온 출력 요소들의 margin과 padding 값을 기본 0으로 할당 (웹지기님 제안) 1.2.4 - ajax 적용 후 스크롤탑 이동시 특정 요소로 위치 지정 가능 (Artistudy님 제안) 1.2.4에...
    Date2017.10.01 Category애드온 Reply0 Views132 file
    Read More
  7. 각주 에디터 컴포넌트 + 각주 편집 애드온

    문하우스 Tip 1) 0.3 업데이트 (2017-09-19) 개요 각주 스타일링 작업을 완료(?)했습니다. 몇몇 부분에서 호환성 테스트는 아직 끝나지 않았습니다. 가령 다음과 같은 문제가 있을 수 있습니다. : XE에서 관리자 외에는 각주 입력을 못할 수 있습니다. : 크롬 ...
    Date2017.09.20 Category애드온 Reply1 Views131 file
    Read More
  8. 플로팅 팝업 비디오

    네이버TV같은 곳에서 동영상 보다보면 스크롤을 내릴경우 우측하단에 동영상이 뜨길래 구현해보았습니다. 스크롤 내리시면 팝업이 뜹니다. 플로팅 팝업 비디오 애드온 버그가 있으면 버그발생하는 주소를 알려주세요! 애드온화 하긴했는데 버그가 있을수도 있...
    Date2017.05.23 Category애드온 Reply0 Views157 file
    Read More
목록
Board Pagination Prev 1 2 3 4 5 ... 20 Next
/ 20
서버에 요청 중입니다. 잠시만 기다려 주십시오...