Preview
๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋ ๋ฏธ๋ฆฌ ํน์ ์ ๋ณด๋ฅผ ์ป์ ์ ์์ต๋๋ค.
With template
data-preview์์ฑ์ ํน์ ์ ๋ณด๋ฅผ ์์ ํฉ๋๋ค.
<script>
popman.setup({modeTest:true, modeAnimation:true, alertExp:'50%', confirmExp:'80%'}).detect();
</script>
<body>
<button data-preview="Hello ๐โโ๏ธ๐โโ๏ธ์ด์ด~ ์๋
~?" onclick="popman.alert('Hello there?');">Hello</button>
<button data-preview="๐ช๋ถ๋๋ถ๋" onclick="popman.alert('You already get power!');">Get power</button>
<button data-preview="๐๋จธ๋๋จธ๋" onclick="popman.confirm('Did you get some money?');">Get money</button>
</body>
Custom Preview
- ๋ค์์ ํ์ฉํ์ฌ ์ํฉ์ ๋ง๋ Preview๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
popman.startPreveiw(EVENT, POSITION_X, POSITION_Y, HTML, CLASS)popman.movePreveiw(EVENT, POSITION_X, POSITION_Y, HTML)popman.stopPreveiw()
<style>
.sj-popman-obj-previewer { border:1px solid lightslategray; border-radius:8px; }
.preview { background:slategray; color:white; font-size:20px; }
</style>
<script>
popman.setup({modeTest:true, modeAnimation:true, alertExp:'50%', confirmExp:'80%'}).detect();
var lastTargetId = null;
window.addEventListener('mousemove', function(event){
var target = event.target;
var statusOn = (target && target.tagName.toUpperCase() == 'BUTTON');
var statusSame = (statusOn && target.id == lastTargetId);
lastTargetId = (statusOn) ? target.id : null;
if (statusOn){ //MouseOver
(statusSame) ? popman.movePreviewer(event, 30, 35) : popman.startPreviewer(event, 30, 35, ('[Preview Test] ' + lastTargetId), 'preview');
}else{ //MouseOut
popman.stopPreviewer();
}
});
</script>
<body>
<button id="preview-test-1" onclick="popman.alert('Hello there?');">Hello</button>
<button id="preview-test-2" onclick="popman.alert('You already get power!');">Get power</button>
<button id="preview-test-3" onclick="popman.confirm('Did you get some money?');">Get money</button>
</body>