jquery 플러그인 봉인 간단합니다
479843 단어 JS 봉인 등 사상
먼저 봅시다. 봉인 템플릿이 무엇입니까?이 light-weight 모드를 보십시오.
javascript 코드
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
propertyName
:
"value"
}
//
function
Plugin
(
element
,
options
)
{
// dom ， jq ， $(element)
this
.
element
=
element
;
//
this
.
options
=
$
.
extend
({
}
,
defaults
,
options
)
;
//
this
.
_defaults
=
defaults
;
// （ ）
this
.
_name
=
pluginName
;
//
this
.
init
(
)
;
}
Plugin
.
prototype
.
init
=
function
(
)
{
//
}
//fn prototype
$
.
fn
[
pluginName
]
=
function
(
options
)
{
//each ， return this，
return
this
.
each
(
function
(
)
{
// if new
if
(
!$
.
data
(
this
,
'plugin_'
+
pluginName
))
{
// 。
$
.
data
(
this
,
'plugin_'
+
pluginName
,
new
Plugin
(
this
,
options
))
;
}
})
;
}
})
(
jQuery
,
window
,
document
)
;
// 。
， demo， ， 。 tab
http://www.cnblogs.com/web-xiaobai/archive/2012/09/17/2689067.html
：
-
-
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<
script
type
=
"text/javascript"
>
//http://www.cnblogs.com/web-xiaobai/archive/2012/09/17/2689067.html
$
(
function
(
)
{
$
(
document
)
.
ready
(
function
(
)
{
$
(
".tab li"
)
.
click
(
function
(
)
{
$
(
".tab li"
)
.
eq
(
$
(
this
)
.
index
(
))
.
addClass
(
"cur"
)
.
siblings
(
)
.
removeClass
(
'cur'
)
;
$
(
"div"
)
.
hide
(
)
.
eq
(
$
(
this
)
.
index
(
))
.
show
(
)
;
// : $("div").eq($(".tab li").index(this)).addClass("on").siblings().removeClass('on');
})
;
})
;
})
;
script
>
<
style
>
div
{
margin:
0;
padding:
0;
width:
184
px;
height:
200
px;
border:
1
px
solid
#ccc;
display:
none;
}
.tab
{
margin:
0;
padding:
0;
list-style:
none;
width:
200
px;
overflow:
hidden;
}
.tab
li
{
float:
left;
width:
60
px;
height:
30
px;
background:
#ccc;
color:
#fff;
border:
1
px
solid
red;
text-align:
center;
line-height:
30
px;
cursor:
pointer;
}
.on
{
display:
block;
}
.tab
li
.cur
{
background:
blue;
}
style
>
head
>
<
body
>
<
ul
class
=
"tab"
>
<
li
>
li
>
<
li
class
=
"cur"
>
li
>
<
li
>
li
>
ul
>
<
div
>
11
div
>
<
div
class
=
"on"
>
22
div
>
<
div
>
33
div
>
body
>
html
>
-
， ？
-
javascript
-
1
2
3
4
5
6
7
$
(
document
)
.
ready
(
function
(
)
{
$
(
".tab li"
)
.
click
(
function
(
)
{
$
(
".tab li"
)
.
eq
(
$
(
this
)
.
index
(
))
.
addClass
(
"cur"
)
.
siblings
(
)
.
removeClass
(
'cur'
)
;
$
(
"div"
)
.
hide
(
)
.
eq
(
$
(
this
)
.
index
(
))
.
show
(
)
;
// : $("div").eq($(".tab li").index(this)).addClass("on").siblings().removeClass('on');
})
;
})
;
간단해, 설명을 많이 안 해.
두 번째 단계
, 플러그인을 봉인하기 위해 코드를 고칩니다. 원문에는 index가 순서입니다. 이런 순서는 필요 없습니다. 데이터 속성으로 그tab이 그div에 대응하는 것을 가리키려고 합니다.
먼저 내용 구역을 주고 전체적으로div로 포장하며 양식을 바꾸어야 한다.
tab 페이지와 내용 영역을 연결하고 데이터 속성으로 연결합니다.
javascript 코드
1
2
3
4
5
6
7
8
9
$
(
document
)
.
ready
(
function
(
)
{
$
(
".tab li"
)
.
click
(
function
(
)
{
var
$this
=
$
(
this
)
;
var
c
=
$this
.
data
(
"tab"
)
;
alert
(
c
)
$this
.
addClass
(
"cur"
)
.
siblings
(
)
.
removeClass
(
'cur'
)
;
$
(
".tabContent"
)
.
find
(
'>[data-tab='
+
c
+
']'
)
.
addClass
(
"on"
)
.
siblings
(
)
.
removeClass
(
'on'
)
;
})
;
})
;
코드 세그먼트
효과 미리 보기
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$
(
document
)
.
ready
(
function
(
)
{
$
(
".tab li"
)
.
click
(
function
(
)
{
var
$this
=
$
(
this
)
;
var
c
=
$this
.
data
(
"tab"
)
;
$this
.
addClass
(
"cur"
)
.
siblings
(
)
.
removeClass
(
'cur'
)
;
$
(
".tabContent"
)
.
find
(
'>[data-tab='
+
c
+
']'
)
.
addClass
(
"on"
)
.
siblings
(
)
.
removeClass
(
'on'
)
;
})
;
})
;
script
>
<
style
>
.tabContent
div
{
margin:
0;
padding:
0;
width:
184
px;
height:
200
px;
border:
1
px
solid
#ccc;
display:
none;
}
.tab
{
margin:
0;
padding:
0;
list-style:
none;
width:
200
px;
overflow:
hidden;
}
.tab
li
{
float:
left;
width:
60
px;
height:
30
px;
background:
#ccc;
color:
#fff;
border:
1
px
solid
red;
text-align:
center;
line-height:
30
px;
cursor:
pointer;
}
.tab
li
.cur
{
background:
blue;
}
div
.on
{
display:
block;
}
style
>
head
>
<
body
>
<
ul
id
=
"tab"
class
=
"tab"
>
<
li
data-tab
=
"tab1"
>
li
>
<
li
data-tab
=
"tab2"
class
=
"cur"
>
li
>
<
li
data-tab
=
"tab3"
>
li
>
ul
>
<
div
id
=
"tabContent"
class
=
"tabContent"
>
<
div
data-tab
=
"tab1"
>
11
div
>
<
div
data-tab
=
"tab2"
class
=
"on"
>
22
div
>
<
div
data-tab
=
"tab3"
>
33
div
>
div
>
body
>
html
>
-
， ， ， 。
-
javascript
-
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
this
.
element
=
element
;
this
.
options
=
$
.
extend
({
}
,
defaults
,
options
)
;
this
.
_defaults
=
defaults
;
this
.
_name
=
pluginName
;
this
.
init
(
)
;
}
Plugin
.
prototype
.
init
=
function
(
)
{
var
self
=
this
;
$
(
this
.
element
)
.
find
(
'li'
)
.
click
(
function
(
)
{
var
$this
=
$
(
this
)
;
var
name
=
$this
.
data
(
"tab"
)
;
$this
.
addClass
(
"cur"
)
.
siblings
(
)
.
removeClass
(
'cur'
)
;
$
(
self
.
options
.
contentWrapper
)
.
find
(
'>[data-tab='
+
name
+
']'
)
.
addClass
(
"on"
)
.
siblings
(
)
.
removeClass
(
'on'
)
;
})
;
var
activeName
=
this
.
options
.
activeTabName
;
alert
(
activeName
)
;
if
(
activeName
==
null
)
{
$
(
this
.
element
)
.
find
(
'li'
)
.
eq
(
0
)
.
click
(
)
;
}
else
{
$
(
this
.
element
)
.
find
(
'>[data-tab='
+
activeName
+
']'
)
.
click
(
)
;
}
}
$
.
fn
[
pluginName
]
=
function
(
options
)
{
return
this
.
each
(
function
(
)
{
if
(
!$
.
data
(
this
,
'plugin_'
+
pluginName
))
{
$
.
data
(
this
,
'plugin_'
+
pluginName
,
new
Plugin
(
this
,
options
))
;
}
})
;
}
})
(
jQuery
,
window
,
document
)
;
-
：
-
javascript
-
1
$
(
'#tab'
)
.
myTab
({
contentWrapper
:
'#tabContent'
,
activeTabName
:
'tab2'
})
;
4단계
, 코드 최적화, 모든 리에 클릭이 있어서 너무 낭비합니다.개용 의뢰
javascript 코드
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var
self
=
this
;
var
$element
=
$
(
this
.
element
)
;
$element
.
on
(
'click'
,
'li'
,
function
(
)
{
var
$this
=
$
(
this
)
;
var
c
=
$this
.
data
(
"tab"
)
;
$element
.
trigger
(
'tab/change'
,
c
)
;
})
;
$element
.
on
(
'tab/change'
,
function
(
e
,
tabName
)
{
$element
.
find
(
'li'
)
.
removeClass
(
'cur'
)
;
$element
.
find
(
'>[data-tab='
+
tabName
+
']'
)
.
addClass
(
"cur"
)
;
})
;
var
$contentWrapper
=
$
(
this
.
options
.
contentWrapper
)
;
$element
.
on
(
'tab/change'
,
function
(
e
,
tabName
)
{
$contentWrapper
.
find
(
'>[data-tab]'
)
.
removeClass
(
'on'
)
;
$contentWrapper
.
find
(
'>[data-tab='
+
tabName
+
']'
)
.
addClass
(
"on"
)
;
})
;
var
activeName
=
this
.
options
.
activeTabName
;
if
(
activeName
==
null
)
{
$element
.
find
(
'li'
)
.
eq
(
0
)
.
click
(
)
;
}
else
{
$element
.
trigger
(
'tab/change'
,
this
.
options
.
activeTabName
)
;
}
}
$
.
fn
[
pluginName
]
=
function
(
options
)
{
return
this
.
each
(
function
(
)
{
if
(
!$
.
data
(
this
,
'plugin_'
+
pluginName
))
{
$
.
data
(
this
,
'plugin_'
+
pluginName
,
new
Plugin
(
this
,
options
))
;
}
})
;
}
})
(
jQuery
,
window
,
document
)
;
-
-
-
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
}
})
;
}
})
(
jQuery
,
window
,
document
)
;
script
>
<
script
type
=
"text/javascript"
>
$
(
function
(
)
{
$
(
'#tab'
)
.
myTab
({
contentWrapper
:
'#tabContent'
,
activeTabName
:
'tab2'
})
;
})
script
>
<
style
>
.tabContent
div
{
margin:
0;
padding:
0;
width:
184
px;
height:
200
px;
border:
1
px
solid
#ccc;
display:
none;
}
.tab
{
margin:
0;
padding:
0;
list-style:
none;
width:
200
px;
overflow:
hidden;
}
.tab
li
{
float:
left;
width:
60
px;
height:
30
px;
background:
#ccc;
color:
#fff;
border:
1
px
solid
red;
text-align:
center;
line-height:
30
px;
cursor:
pointer;
}
.tab
li
.cur
{
background:
blue;
}
div
.on
{
display:
block;
}
style
>
head
>
<
body
>
<
ul
id
=
"tab"
class
=
"tab"
>
<
li
data-tab
=
"tab1"
>
li
>
<
li
data-tab
=
"tab2"
>
li
>
<
li
data-tab
=
"tab3"
>
li
>
ul
>
<
div
id
=
"tabContent"
class
=
"tabContent"
>
<
div
data-tab
=
"tab1"
>
11
div
>
<
div
data-tab
=
"tab2"
>
22
div
>
<
div
data-tab
=
"tab3"
>
33
div
>
div
>
body
>
html
>
-
， ， 。
， ， 。
。 ， AMD ， ， 。
。
좋은 웹페이지 즐겨찾기
