사용자:Hsl0/연구소/4: 두 판 사이의 차이

2021년 7월 28일 (수) 01:31 기준 최신판

/**
 * @requires oojs-ui-widgets
 * @requires ext.gadget.Tasker
**/
registerRenderer(function createPopupButton() {
	$('.popuplink').each(function() {
		var $header = $(this).find('.popuplink-header');
		var widget = new OO.ui.PopupButtonWidget({
			label: $(this).find('.popuplink-label'),
			framed: false,
			popup: {
				head: $header.length || !('autoclose' in this.dataset),
				padded: true,
				autoClose: 'autoclose' in this.dataset,
				label: $header,
				$content: $(this).find('.popuplink-content')
			}
		});
		$(this).html(widget.$element);
	});
});

{{{라벨}}}

{{{내용}}}

누르면 팝업 메시지가 튀어나오는 링크를 생성합니다.

사용법[편집 | 원본 편집]

권장 사용법

{{팝업
|라벨=(문자열)
|제목=(문자열)
|내용=(문자열)
|자동닫기=(부울)
}}

축약 사용법

{{팝업|(라벨)|(내용)}}

라벨: 링크로 표시될 텍스트
제목: 팝업의 머리글에 표시될 제목
내용: 팝업에 표시될 내용
자동닫기: 팝업 바깥쪽을 누를 때 닫힘 여부 (부울)

예시[편집 | 원본 편집]

* {{팝업|눌러보세요|이렇게 팝업이 뜹니다. 닫으려면 윗쪽의 X버튼이나 링크를 다시 눌러주세요.}}
* {{팝업
  |라벨=이것도 눌러보세요
  |제목=팝업이다
  |내용=이렇게 제목을 설정할 수 있습니다. 팝업 밖을 눌러서 닫아보세요.
  |자동닫기=true
  }}
* {{팝업
  |라벨=눌러봐
  |내용=자동닫기가 켜져 있고 제목이 없으면 머리글이 숨겨져 더 단순해집니다.
  |자동닫기=1
  }}

@@ 1번째 줄: / 1번째 줄: @@
-{{#css:
+{{#css:사용자:Hsl0/연구소/2.css}}
-.popuplink .popuplink-content {
+{{pluginX|../3.js}}
-    display: none;
+<onlyinclude><span class="popuplink"><span class="popuplink-label" {{boolean|{{{자동닫기|false}}}|data-autoclose}}>{{{라벨|{{{1|{{{라벨}}}}}}}}}</span><div class="popuplink-content">{{{내용|{{{2|{{{내용}}}}}}}}}</div>{{#ifeq:{{{제목|#null}}}|{{{제목|#nil}}}|<span class="popuplink-header">{{{제목}}}</span>}}</span></onlyinclude>
-}
-.popuplink-content {
+누르면 팝업 메시지가 튀어나오는 링크를 생성합니다.
-    padding: 4px;
-}
+== 사용법 ==
-.popuplink > .oo-ui-buttonElement-frameless {
+; 권장 사용법
-    margin-left: 0 !important;
+<pre>
-}
+{{팝업
-.popuplink > .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
+|라벨=(문자열)
-    min-height: 0;
+|제목=(문자열)
-    padding: 0;
+|내용=(문자열)
-    color: #0645AD;
+|자동닫기=(부울)
-    font-weight: normal;
-}
 }}
+</pre>
+; 축약 사용법
+<pre>{{팝업|(라벨)|(내용)}}</pre>
-* <span class="popuplink"><span class="popuplink-label">테스트</span><span class="popuplink-content">Hello, World!</span></span>
+* 라벨: 링크로 표시될 텍스트
-* <span class="popuplink"><span class="popuplink-label">테스트</span><span class="popuplink-content">Hello, World!</span></span>
+* 제목: 팝업의 머리글에 표시될 제목
+* 내용: 팝업에 표시될 내용
+* 자동닫기: 팝업 바깥쪽을 누를 때 닫힘 여부 ([[틀:boolean|부울]])
-* 테스트
+== 예시 ==
-* 테스트
+<pre>
+* {{팝업|눌러보세요|이렇게 팝업이 뜹니다. 닫으려면 윗쪽의 X버튼이나 링크를 다시 눌러주세요.}}
+* {{팝업
+  |라벨=이것도 눌러보세요
+  |제목=팝업이다
+  |내용=이렇게 제목을 설정할 수 있습니다. 팝업 밖을 눌러서 닫아보세요.
+  |자동닫기=true
+  }}
+* {{팝업
+  |라벨=눌러봐
+  |내용=자동닫기가 켜져 있고 제목이 없으면 머리글이 숨겨져 더 단순해집니다.
+  |자동닫기=1
+  }}
+</pre>
+* {{팝업|눌러보세요|이렇게 팝업이 뜹니다. 닫으려면 윗쪽의 X버튼이나 링크를 다시 눌러주세요.}}
+* {{팝업
+  |라벨=이것도 눌러보세요
+  |제목=팝업이다
+  |내용=이렇게 제목을 설정할 수 있습니다. 팝업 밖을 눌러서 닫아보세요.
+  |자동닫기=true
+  }}
+* {{팝업
+  |라벨=눌러봐
+  |내용=자동닫기가 켜져 있고 제목이 없으면 머리글이 숨겨져 더 단순해집니다.
+  |자동닫기=1
+  }}