jQuery 리 턴 포 지 셔 닝 플러그 인 상세 설명
1.$.extend(); //이 방법 은$위 에 귀속 되 어 있 습 니 다.$를 통 해 직접 호출 가능
방법 명 //이 방법 은 Dom 대상 에 연결 되 어 있 는$(')를 통과 할 수 있 습 니 다.방법 명();호출
3.$.widget //jQuery UI 위 젯 공장 모드 로 만 듭 니 다.
2.플러그 인의 개발 과정
1.$.extend();
이 방법 은 사실 매우 간단 하 다.단지$위 에 정적 인 방법 을 추 가 했 을 뿐이다.주요 용 도 는 플러그 인 api 확장 입 니 다.
eg:
//$.extend(); ， ， 。
(function($,factory){
var obj = factory();
$.extend({
sayHelloWorld:obj.firstApply,
})
$.secondApply = obj.secondApply;
})(jQuery,function(){
var obj = {
firstApply(){
console.log('hello world');
},
secondApply(){
console.log(' $ ');
},
};
return obj;
});
$.sayHelloWorld();//hello world
$.secondApply(); // $
/* 2 $.extend(); jQuery ，
$ */a.플러그 인 구조
<div id="app">app</div>
//$.fn. (logText);
(function($,factory){
$.fn.logText = factory();
})(jQuery,function(){
var logText = function(){
console.log(this.text());
return this;
}
return logText;
});
$("#app").logText(); //app DOM 。 。 jQuery 。
var h = $("#app").logText().height(); // app
console.log(h); //18
// 。b.플러그 인의 강력 한 점 은 주도면밀 한 인 자 를 제공 하 는 것 입 니 다.그리고 사용자 가 매개 변 수 를 확장 하 는 데 편리 합 니 다.
<div id="app">app</div>
//$.fn. (myPuglin);
(function(global,$,factory){
var common = factory(); // 。
$.fn.myPuglin = function(opts){ //
var defaults = {}; // api
opts = $.extend(defaults,opts || {}); // api
/*
*
*
*
*/
console.log(opts.hello);
return this;
}
})(window,jQuery,function(){
var common = {
a(opt){
return opt;
},
};
return common;
});
$("#app").myPuglin({hello:'hello world'}); //hello world3.작업 에 자주 사용 되 는 목록 부터 자세 한 내용 까지.이 위 치 를 유지 해 야 할 플러그 인 을 되 돌려 줍 니 다.(위치 되 돌리 기)savePositon(); $.fn.savePosition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Title</title>
<style>
@media screen and (max-width: 319px) {
html {
font-size: 85.33333px; } }
@media screen and (min-width: 320px) and (max-width: 359px) {
html {
font-size: 85.33333px; } }
@media screen and (min-width: 360px) and (max-width: 374px) {
html {
font-size: 96px; } }
@media screen and (min-width: 375px) and (max-width: 383px) {
html {
font-size: 100px; } }
@media screen and (min-width: 384px) and (max-width: 399px) {
html {
font-size: 102.4px; } }
@media screen and (min-width: 400px) and (max-width: 413px) {
html {
font-size: 106.66667px; } }
@media screen and (min-width: 414px) {
html {
font-size: 110.4px; } }
/*CSS Reset*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
header,
hgroup,
nav,
section,
article,
aside,
footer,
figure,
figcaption,
menu,
button {
margin: 0;
padding: 0; }
li{
list-style: none;
}
#app{
width: 100%;
max-width: 640px;
}
li {
height: 1.2rem;
width: 100%;
border-bottom: 1px solid #cccccc;
text-align: center;
line-height: 1.2rem;
font-size: 20px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li data-page="1" data-url="http://baidu.com?id=1"> 1 li</li>
<li data-page="1" data-url="http://baidu.com?id=2"> 2 li</li>
<li data-page="1" data-url="http://baidu.com?id=3"> 3 li</li>
<li data-page="1" data-url="http://baidu.com?id=4"> 4 li</li>
<li data-page="1" data-url="http://baidu.com?id=5"> 5 li</li>
<li data-page="1" data-url="http://baidu.com?id=6"> 6 li</li>
<li data-page="1" data-url="http://baidu.com?id=7"> 7 li</li>
<li data-page="1" data-url="http://baidu.com?id=8"> 8 li</li>
<li data-page="1" data-url="http://baidu.com?id=9"> 9 li</li>
<li data-page="1" data-url="http://baidu.com?id=10"> 10 li</li>
<li data-page="1" data-url="http://baidu.com?id=11"> 11 li</li>
<li data-page="1" data-url="http://baidu.com?id=12"> 12 li</li>
<li data-page="1" data-url="http://baidu.com?id=13"> 13 li</li>
<li data-page="1" data-url="http://baidu.com?id=14"> 14 li</li>
<li data-page="1" data-url="http://baidu.com?id=15"> 15 li</li>
<li data-page="2" data-url="http://baidu.com?id=16"> 1 li</li>
<li data-page="2" data-url="http://baidu.com?id=17"> 2 li</li>
<li data-page="2" data-url="http://baidu.com?id=18"> 3 li</li>
<li data-page="2" data-url="http://baidu.com?id=19"> 4 li</li>
<li data-page="2" data-url="http://baidu.com?id=20"> 5 li</li>
<li data-page="2" data-url="http://baidu.com?id=21"> 6 li</li>
<li data-page="2" data-url="http://baidu.com?id=22"> 7 li</li>
<li data-page="2" data-url="http://baidu.com?id=23"> 8 li</li>
<li data-page="2" data-url="http://baidu.com?id=24"> 9 li</li>
<li data-page="2" data-url="http://baidu.com?id=25"> 10 li</li>
<li data-page="2" data-url="http://baidu.com?id=26"> 11 li</li>
<li data-page="2" data-url="http://baidu.com?id=27"> 12 li</li>
<li data-page="2" data-url="http://baidu.com?id=28"> 13 li</li>
<li data-page="2" data-url="http://baidu.com?id=29"> 14 li</li>
<li data-page="2" data-url="http://baidu.com?id=30"> 15 li</li>
</ul>
</div>
</body>
<script type="text/javascript">
/*
* 1. 。 。
* ， ， ， ， 。
* 2. ？
* 1： ， 。
* 。
* 2： ?
* 3. ？
* 。 scrollTop 。
* a. ， ， ， 2 。
* 。
* b. 。
*
* ：
*/
(function(global,$,factory){
var keepScrollTop = 0; //
var tool =factory();
$.fn.savePosition = function(options){
var dataPage,logo,objLogo,prevNum,containerHeight = 0,scrollTopDistance = 0,elIndex = 0,
prevHeight = 0,prevCountPage = 0,prevCountPageDistance = 0,prevDistance = 0,
prevPageScrollDistance = 0;
var elements = this;
var defaults = {
container:$(window), //
logo:"data-url", // LI 。
currentPage:"data-page", // li
pageResize:30, // 。 30,
goToDetailElement:$(".go-detail") , //
nodeLi:"", //
getPageNum:"getPageNum", //1 ，2 。 。 URL 。
urlPageNum:"pageNum", // URL . pageNum = currentPage //
};
var settings = $.extend(defaults,options || {});
dataPage = elements.attr(settings.currentPage); //
logo = elements.attr(settings.logo); //
containerHeight = parseInt(settings.container.outerHeight()); //
scrollTopDistance = parseInt(settings.container.scrollTop()); //
elements.parent().find(""+ settings.nodeLi + "["+settings.currentPage + "=" + dataPage +"]").each(function(index, obj){
objLogo = $(obj).attr(settings.logo);
elIndex = index;
if(logo == objLogo){
prevNum = elements.prevAll().length;
prevHeight = tool.getDistance(elements.parent().children(),prevNum - elIndex);
prevCountPage = parseInt(prevNum / settings.pageResize);
if(scrollTopDistance < prevHeight){
elements.parent().children().each(function(index,target){
if(prevCountPage > 0 ){
if(index < (prevCountPage - 1) * settings.pageResize){
prevCountPageDistance += parseInt($(target).outerHeight());
};
};
});
tool.changeUrlPar(settings.urlPageNum,dataPage - 1); //
tool.changeUrlPar(settings.getPageNum,2); //
keepScrollTop = scrollTopDistance - prevCountPageDistance; // 1;
}else{
prevDistance = tool.getDistance(elements.parent().children(),(prevCountPage + 1) * settings.pageResize);
prevPageScrollDistance = tool.getDistance(elements.parent().children(),prevCountPage * settings.pageResize);
if(prevDistance < (scrollTopDistance + containerHeight)){
tool.changeUrlPar(settings.urlPageNum,dataPage); //
tool.changeUrlPar(settings.getPageNum,2); //
keepScrollTop = scrollTopDistance - prevPageScrollDistance;
}else{
tool.changeUrlPar(settings.urlPageNum,dataPage); //
tool.changeUrlPar(settings.getPageNum,1); //
keepScrollTop = scrollTopDistance - prevPageScrollDistance;
};
};
};
});
tool.setSessionStorage("keepScrollTop",keepScrollTop); //
return this;
};
$.getSessionStorage = function(opt){
opt = sessionStorage.getItem(opt);
return opt;
};
})(window,jQuery,function(){
var tool = {
changeUrlPar(arg, val){ // URL
function changeU(destiny, par, par_value) {
var pattern = par+'=([^&]*)';
var replaceText = par+'='+par_value;
if (destiny.match(pattern))
{
var tmp = '/\\'+par+'=[^&]*/';
tmp = destiny.replace(eval(tmp), replaceText);
return (tmp);
}
else {
if (destiny.match('[\?]'))
{
return destiny+'&'+ replaceText;
}
else
{
return destiny+'?'+replaceText;
}
}
return destiny+'
'+par+'
'+par_value;
}
var hash = window.location.hash;
history.replaceState(null,'',location.pathname+location.search);
url = window.location.href;
var newUrl = changeU(url,arg,val) + hash;
history.replaceState(null,'',newUrl);
return false;
},
removeUrlPar(options){
history.replaceState(null,'',location.pathname+location.search);
var newParamStr = "";
var quotes = window.location.href.indexOf("?");
if(quotes != -1){
var webUrl = window.location.href.split("?")[0];
var paramsStr = window.location.href.split("?")[1].toString();
if(paramsStr.indexOf("&") != -1){
var pageIndex = paramsStr.indexOf(options);
if(pageIndex != -1){
var pageArr = paramsStr.split("&");
for(var i = 0; i < pageArr.length; i++){
if(pageArr[i].match(options)){
pageArr.splice(i,1);
};
};
newParamStr = pageArr.join("&");
}else{
newParamStr = paramsStr;
} ;
}else{
if(paramsStr.match(options)){
newParamStr = "";
}else {
newParamStr = paramsStr;
};
};
history.replaceState(null,'',webUrl + "?" + newParamStr);
}else{
history.replaceState(null,'',w.location.href);
}
},
getDistance(obj,maxNum){
var h = 0;
obj.each(function(index,target){
if(index < maxNum){
h += parseInt($(target).outerHeight());
}
});
return h;
},
setSessionStorage(keyName,opt){
sessionStorage.setItem(keyName,opt);
console.log(opt)
},
}
return tool;
})
$("li").on("click",function(){
$(this).savePosition({pageResize:15});
/*
* 1.http://localhost/index.php/Home/Web?pageNum=2&getPageNum=1
* url 。 。 。
*
* 2.http://localhost/index.php/Home/Web?pageNum=1&getPageNum=2
* 。
*
*/
var _herf = $(this).attr("data-url");
window.location.href = _herf;
});
//
var pageNum = 1,getPageNum = 2; // URL 。 ，
if(!!pageNum && !!getPageNum){
// ， 。。。
$(window).scrollTop($.getSessionStorage('keepScrollTop'));
}else{
}
</script>
</html>이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
