JQuery 플러그인안에서 Window Load 사용하는 법 채택완료
parcon
9년 전
조회 3,817
플러그인 공부중인데
window load에서만 제대로 작동합니다.
플러그인 내에서 window load 작성요령을 알고 싶습니다.
resize도 알려주시면 감사합니다.
</p><p>(function($){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$.fn.parcon = function(option,callback){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if($.isFunction(option)){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>callback = option;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>option = null;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}<span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$.fn.parcon.setting = {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>column: 4,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>margin: 10,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>padding: 15,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background: "transparent"</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>};</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>option = $.extend($.fn.parcon.setting,option);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>return this.each(function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var i = 0;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).find("li").each(function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var obJecty = $(this);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var winW = $(window).width();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var thisIdx = $(this).index();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var thisPrevL = parseInt($(this).prev().css("left"));</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var thisPrevT = parseInt($(this).prev().css("top"));</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var prevW = $(this).prev().outerWidth(true);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var thisMrg = option.margin;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var thisPdd = option.padding;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var lineLen = option.column;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var backColor = option.background;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).css({</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>"padding" : thisPdd,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>"box-sizing": "border-box",</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>"background-color": backColor,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>"position": "absolute",</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>"top": 0,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>"left": 0</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if (thisIdx < lineLen){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>i++;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if(thisIdx != 0){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).css({"width": prevW, "left": (thisPrevL + prevW) + thisMrg, "top": thisMrg});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>} else {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).css({"width": (winW - (thisMrg*(lineLen+1)))/lineLen, "left": thisMrg, "top": thisMrg});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>} else if(thisIdx >= lineLen ){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var topLi = $(this).parent().find("li").eq(thisIdx - lineLen);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var topLiH = topLi.outerHeight(true);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var topOff = topLi.offset();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var topOffT = topOff.top;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if(i%lineLen != 0){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>i++;<span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).css({"width": prevW, "left": (thisPrevL + prevW) + thisMrg, "top": (topOffT + topLiH) + thisMrg});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>} else {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>i++;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).css({"width": prevW, "left": thisMrg, "top": (topOffT + topLiH) + thisMrg});<span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p>})(jQuery);</p><p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
9년 전
정확한 질문 내용은 잘 모르겠는데요....
window load 는
$(window).load(function(){ 제이쿼리 내용 });
으로 사용하시면 됩니다.
현재 소스는
(function($){ 제이쿼리 내용 });
인데 이것은 $(document).ready(function(){ 제이쿼리 내용 });
와 같은 방식이고 축약형입니다.
jQuery ready와 load의 차이는
http://ojtiger.com/179">http://ojtiger.com/179
여기 참고해 보세요.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인