質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery Mobile

jQuery Mobileとはスマートフォンとタブレット用に最適化されたフレームワークです。様々な携帯端末にjQueryで作られたユーザーインターフェイスシステムを提供します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1352閲覧

jQuery mobileで、スライド表示するパネルを開いたら、今まで表示されていたものが全て消えてしまう

series207

総合スコア49

jQuery Mobile

jQuery Mobileとはスマートフォンとタブレット用に最適化されたフレームワークです。様々な携帯端末にjQueryで作られたユーザーインターフェイスシステムを提供します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/07/10 21:56

編集2020/07/11 01:25

#困っていること
jQuery mobileでリストビューとスライド表示するパネルを組み合わせたプログラムをつくっているのですが、スライド表示するパネルを開いたら、今まで表示されていたヘッダーやフッター、リストビューが全て消えてしまいます。どうすればいいですか?

#試したこと
前回の質問(Chromeの画面に何も表示されない)では</div>が不足していることが原因だったので、今回も同じように</div>を追加したり削除したりしてみましたが、何も変わりませんでした。

#該当のソースコード

HTML

1<!doctype html><html lang="ja"> 2<head> 3<body>My Page</body> 4 5<meta http-equiv="Content-type"content="text/html; charset=UTF-8"> 6 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8 <link rel="stylesheet" 9 href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> 10<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 11<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"> 12</script> 13</head> 14 15 16<!--#page_area--> 17<div data-role="page"> 18 19 <div id="panel" data-role="panel"> 20 <h3>このサイトについて</h3> 21 22 <p>プログラミング言語を紹介するサイトです</p> 23 <!--パネルを閉じるためのリンクボタン --> 24 <a href="#" data-rel="close" 25 class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">閉じる</a> 26 </div> 27 28<!--#header_area--> 29 <div data-role="header" data-theme="b"> 30 31 <div align="center">プログラミング言語</div> 32 33 </div> 34 35 36<!--#content_area--> 37<div data-role="controlgroup"> 38 39 40<div class="content-primary main-content"> 41<div role="main" class="ui-content"> 42 43 44 <a href="#panel" class="ui-btn ui-icon-info ui-btn-icon-left">このサイトについて</a> 45 </div> 46 47 <h3>言語一覧</h3> 48 49<ul data-role="listview"> 50 <li><a href="sample1-1p.html"> 51 52 <h3>Python</h3> 53 54 </a></li> 55 56 <li><a href="リンクしたいURLまたは、ファイル名を入れてください"> 57 58 <h3>java</h3> 59 60 </a></li> 61 </div></div> 62 63 64<!--#footer_area--> 65<div data-role="footer"> 66<div align="center">プログラミング言語</div> 67</div> 68

#初期状態 (Google Chrome)
「このサイトについて」の部分をクリックするとパネルが開く
イメージ説明
#パネルを開いたとき (Google Chrome)
イメージ説明
#上のプログラムの基になったプログラム
リストビューはなく、スライドパネルのみのプログラムです。
上のプログラムは、このプログラムの一部をコピペして作りました。
何故かこちらだと表示が消えません。

HTML

1 2<!doctype html><html lang="ja"> 3<head> 4<title>My Page</title> 5 6<meta http-equiv="Content-type"content="text/html; charset=UTF-8"> 7 8 <meta name="viewport" content="width=device-width,initial-scale=1"> 9 <link rel="stylesheet" 10 href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> 11<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 12<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"> 13</script> 14</head> 15 16 17<!--#page_area--> 18<div data-role="page"> 19 20 <div id="panel" data-role="panel"> 21 <h3>このサイトについて</h3> 22 23 <p>このサイトは、プログラミング言語を紹介するサイトです。</p> 24 <!--パネルを閉じるためのリンクボタン --> 25 <a href="#" data-rel="close" 26 class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">閉じる</a> 27 </div> 28 29 30 31<!--#header_area--> 32 <div data-role="header"> 33 <h1>プログラミング言語</h1> 34 35 36 </div> 37 38 39<!--#content_area--> 40<div role="main" class="ui-content"> 41 42 43 <!--パネルリンクボタン--> 44<img src="image/2.jpg" style="max-height:200px;" /> 45 <a href="#panel" class="ui-btn ui-icon-info ui-btn-icon-left">このサイトについて</a> 46 </div> 47 48 49 50 51<!--#footer_area--> 52<div data-role="footer"> 53<h4>プログラミング言語</h4> 54</div> 55

#パネルを開いたときの表示 (Google Chrome)
![イメージ説明]
#参考webサイト
Panelウィジェットで左右からスライド表示するには?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/07/11 01:05

http-equiv="Content-Type" が3つあるのはどうしてでしょう。
series207

2020/07/11 01:07

特にこれといった理由はありません。1つにしておきます。
guest

回答1

0

ベストアンサー

<!--#header_area--><!--#footer_area-->
は特に問題ないので

<!--#content_area-->に絞ってご説明します。

解決例(content_areaのみ)

javascript

1 <!--#content_area--> 2 <div role="main" class="ui-content content-primary main-content"> 3 <a href="#panel" class="ui-btn ui-icon-info ui-btn-icon-left">このサイトについて</a> 4 5 <h3>言語一覧</h3> 6 <ul data-role="listview"> 7 <li> 8 <a href="sample1-1p.html"> 9 <h3>Python</h3> 10 </a> 11 </li> 12 <li> 13 <a href="リンクしたいURLまたは、ファイル名を入れてください"> 14 <h3>java</h3> 15 </a> 16 </li> 17 </div>

説明

元のコード

javascript

1<!--#content_area--> 2<!-- ポイント1 --> 3<div data-role="controlgroup"> 4 5<!-- ポイント2 --> 6<div class="content-primary main-content"> 7<!-- ポイント3 --> 8<div role="main" class="ui-content"> 9 10 11 <a href="#panel" class="ui-btn ui-icon-info ui-btn-icon-left">このサイトについて</a> 12 </div> 13 14 <h3>言語一覧</h3> 15 16<ul data-role="listview"> 17 <li><a href="sample1-1p.html"> 18 19 <h3>Python</h3> 20 21 </a></li> 22 23 <li><a href="リンクしたいURLまたは、ファイル名を入れてください"> 24 25 <h3>java</h3> 26 27 </a></li> 28 </div></div>

ポイント1:
controlgroupは複数の.ui-btnを一つにまとめるためのもの(参考ページ)です。現時点ではui-btn要素は一つしかないため不要かと思います。「このサイトについて」というボタンの角を丸くしたい意図で記述したのであれば「このサイトについて」というボタンに.ui-corner-allを付与するのが適切かと思います。

ポイント2:
ポイント3で述べますが、コンテンツ領域のルート要素は<div role="main" class="ui-content">にするのがjQuery Mobileのルールのようです(今回のレイアウト崩れもそれが原因です)。
.content-primary .main-contentを使用したいのであれば<div role="main" class="ui-content">に付与するのがいいかと思います。

ポイント3:
コンテンツ領域のルート要素は<div role="main" class="ui-content">にするのがjQuery Mobileのルールのようです(参考ページ)。
コンテンツに関する記述は、すべて<div role="main" class="ui-content">の内側に書く必要があります。

投稿2020/07/11 03:23

PgMidori

総合スコア184

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

series207

2020/07/11 03:34

ご回答ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問