teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問プラグイン「jquery.steps」でタイトルが不要な場合の対処法は？

編集履歴

質問編集履歴

6

誤字

2018/10/28 01:16

投稿

beer
beer

スコア19

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ###対象のコード
16
16
 
17
- 次のHTMLに後述のJasaScriptのような指定をすると上図のスライドステップが出来上がるプラグインでして、今回はタイトルが不要なので、HTMLの``h3``を削除したいのですが、ただ削除するだけではプラグインがエラーを吐き出します。
17
+ 次のHTMLにJasaScriptのような指定をすると上図のスライドステップが出来上がるプラグインでして、今回はタイトルが不要なので、HTMLの``h3``を削除したいのですが、ただ削除するだけではプラグインがエラーを吐き出します。
18
18
 
19
19
 
20
20
 
@@ -86,7 +86,11 @@
86
86
 
87
87
  ```
88
88
 
89
+ まぁ、ただHTMLで``h3``を削除しても、JavaScriptで
90
+
91
+ ``headerTag: "h3",``
92
+
89
- まぁ、ただHTMLで``h3``を削除してもJavaScriptで``headerTag: "h3",``と書いてタイトルになる部分を指定しているのでエラーになるのは仕方ないとしても、
93
+ と書いてタイトルになる部分を指定しているのでエラーになるのは仕方ないとしても、
90
94
 
91
95
 
92
96
 
@@ -102,7 +106,7 @@
102
106
 
103
107
 
104
108
 
105
- 仕方なく現状は前述のHTMLとJavaScriptで指定してタイトルを出力したまま、CSSでそれを後から隠している状態です。
109
+ 仕方なく現状は前述のHTMLとJavaScriptによってタイトルを出力したまま、CSSでそれを後から隠している状態です。
106
110
 
107
111
 
108
112
 

5

タグID修正

2018/10/28 01:16

投稿

beer
beer

スコア19

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  ```html
22
22
 
23
- <div id="wizardform">
23
+ <div id="#example-basic">
24
24
 
25
25
 
26
26
 
@@ -50,7 +50,7 @@
50
50
 
51
51
  ```js
52
52
 
53
- $("#wizardform").steps({
53
+ $("##example-basic").steps({
54
54
 
55
55
  // タイトルになる部分を指定
56
56
 

4

誤字

2018/10/28 01:14

投稿

beer
beer

スコア19

test CHANGED
File without changes
test CHANGED
@@ -86,7 +86,7 @@
86
86
 
87
87
  ```
88
88
 
89
- まぁ、ただｈTMLで``h3``を削除してもJavaScriptで``headerTag: "h3",``と書いてタイトルになる部分を指定しているのでエラーになるのは仕方ないとしても、
89
+ まぁ、ただHTMLで``h3``を削除してもJavaScriptで``headerTag: "h3",``と書いてタイトルになる部分を指定しているのでエラーになるのは仕方ないとしても、
90
90
 
91
91
 
92
92
 

3

HTML追加など

2018/10/28 01:12

投稿

beer
beer

スコア19

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
 
6
6
 
7
- 例えば図のようなイメージです。
7
+ 例えば図のようなイメージで、「名前 パスワード 確認」の部分が不要だと考えています。
8
8
 
9
9
  ![イメージ説明](b4b266e4c6eba6288aa131630f1ee2b3.png)
10
10
 
@@ -14,19 +14,37 @@
14
14
 
15
15
  ###対象のコード
16
16
 
17
-
18
-
19
- HTMLで記載したものについて下記のように指定してスライドステップに変化させるプラグインでして、
17
+ 次のHTMLに後述のJasaScriptのような指定をすると上図のスライドステップが出来上がるプラグインでして、今回はタイトルが不要なので、HTMLの``h3``を削除したいのですが、ただ削除するだけではプラグインがエラーを吐き出します。
20
18
 
21
19
 
22
20
 
23
- > （例）フォームでスライドさせる部分→``bodyTag: "section"``
21
+ ```html
24
22
 
25
- （例）上部に固定するタイトルの部分→``headerTag: "h3"``
23
+ <div id="wizardform">
26
24
 
27
25
 
28
26
 
27
+ <h3>名前</h3>
28
+
29
+ <section><input type="text"><section>
30
+
31
+
32
+
29
- 今回はタイトルを削除したいので、下記3行目コメントアウトの部分を何とかしたいと考えています。
33
+ <h3>パスワード</h3>
34
+
35
+ <section><input type="password"><section>
36
+
37
+
38
+
39
+ <h3>確認</h3>
40
+
41
+ <section><p></p><p></p><section>
42
+
43
+
44
+
45
+ </div>
46
+
47
+ ```
30
48
 
31
49
 
32
50
 
@@ -34,15 +52,19 @@
34
52
 
35
53
  $("#wizardform").steps({
36
54
 
55
+ // タイトルになる部分を指定
56
+
57
+ headerTag: "h3",　
58
+
59
+ // スライドさせる部分を指定
60
+
37
61
  bodyTag: "section",
38
62
 
39
- headerTag: "h3",　//これを削除したい
63
+ // スライド方式を指定
40
64
 
41
65
  transitionEffect: "slideLeft",
42
66
 
43
- autoFocus: true,
44
-
45
- titleTemplate: "#title#",
67
+ // スライドさせるボタン名を指定
46
68
 
47
69
  labels: {
48
70
 
@@ -54,13 +76,21 @@
54
76
 
55
77
  }
56
78
 
79
+ // その他いろいろ
80
+
81
+ autoFocus: true,
82
+
83
+ titleTemplate: "#title#",
84
+
57
85
  });
58
86
 
59
87
  ```
60
88
 
89
+ まぁ、ただｈTMLで``h3``を削除してもJavaScriptで``headerTag: "h3",``と書いてタイトルになる部分を指定しているのでエラーになるのは仕方ないとしても、
61
90
 
62
91
 
92
+
63
- ところが公式のオプションなどを見ても
93
+ かといって公式オプションなどを見ても
64
94
 
65
95
  ``headerTag: "h3"``を
66
96
 
@@ -72,7 +102,7 @@
72
102
 
73
103
 
74
104
 
75
- 現状はHTMLで書いてJavaScriptで指定したまま、CSSでそれを後から隠している状態です。
105
+ 仕方なく現状は前述のHTMLとJavaScriptで指定してタイトルを出力したまま、CSSでそれを後から隠している状態です。
76
106
 
77
107
 
78
108
 

2

JSのID名変更

2018/10/28 01:10

投稿

beer
beer

スコア19

test CHANGED
File without changes
test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  ```js
34
34
 
35
- $("#example-basic").steps({
35
+ $("#wizardform").steps({
36
36
 
37
37
  bodyTag: "section",
38
38
 

1

画像追加

2018/10/28 00:54

投稿

beer
beer

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,18 +1,32 @@
1
1
  ###前提・実現したいこと
2
2
 
3
- 申し込みフォームなどをスライドステップに分割するプラグインに「jquery.steps」がありますが、タイトルを削除できないものでしょうか？
3
+ 申し込みフォームなどをスライドステップに分割するプラグインに「jquery.steps」がありますが、今回はこのタイトルを削除したいです。
4
4
 
5
5
 
6
6
 
7
+ 例えば図のようなイメージです。
8
+
7
- 下記JavaScriptのようにフォームでスライドさせる部分を「bodyTag:」と指定し、上部に固定させるタイトルを「headerTag:」のように指定して使うのですが、
9
+ ![イメージ説明](b4b266e4c6eba6288aa131630f1ee2b3.png)
8
10
 
9
11
 
10
12
 
13
+
14
+
11
- 今回はタイトルが不要なのでHTMLと下記JavaScriptから削除したいと考えています。
15
+ ###対象のコード
12
16
 
13
17
 
14
18
 
19
+ HTMLで記載したものについて下記のように指定してスライドステップに変化させるプラグインでして、
20
+
21
+
22
+
23
+ > （例）フォームでスライドさせる部分→``bodyTag: "section"``
24
+
25
+ （例）上部に固定するタイトルの部分→``headerTag: "h3"``
26
+
27
+
28
+
15
- 3行目コメントアウトの部分です。
29
+ 今回はタイトルを削除したいので、下記3行目コメントアウトの部分を何とかしたいと考えています。
16
30
 
17
31
 
18
32
 
@@ -44,30 +58,30 @@
44
58
 
45
59
  ```
46
60
 
47
- ところが、下記のオプションなどを見ても「headerTag:」について
48
61
 
49
- ```js
50
62
 
51
- headerTag: "",
63
+ ところが公式のオプションなどを見ても
52
64
 
53
- ```
65
+ ``headerTag: "h3"``を
54
66
 
55
- ```js
67
+ ``headerTag: ""``とか
56
68
 
57
- headerTag: false,
69
+ ``headerTag: false``にすれば削除できる
58
70
 
59
- ```
71
+ といなどといった方法が見当たりません。
60
72
 
61
73
 
62
74
 
63
- のような指定はできないようで、今はCSSでタイトルを隠している状態です。
75
+ 現状はHTMLで書いてJavaScriptで指定したまま、CSSでそれを後から隠している状態です。
64
76
 
65
77
 
78
+
79
+ どなたかタイトルを削除する良い方法をご存知ないでしょうか？
80
+
81
+
82
+
83
+ ###参考情報
66
84
 
67
85
  使用例：[http://4webtbt.com/001268](http://4webtbt.com/001268)
68
86
 
69
87
  オプション：[https://github.com/rstaib/jquery-steps/wiki/Settings](https://github.com/rstaib/jquery-steps/wiki/Settings)
70
-
71
-
72
-
73
- どなたかご存知ないでしょうか？