0

我需要帮助。我正在使用 Jquery Mobile 和 PHP 开发一个应用程序。我正在从 MySQL 数据库中检索数据。我能够提取包括图像在内的数据。我需要用户能够单击任何图像并放大图像。我使用 PHP 循环遍历行并为要弹出的图像创建弹出分区。这在笔记本电脑上运行良好,但在移动设备上,速度非常慢,并且创建的弹出图像非常大,比正常的移动网络应用程序宽度宽得多。

请参考下面的代码,感谢您的宝贵时间:

<!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

0

因此,您可以拥有小图片,这样当用户单击它们时,它们会被放大,而不会退出 Jquery Mobile 中的站点。

这是我用的,希望对你有帮助。

                <a href='#popupPic1' data-rel='popup' data-position-to='window' data-transition='fade'><img class='popphoto' src='./img/rest/$pic1' alt='' height='90' width='32%' style='max-width:200px;'></a>
                <a href='#popupPic2' data-rel='popup' data-position-to='window' data-transition='fade'><img class='popphoto' src='./img/rest/NO_es.jpg' alt='' height='90' width='32%' style='max-width:200px;'></a>
                <a href='#popupPic3' data-rel='popup' data-position-to='window' data-transition='fade'><img class='popphoto' src='./img/rest/NO_es.jpg' alt='' height='90' width='32%' style='max-width:200px;'></a>

                <div data-role='popup' id='popupPic1' 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='./img/rest/$pic1' style='max-height:512px;' alt=''></div>
                <div data-role='popup' id='popupPic2' 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='./img/rest/NO_es.jpg' style='max-height:512px;' alt=''></div>
                <div data-role='popup' id='popupPic3' 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='./img/rest/NO_es.jpg' style='max-height:512px;' alt=''></div>

显然只是从您想要加载的 IMG 中修复 SRC。

如果对你有帮助,请给我竖起大拇指。

谢谢

于 2013-07-21T04:08:46.037 回答
-1

你可以使用pophoto类。此类是 中的标准弹出元素类之一jqm

也许jquery 移动文档有更多有用的信息,您可以将其用于您的项目。

于 2016-04-15T05:28:15.227 回答