Condition
쑰건μ λ°λΌ μ΅μ
μ λ€λ₯΄κ² μ€μ ν μ μμ΅λλ€.
β» μλμ μ©
νΈμλ₯Ό μν΄μ μμ μμλ λ€μ μ½λκ° μλ΅λμ΄ μμ΅λλ€.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sj-js/boxman/dist/css/boxman.min.css">
<script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@sj-js/boxman/dist/js/boxman.min.js"></script>
<script>
var boxman = new BoxMan().setTheme('test-1');
</script>
addConditionWithBox(fromBox, toBox, options)
νΉμ BOXμ νΉμ BOXκ°μ 쑰건μ μ€μ ν μ μμ΅λλ€.
<script>
boxman.detect(function(boxman){
boxman.addConditionWithBox('item-bag', ['item-opt-*', 'item-bag'], {appendType:BoxMan.APPEND_TYPE_LAST});
boxman.addConditionWithBox('item-opt-*', '*', {appendType:BoxMan.APPEND_TYPE_SWAP});
boxman.addConditionWithBox('clone-machine', '*', {modeCopy:true});
boxman.addConditionWithBox('trash-bin', '*', {appendType:BoxMan.APPEND_TYPE_INVISIBLE});
boxman.addEventListener('trash-bin', 'beforeboxin', function(event){
if (confirm('Do you want to delete?')){
boxman.delObj(event.obj);
return true;
}else{
return false;
}
});
});
</script>
<style>
div[data-box] { width:50px; height:50px; display:inline-block; vertical-align:top; }
div[data-obj] { width:40px; height:40px; display:inline-block; vertical-align:top; }
</style>
<body>
<div id="item-opt-1" data-box data-limit="1"></div>
<div id="item-opt-2" data-box></div>
<div id="item-opt-3" data-box></div>
<div id="item-opt-4" data-box></div>
<div id="item-opt-5" data-box></div>
<div id="clone-machine" data-box data-limit="1" style="background:#99ffaa;"></div>
<div id="trash-bin" data-box style="background:#ff99aa;"></div>
<br/>
<div id="item-bag" data-box style="width:300px; min-height:100px;">
<div data-obj>A</div>
<div data-obj>B</div>
<div data-obj>C</div>
<div data-obj>D</div>
<div data-obj>E</div>
<div data-obj>F</div>
</div>
<button onclick="boxman.newObj({parent:'item-bag'})">NEW</button>
</body>
addConditionWithObj(fromBox, toBox, options)
νΉμ BOXμ νΉμ OBJμμ 쑰건μ μ€μ ν μ μμ΅λλ€.
<script>
boxman.detect(function(boxman){
boxman.addConditionWithObj('*ox*', 'item-b', {appendType:BoxMan.APPEND_TYPE_SWAP});
boxman.addConditionWithObj('b*', 'item-c', {modeCopy:true});
boxman.addConditionWithObj('bo*', 'item-d', {appendType:BoxMan.APPEND_TYPE_OVERWRITE});
});
</script>
<style>
div[data-box] { display:inline-block; vertical-align:top; min-height:150px; }
</style>
<body>
<div id="box-a" data-box data-limit="1"></div>
<div id="box-b" data-box data-limit="2"></div>
<div id="box-c" data-box>
<div id="item-a" data-obj>NORMAL</div>
<div id="item-b" data-obj>SWAPER</div>
<div id="item-c" data-obj>COPIER</div>
<div id="item-d" data-obj>OVERWRITER</div>
</div>
<button onclick="boxman.newObj({parent:'box-c'})">NEW</button>
</body>
setBoxMode(box, mode)
νΉμ BOXμκ²λ§ νΉμ μ€μ μ ν μ μμ΅λλ€.
<script>
boxman.detect(function(boxman){
boxman.setBoxMode('box-a', {modeCopy: true});
boxman.setBoxMode('box-b', {modeRemoveOutOfBox: true});
boxman.setBoxMode('box-c', {appendType: BoxMan.APPEND_TYPE_BETWEEN});
});
</script>
<body>
<div id="box-a" data-box></div>
<div id="box-b" data-box></div>
<div id="box-c" data-box>
<div id="item-a" data-obj>A</div>
<div id="item-b" data-obj>B</div>
<div id="item-c" data-obj>C</div>
<div id="item-d" data-obj>D</div>
</div>
<button onclick="boxman.newObj({parent:'box-c'})">NEW</button>
</body>