JQuery Mobile 1.3 选择菜单动态刷新
Posted
技术标签:
【中文标题】JQuery Mobile 1.3 选择菜单动态刷新【英文标题】:JQuery Mobile 1.3 Select menu dynamic refresh 【发布时间】:2013-04-24 07:05:56 【问题描述】:您好,我正在使用 JQM 1.3 和 JQuery 1.9.1...我尝试让动态选择菜单在没有解决方案的情况下工作。
首先我在 pagebeforeshow 事件中使用 createDocument(div...) 和 .setAttribute(id,...) 创建一个选择菜单。然后我使用了很多变化的第一行,第二行和组合..
$("#select-keywords-list").selectmenu();
$("#select-keywords-list").selectmenu("refresh");
对我来说还没有任何效果..
添加后,我在 Domready($(#page).ready) 函数中收听更改事件。 在浏览器中它工作得很好,但在手机上我无法让它工作。希望有人可以帮助我。
我也试过原生菜单真假..
谢谢
错
【问题讨论】:
【参考方案1】:工作示例:http://jsfiddle.net/Gajotres/dEXac/
$(document).on('pagebeforeshow', '#index', function()
// Add a new select element
$('<select>').attr('name':'select-choice-1','id':'select-choice-1','data-native-menu':'false').appendTo('[data-role="content"]');
$('<option>').html('Select option!').appendTo('#select-choice-1');
$('<option>').attr('value':'1').html('Value 1').appendTo('#select-choice-1');
$('<option>').attr('value':'2').html('Value 2').appendTo('#select-choice-1');
// Enhance new select element
$('select').selectmenu();
$(document).on('change', '#select-choice-1', function()
alert($(this).find("option:selected").text());
);
);
还有一点,不要使用 jQuery Mobile 准备好的文档,它们不能一起正常工作。而是使用 pageinit 事件。如果您想了解更多信息,请查看此处:jQuery Mobile: document ready vs page events
【讨论】:
您好,感谢您的快速响应,我在我的应用程序中尝试了您的代码...即使在我的浏览器中也无法正常工作,我使用 jqm 和 phonegap 开发了一个应用程序... 我尝试了更多的东西,如果我发现问题会写在这里 你用的是什么浏览器?此代码已在桌面浏览器、iPad 和 android 4.1.1 上进行了测试。 我使用chrome v26和ripple和模拟器,还有一个android 4.1.1设备进行测试.. 我得到了它与 $(id).selectmenu() 和 $(id).selectmenu("refresh") ty 的帮助【参考方案2】:我知道使用模板引擎可能更容易,但我尝试过这种方式
function renderItemsKeywords(results)
var elementRoot = document.createDocumentFragment();
var elementDiv = document.createElement("div");
elementDiv.setAttribute("data-role", "fieldcontain");
var elementL = document.createElement("label");
elementL.setAttribute("for", "select-keywords-list");
elementL.setAttribute("class", "select");
elementL.appendChild(document.createTextNode("Wähle Eintrag:"));
var elementSel = document.createElement("select");
elementSel.setAttribute("name", "select-keywords-list");
elementSel.setAttribute("id", "select-keywords-list");
elementSel.setAttribute("data-native-menu", "true");
var elementOptD = document.createElement("option");
elementOptD.setAttribute("data-placeholder", "true");
elementOptD.appendChild(document.createTextNode("Wähle Eintrag"));
elementSel.appendChild(elementOptD);
var allKeywords = $().checkKeywords(results);
$.each(allKeywords, function(i, item)
var elementOptAll = document.createElement("option");
elementOptAll.setAttribute("value", item);
elementOptAll.appendChild(document.createTextNode(item));
elementSel.appendChild(elementOptAll);
);
//alert(elementSel.length());
elementDiv.appendChild(elementL);
elementDiv.appendChild(elementSel);
var elementDivKey = document.createElement("div");
elementDivKey.setAttribute("id", "keylist");
elementRoot.appendChild(elementDiv);
elementRoot.appendChild(elementDivKey);
return elementRoot;
;
比其他部分
case 'keywords':
html = renderItemsKeywords(itemData);
$header.find("h1").html("Title");
$content.html(html);
$page.page();
$footer.find(":jqmData(role=navbar)").navbar();
$content.find(":jqmData(role=listview)").listview();
$("#select-keywords-list").selectmenu();
$("#select-keywords-list").selectmenu("refresh");
break;
$.mobile.changePage($(this));
希望你明白我在做什么
【讨论】:
问题是我的选择菜单以正确的方式呈现,但是如果我点击选择菜单它不会被打开..如果我使用 data-native-menu false 它打开但只有当我击中 7/8 次时才会出现真正的错误......以上是关于JQuery Mobile 1.3 选择菜单动态刷新的主要内容,如果未能解决你的问题,请参考以下文章
jQuery Mobile 自定义选择菜单适用于 Mobile Safari,但不适用于 UIWebView