Question

我想根据变量的内容显示JQM PopUp。

我有一个包含此内容的变量。

924-1922, 928-3074, 928-8363

然后我执行.split所以我可以获得三个电话号码。

secNumber = res.rows.item(i).secondary_num.split(", ");

所以我的变量secNumber现在有一个包含三个数字的数组：924-1922,928-3074,928-8363

现在这里是我显示它的代码（我正在使用for循环，因为有很多带有电话号码的条目）：

html += '<a href="#" class="category-btn" title="All" rel="external" >'+ res.rows.item(i).name  +' <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+telnum+'\', \'_system\');"> Tel. No.:  ' + res.rows.item(i).tel_num + ' </span> <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+secNumber+'\', \'_system\');"> ' + secondary  +' </span> </a>';

我上次onclick上的<span>正在运行。但是，它只将第一个号码放在手机的拨号器上。我希望在我的onclick上实现的是，在使用来自JQM网站的代码显示弹出窗口之后

<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slideup" data-icon="gear" data-theme="e">Actions...</a>
<div data-role="popup" id="popupMenu" data-theme="d">
    <ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="d">
        <li data-role="divider" data-theme="e">Choose an action</li>
        <li><a href="#">View details</a></li>
        <li><a href="#">Edit</a></li>
        <li><a href="#">Disable</a></li>
        <li><a href="#">Delete</a></li>
    </ul>
</div>

当我点击我的<span>时，弹出列表视图的内容将是我的数组secNumber的内容，然后是列表视图中每个元素的onclick，将调用window.open来访问手机的拨号器。

修改这是我的代码。

article.emergency = function() {


var secNumber;
var telnum;

var html = '';
appDB.transaction(function(tx) {
     tx.executeSql("SELECT * FROM emergency", [], function(tx, res) {
          if (res.rows.length > 0) {
              for (var i = 0; i < res.rows.length; i++) {

                   function openPopup(index) {
                      //reset its content
                      $('#popupMenu').find('ul').html('<li data-role="divider" data-theme="e">Choose an action</li>');

                      //loop on secondary_num items
                      $.each(res.rows.item(index).secondary_num.split(", "), function(k, v) {
                         $('#popupMenu').find('ul').append('<li><a href="#" onclick="window.open(\'tel:02' + v + '\', \'_system\');">' + v + '</a></li>');
                      });

                      //refresh listView
                      $('#popupMenu').find('ul').listview("refresh");
                      //open popup
                      $('#popupMenu').popup("open", {"transition":"slideup"});
                }


                   var secondary = (res.rows.item(i).secondary_num != 'null') ?  'Secondary Number: ' + res.rows.item(i).secondary_num : '';
                   secNumber = res.rows.item(i).secondary_num.split(", ");
                   console.log(secNumber);
                   /*secondary = secondary.replace(/-/g,"");
                   console.log("Secondary number string : "+secondary);*/
                   console.log(res.rows.item(i).tel_num);
                   telnum = res.rows.item(i).tel_num.split(" to");
                   console.log(telnum);
                   html += '<a href="#" class="category-btn" title="All" rel="external" >'+ res.rows.item(i).name  +' <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+telnum+'\', \'_system\');"> Tel. No.:  ' + res.rows.item(i).tel_num + ' </span> <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+secNumber+'\', \'_system\');"> ' + secondary  +' </span> </a>';
                   //html += '<a href="#" class="category-btn" title="All" rel="external" >'+ res.rows.item(i).name  +' <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+telnum+'\', \'_system\');"> Tel. No.:  ' + res.rows.item(i).tel_num + ' </span> <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+secNumber+'\', \'_system\');"> ' + secondary  +' </span> </a>';
              }

               $('.list-display').html(html); 
          }
     });

}, article.onErr, article.onSuccess);
}

我希望有人可以帮助我。感谢。

Answer 1

假设您的item数组有多个元素，并且您想要使用唯一的popup容器，则必须动态生成其内容（刷新listView小部件）。

您的辅助范围应与

类似

<span onclick="window.openPopup(' + index + ');"> ' + secondary  +' </span>

和你的openPopup函数

function openPopup(index) {
    //reset its content
    $('#popupMenu').find('ul').html('<li data-role="divider" data-theme="e">Choose an action</li>');

    //loop on secondary_num items
    var secNumber = item[index].secondary_num.split(", ");
    for (var i = 0; i < secNumber.length; i++) {
        $('#popupMenu').find('ul').append('<li><a href="#" onclick="window.open(\'tel:02' + secNumber[i] + '\', \'_system\');">' + secNumber[i] + '</a></li>');
    }

    //refresh listView
    $('#popupMenu').find('ul').listview("refresh");
    //open popup
    $('#popupMenu').popup("open", {"transition":"slideup"});
}

在这里，您可以使用简化的结构来完善工作示例：http://jsfiddle.net/phtzwxb6/5/

使用可能的解决方案更新修复代码：

// declared outside
function openPopup(index) {
    //reset its content
    $('#popupMenu').find('ul').html('<li data-role="divider" data-theme="e">Choose an action</li>');

    //loop on secondary_num items
    var secNumber = item[index].secondary_num.split(", ");
    for (var i = 0; i < secNumber.length; i++) {
        $('#popupMenu').find('ul').append('<li><a href="#" onclick="window.open(\'tel:02' + secNumber[i] + '\', \'_system\');">' + secNumber[i] + '</a></li>');
    }

    //refresh listView
    $('#popupMenu').find('ul').listview("refresh");
    //open popup
    $('#popupMenu').popup("open", {"transition":"slideup"});
}

//your enclosure...

article.emergency = function() {
    var secNumber;
    var telnum;

    var html = '';
    appDB.transaction(function(tx) {
            tx.executeSql("SELECT * FROM emergency", [], function(tx, res) {
                    if (res.rows.length > 0) {
                        for (var i = 0; i < res.rows.length; i++) {

                            var secondary = (res.rows.item(i).secondary_num != 'null') ?  'Secondary Number: ' + res.rows.item(i).secondary_num : '';
                            secNumber = res.rows.item(i).secondary_num.split(", ");

                            telnum = res.rows.item(i).tel_num.split(" to");
                            html += '<a href="#" class="category-btn" title="All" rel="external" >'+ res.rows.item(i).name  +' <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+telnum+'\', \'_system\');"> Tel. No.:  ' + res.rows.item(i).tel_num + ' </span> <br> <span style="font-size: 15px;color: #778084;" onclick="window.openPopup(' + i + ');"> ' + secondary  +' </span> </a>';

                        }

                        $('.list-display').html(html); 
                    }
            });

    }, article.onErr, article.onSuccess);
}

动态生成JQM弹出窗口

1 个答案: