0

助けが必要です。Jquery Mobile と PHP を使用してアプリケーションを開発しています。MySQL データベースからデータを取得しています。画像を含むデータをプルできました。ユーザーが任意の画像をクリックできるようにする必要があり、画像が拡大されます。PHP を使用して行をループし、ポップアップする画像のポップアップ分割を作成しました。これはラップトップでは完全に機能しますが、モバイル デバイスでは非常に遅く、作成されるポップアップ イメージは非常に大きく、通常のモバイル Web アプリの幅よりもはるかに広くなります。

以下のコードを参照してください。お時間をいただきありがとうございます。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <link rel="stylesheet" href="css/mystyle.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>

<body>

    <section id="main" data-role="page" data-theme="a" data-add-back-btn="true">

        <header data-role="header" data-position="fixed" data-id="theHeader">

        <h1>Header Title</h1>

        <a href="/" data-rel="back">Go Back</a>

    </header>


    <article data-role="content">

    <?php

        $con = mysql_connect('db','user','password');
        if (!$con)
        {
          die('Could not connect: ' . mysql_error());
        }

        mysql_select_db("db");


        $sql = "select * from table";


        $result = mysql_query($sql);
        $num_rows = mysql_num_rows($result);
        $ii = 0;

        while($row = mysql_fetch_array($result))
         {
                echo('<div class="ui-grid-a">');

                echo('<div class="ui-block-a"><h6>'.$row['col1'].'</h6><h6>'.$row['col2'].'</h6><h6>'.$row['col3'].'</h6></div>');

                echo('<a href="#popup'.$ii.'" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="http://..../images/' . $row["imageName"] .'" alt="' . $row["imageName"] .'" style="height: 180px; width:130px;"></a>');

                echo('<div data-role="popup" id="popup'.$ii.'" data-overlay-theme="a" data-theme="d" data-corners="false"><a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img class="popphoto" src="http://..../images/' . $row["imageName"] .'" style="max-height:512px;" alt="'.$row["imageName"].'"></div>');

                echo('</div>');
                echo('<hr />');
                $ii++;
         }

        mysql_close($con);

    ?>

    </article>

    <footer data-role="footer" data-position="fixed" data-id="theFooter">

        <h1>Footer</h1>

    </footer>
    </section>

</body>
4

2 に答える 2

-1

pophotoクラスを使用できます。このクラスは、 の標準ポップアップ要素クラスの 1 つですjqm。

おそらく、jquery モバイル ドキュメントには、プロジェクトに使用できるより有用な情報が含まれています。

于 2016-04-15T05:28:15.227 に答える