조회 수 364 추천 수 12 댓글 13
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기 첨부
?

단축키

Prev이전 문서

Next다음 문서

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

기존에 레이아웃에서 로드해서 사용하던 툴팁 생성용 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만 변경되어 출력합니다.

 

 

  • ?
    칼럼 2017.10.27 01:40:39
    감사합니다!
  • ?
    moonsooter 2017.10.27 05:59:59
    필요한 기능입니다. 감사합니다.
  • profile
    달콤한인생 2017.10.27 08:28:02
    감사합니다!
  • ?
    차도남 2017.10.27 13:40:56
    긴 문장이 불필요할때 활용하기 좋은 애드온이네요~
    멋진 애드온 배포해주셔서 감사합니다~~
  • profile
    간장게장 2017.11.02 15:45:45 Files첨부 (1)

    정말 유용한 애드온 감사합니다. ^^;;

    요렇게 사용하고 있습니다.

     

    tooltip.jpg

     

    추천이라는 기능을 방문하는 분들은 자치 오해하시는 것 같더라고요.

    글 본문 내용이 맘에 들지 않거나 나쁘다고 생각하면 비추천을 선택하는 경향이..

     

    제가 의도한 것은 기사(글) 자체가 도움이 되었는지 아니면 아무 쓸데없는 글인지를 

    평가받고 싶은 것이라...

     

    어쨌거나 툴팁이 아주 유용하게 사용되고 있습니다. ^^

  • ?
    필또 2017.11.03 18:24:19
    대박!!! 정말 감사합니다.
  • profile
    팔공산 2017.11.04 23:19:57

    멋진 자료 감사합니다.
    라이믹스에서는 잘 작동하는데요.

    아래 환경에서는 홈피가 죽네요. xe탓인지 php버전 탓인지 모르겠네요.
    xe_version : 1.8.46
    php : 5.3.3

     

    xe_version : 1.8.46

    php : 7.0.1 에서 작동이 정상적으로 되는 것을 보면 xe탓은 아니고 php 버전 탓 아니면 다른 애드온과의 충돌인 듯 합니다. 

  • profile
    prologos 2017.11.04 23:31:46
    라이믹스 환경도 php 5.3.3인가요?
  • profile
    팔공산 2017.11.04 23:36:46
    라이믹스는 php : 7.0.1 입니다.
    위에 글도 약간 수정했습니다.
  • profile
    prologos 2017.11.05 04:12:15
    애드온 설정중 관리할 말풍선 목록에 내용이 있을때나 없을때나 동일한 문제가 일어나는지 확인해 보시구요.

    pr_tooltip.addon.php파일의 15라인 근처: $ttLists[$item[0]] = (object)['color' => $item[1], 'position' => $item[2], 'title' => $item[3]];의 내용을 아래처럼 수정 해 보세요.

    $ttLists[$item[0]] = new stdClass();
    $ttLists[$item[0]]->color = $item[1];
    $ttLists[$item[0]]->position = $item[2];
    $ttLists[$item[0]]->title = $item[3];

    그래도 문제가 발생한다면 php 버전을 올려보시거나 1번의 방법으로만 사용하셔야 할꺼 같습니다.
  • profile
    팔공산 2017.11.06 18:36:43 Files첨부 (1)

    답글 감사합니다.^.^

    일단 처음 코드로 애드온 실행하면 어떤 경우 문제가 발생하는게 아니라 아예 전체 홈피가 백지가 되어 버립니다.

    알려 주신 코드 삽입하니 정상적으로 잘 작동됩니다.

     

    참고로 css3pie_js 애드온 과 같이 실행하니 아래 이미지와 같이 색상과 위치가 적용이 안됩니다.

    https://www.xpressengine.com/index.php?mid=download&package_id=20951206

    img_003.jpg

  • profile
    영흥도우럭 2017.11.07 17:48:05
    오늘에야 적용을 했는데...완전 이쁘네요 ^______^
  • profile
    팔공산 2017.11.07 19:26:38 Files첨부 (1)

    제가 활용하는 말풍선(툴팁)애드온과 위젯의 콜라보네이션입니다.

    좋은 애드온 감사합니다.

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

    img001.jpg


서버에 요청 중입니다. 잠시만 기다려 주십시오...