teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Jqueryプラグイン【pagePiling】のtooltipを常に表示させたい

編集履歴

質問編集履歴

4

追記

2019/02/28 04:39

投稿

ayaka_000
ayaka_000

スコア15

test CHANGED
File without changes
test CHANGED
@@ -98,6 +98,20 @@
98
98
 
99
99
  </div>
100
100
 
101
+
102
+
103
+ 　　<ul id="menu">
104
+
105
+ 　 <li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li>
106
+
107
+ 　 <li data-menuanchor="page2"><a href="#page2">Page 2</a></li>
108
+
109
+ 　 <li data-menuanchor="page3"><a href="#page3">Page 3</a></li>
110
+
111
+ 　 <li data-menuanchor="page4"><a href="#page4">Page 4</a></li>
112
+
113
+ 　 </ul>
114
+
101
115
  ```
102
116
 
103
117
  JavaScript

3

改善

2019/02/28 04:39

投稿

ayaka_000
ayaka_000

スコア15

test CHANGED
File without changes
test CHANGED
@@ -70,59 +70,65 @@
70
70
 
71
71
  ```
72
72
 
73
- <div id="pagepiling">
73
+ <div id="pagepiling">
74
74
 
75
- <div class="contents" id="section1">
75
+ <div class="contents" id="section1">
76
76
 
77
- <!--contents01-->
77
+ <!--contents01-->
78
78
 
79
- </div>
79
+ </div>
80
80
 
81
- <div class="contents" id="section2">
81
+ <div class="contents" id="section2">
82
82
 
83
- <!--contents02-->
83
+ <!--contents02-->
84
84
 
85
- </div>
85
+ </div>
86
86
 
87
- <div class="contents" id="section3">
87
+ <div class="contents" id="section3">
88
88
 
89
- <!--contents03-->
89
+ <!--contents03-->
90
90
 
91
- </div>
91
+ </div>
92
92
 
93
- <div class="contents" id="section4">
93
+ <div class="contents" id="section4">
94
94
 
95
- <!--contents04-->
95
+ <!--contents04-->
96
96
 
97
- </div>
97
+ </div>
98
98
 
99
- </div>
99
+ </div>
100
100
 
101
+ ```
101
102
 
103
+ JavaScript
102
104
 
103
- $(document).ready(function() {
105
+ ```
104
106
 
105
- $('#pagepiling').pagepiling({
107
+ $(document).ready(function () {
106
108
 
107
- menu: '#menu',
109
+ $('#pagepiling').pagepiling({
108
110
 
109
- anchors: ['page1', 'page2', 'page3','page4'],
111
+ menu: '#menu',
110
112
 
111
- navigation: {
113
+ anchors: ['page1', 'page2', 'page3', 'page4'],
112
114
 
113
- 'position': 'right',
115
+ navigation: {
114
116
 
115
- 'tooltips': ['section1', 'section2', 'section3', 'section4']
117
+ 'position': 'right',
116
118
 
117
- },
119
+ 'tooltips': ['section1', 'section2', 'section3', 'section4']
118
120
 
119
- scrollingSpeed: 1000,
121
+ },
120
122
 
123
+ scrollingSpeed: 1000,
124
+
121
- sectionSelector: '.contents'
125
+ sectionSelector: '.contents'
126
+
127
+ });
122
128
 
123
129
  });
124
130
 
125
- });
131
+
126
132
 
127
133
  ```
128
134
 

2

追記

2019/02/28 04:34

投稿

ayaka_000
ayaka_000

スコア15

test CHANGED
File without changes
test CHANGED
@@ -126,7 +126,7 @@
126
126
 
127
127
  ```
128
128
 
129
-
129
+ jqueryのバージョンは1.9.1です。
130
130
 
131
131
 
132
132
 

1

追加

2019/02/28 04:31

投稿

ayaka_000
ayaka_000

スコア15

test CHANGED
File without changes
test CHANGED
@@ -58,4 +58,76 @@
58
58
 
59
59
  ```
60
60
 
61
+
62
+
63
+ プラグインのURLは以下になります。
64
+
65
+ https://alvarotrigo.com/pagePiling/
66
+
67
+
68
+
69
+ HTML
70
+
71
+ ```
72
+
73
+ <div id="pagepiling">
74
+
75
+ <div class="contents" id="section1">
76
+
77
+ <!--contents01-->
78
+
79
+ </div>
80
+
81
+ <div class="contents" id="section2">
82
+
83
+ <!--contents02-->
84
+
85
+ </div>
86
+
87
+ <div class="contents" id="section3">
88
+
89
+ <!--contents03-->
90
+
91
+ </div>
92
+
93
+ <div class="contents" id="section4">
94
+
95
+ <!--contents04-->
96
+
97
+ </div>
98
+
99
+ </div>
100
+
101
+
102
+
103
+ $(document).ready(function() {
104
+
105
+ $('#pagepiling').pagepiling({
106
+
107
+ menu: '#menu',
108
+
109
+ anchors: ['page1', 'page2', 'page3','page4'],
110
+
111
+ navigation: {
112
+
113
+ 'position': 'right',
114
+
115
+ 'tooltips': ['section1', 'section2', 'section3', 'section4']
116
+
117
+ },
118
+
119
+ scrollingSpeed: 1000,
120
+
121
+ sectionSelector: '.contents'
122
+
123
+ });
124
+
125
+ });
126
+
127
+ ```
128
+
129
+
130
+
131
+
132
+
61
133
  よろしくお願いいたします。