ホームページ ウェブフロントエンド jsチュートリアル jquery.mobile 共通のlayout_jqueryで発生した問題の概要

jquery.mobile 共通のlayout_jqueryで発生した問題の概要

May 16, 2016 pm 04:14 PM
jquery mobile レイアウト

最近のプロジェクトでは、jquery.mobile を使用して携帯電話上にシンプルなディスプレイを作成しました。私はこのフレームワークについては以前から知っていただけで、実際に遊んだことはありませんでした。

特にイベント バインディングに関しては、デスクトップ システムと比較すると、ブラウザはあらゆる点で不快であり、意味がわかりません。

以下に示すように、バックエンド システムで作業する場合、左側には通常、展開したり折りたたんだりできるモジュールと下位のメニュー項目が表示されます。

私の問題は、ページを再利用するために、コメント表示用の蓄積レビューに iframe が埋め込まれていることです。

最初のしきい値

モバイル WEB 開発の経験がある学生は、IOS ブラウザの iframe にコンテンツが多すぎると、スクロール バーが表示されず、コンテンツが切り取られたように見えることを知っているはずです。

情報を確認してやっと分かりました。やっぱり携帯電話の画面は小さいので、コメントが多いとパソコンのブラウザのようにページ送りボタンが並ぶのは無理です。本当に悪いです。

現在では、ローリングロードが一般的に使用されています。まずデモを作成して、コンピューター上で実行してください。携帯電話を変更して、最初はAndroid携帯電話で試してみましたが、うまくいくと思います。

iPhone に切り替えてもスクロール バーの問題は解決しただけですが、スクロールの読み込みはまだ残っています。何度もスワイプしても反応がなく、心が寒くなりました。ここで何か変なことを言いたいのですが、QQ と WeChat では許されています。それは本当に変です。

このまま無駄なことを続けていても結果は出ないので、別の方法を見つけたほうがいいでしょう。最初に考えたのは、これを別のページで行うことでした。 そこで、2 番目の閾値に遭遇しました。

コードをコピーします コードは次のとおりです:



    < li>< a id = "pjlist" href = "xxx" class = "ui-btn-text">累積評価</a><                                                                                                                                                                                                                                      


    上記は累積評価部分に相当します。クリック後、ページのスタイルが完全に崩れ、js イベントが実行されません。 f12でコードを見ると、bodyのhtml要素、headの部分、ページ下部のjs以外は全て消えています。
そんなにバカなことするの?同僚にそのような問題が発生したかどうかを尋ねたところ、rel="external" を追加すれば大丈夫だと言われましたが、実際には機能しませんでした。したがって、コードは次のようになります:

コードをコピーします コードは次のとおりです:
    < li>< a id = "pjlist" href = "xxx" class = "ui-btn-text" rel = "external">累積評価</a></li>
                                                                                                                                                                                                                                         


    注: rel='external' は target=''_blank'' と似ており、新しいページで開くことを意味します

    3 番目のしきい値は、タイトルで述べた問題です (頭の写真が最終的な効果です)

    collapsible listview 2 つのパートナーは相互に互換性がないため、より良いレイアウト効果を得ることができません。いじくりながら空の折りたたみリストを追加しましたが、うまくいきました。

    やっと集まりました。折りたたみ可能なアイコンのデフォルトは で、リストビュー項目はアイコンを統一するための右矢印です。デフォルトでは、累積評価は上の図のようになりません。

    コードをコピーします

    コードは次のとおりです:
    この問題は解決されました。完全なページは次のとおりです:

    コードをコピー

    コードは次のとおりです:

    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
    ">
    http://www.w3.org/1999/xhtml">

       
       
       
       
       
       
       
       
       
       


       

           

               
    data-expanded-icon="arrow-u" data-collapsed-icon="arrow-d">
                   

                       

    医院介绍


                       


                   

                   

                       

    套餐相关信息


                       


                   

                   

                       

    使用须知


                       


                   

                   

                       

    查看地图


                       


                   

                   

                   

    < div data-role = "content" stiled = "border:solid #ccc; border-width:0 1px;">

      < li>< a id = "pjlist" href = "xxx" class = "ui-btn-text" rel = "external">累積評価</a></li>
                                                                                                                                                                                                                                                                                                                                                                                                                                                           






    以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    Video Face Swap

    Video Face Swap

    完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド jQueryのリファレンスメソッドを詳しく解説:クイックスタートガイド Feb 27, 2024 pm 06:45 PM

jQuery 参照方法の詳細説明: クイック スタート ガイド jQuery は、Web サイト開発で広く使用されている人気のある JavaScript ライブラリであり、JavaScript プログラミングを簡素化し、開発者に豊富な機能を提供します。この記事では、jQuery の参照方法を詳しく紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。 jQuery の導入 まず、HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN リンクを通じて導入することも、ダウンロードすることもできます

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常​​、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u

WordPress Web ページの位置ずれを解決するためのガイド WordPress Web ページの位置ずれを解決するためのガイド Mar 05, 2024 pm 01:12 PM

WordPress Web ページの位置のずれを解決するためのガイド WordPress Web サイトの開発では、Web ページ要素の位置がずれていることがあります。これは、さまざまなデバイスの画面サイズ、ブラウザの互換性、または不適切な CSS スタイル設定が原因である可能性があります。このずれを解決するには、問題を注意深く分析し、考えられる原因を見つけて、段階的にデバッグおよび修復する必要があります。この記事では、WordPress Web ページの位置ずれに関する一般的な問題とその解決策をいくつか紹介し、開発に役立つ具体的なコード例を提供します。

jQueryで要素の高さ属性を削除するにはどうすればよいですか? jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます

Yaber T2 (Plus): フル HD 解像度、バッテリー、JBL サウンド、スマート機能を備えたコンパクト プロジェクター Yaber T2 (Plus): フル HD 解像度、バッテリー、JBL サウンド、スマート機能を備えたコンパクト プロジェクター Jun 27, 2024 am 10:31 AM

Yaber 製品は Amazon で購入できますが、同社は新しいプロジェクター Yaber T2 を提供しています。このモデルには、Yaber T2 と Yaber T2 Plus の 2 つのバージョンがあります。 Yaber T2 Plusの価格は299ドルではなく349ドルで、テレビが付属します

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

jQuery における eq の役割と応用シナリオを理解する jQuery における eq の役割と応用シナリオを理解する Feb 28, 2024 pm 01:15 PM

jQuery は、Web ページでの DOM 操作やイベント処理を処理するために広く使用されている人気のある JavaScript ライブラリです。 jQueryではeq()メソッドを利用して指定したインデックス位置の要素を選択しますが、具体的な使い方と応用シーンは以下の通りです。 jQuery では、 eq() メソッドは、指定されたインデックス位置にある要素を選択します。インデックス位置は 0 からカウントされます。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などとなります。 eq() メソッドの構文は次のとおりです。 $("s

See all articles