테스트 사이트 - 개발 중인 베타 버전입니다

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 포인트
p
9년 전

정확한 질문 내용은 잘 모르겠는데요....

 

window load 는

$(window).load(function(){    제이쿼리 내용 });

으로 사용하시면 됩니다.

현재 소스는

(function($){  제이쿼리 내용 });

인데 이것은 $(document).ready(function(){    제이쿼리 내용 });

와 같은 방식이고 축약형입니다.

jQuery ready와 load의 차이는

http://ojtiger.com/179">http://ojtiger.com/179

여기 참고해 보세요.

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인