- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想知道如何动态增强 jQuery Mobile 页面?
我曾尝试使用这些方法:
$('[data-role="page"]').trigger('create');
和$('[data-role="page"]').page();
最佳答案
免责声明:
这篇文章也可以在我的博客 HERE 中找到。
介绍:
有多种方法可以增强动态创建的内容标记。仅将新内容动态添加到 jQuery Mobile 页面是不够的,必须使用经典的 jQuery Mobile 样式增强新内容因为这是处理繁重的任务,所以需要一些优先级,如果可能的话 jQuery Mobile 需要做尽可能少的增强。如果只需要设置一个组件的样式,则不要增强整个页面。
这一切意味着什么?当页面插件调度 pageInit 事件时,大多数小部件使用它来自动初始化自己。它将自动增强它在页面上找到的小部件的任何实例。
但是,如果您在客户端生成新标记或通过 Ajax 加载内容并将其注入(inject)页面,则可以触发 create 事件来处理新标记中包含的所有插件的自动初始化。这可以在任何元素(甚至页面 div 本身)上触发,从而为您省去手动初始化每个插件( ListView 按钮、选择等)的任务。
考虑到这一点,让我们讨论增强级别。其中有三个,它们从资源需求较低的到较高的排序:
Important: The below enhancement methods are to be used only on current/active page. For dynamically inserted pages, those pages and their contents will be enhanced once inserted into DOM. Calling any method on dynamically created pages / other than the active page, will result an error.
$('#mylist').listview('refresh');
$('#mylist li').eq(0).addClass('ui-screen-hidden');
$(document).on('pagebeforeshow', '#index', function(){
$('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]');
$('<li>').append('<a href="#">Audi</a>').appendTo('#test-listview');
$('<li>').append('<a href="#">Mercedes</a>').appendTo('#test-listview');
$('<li>').append('<a href="#">Opel</a>').appendTo('#test-listview');
$('#test-listview').listview().listview('refresh');
});
$('[type="button"]').button();
$('[data-role="navbar"]').navbar();
$('[type="text"]').textinput();
$('[type="range"]').slider();
$('[type="radio"]').checkboxradio();
$("input[type='radio']").eq(0).attr("checked",false).checkboxradio("refresh");
$("input[type='radio']").eq(0).attr("checked",true).checkboxradio("refresh");
$('select').selectmenu();
$(".selector").table("refresh");
$('.selector').trigger('pagecreate');
$('.selector').trigger('pagecreate');
$('#index').trigger('create');
$('#index').trigger('pagecreate');
(function($) {
/*
* Changes the displayed text for a jquery mobile button.
* Encapsulates the idiosyncracies of how jquery re-arranges the DOM
* to display a button for either an <a> link or <input type="button">
*/
$.fn.changeButtonText = function(newText) {
return this.each(function() {
$this = $(this);
if( $this.is('a') ) {
$('span.ui-btn-text',$this).text(newText);
return;
}
if( $this.is('input') ) {
$this.val(newText);
// go up the tree
var ctx = $this.closest('.ui-btn');
$('span.ui-btn-text',ctx).text(newText);
return;
}
});
};
})(jQuery);
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
Google maps api3
演示:
http://jsfiddle.net/Gajotres/7kGdE/
function getRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
return content_height;
}
data-enhance="false"
$(document).one("mobileinit", function () {
$.mobile.ignoreContentEnabled=true;
});
$('#index').live('pagebeforeshow', function (event) {
$.mobile.ignoreContentEnabled = false;
$(this).attr('data-enhance','true');
$(this).trigger("pagecreate")
});
data-role="none"
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select, input";
});
cannot call methods on listview prior to initialization
$('#mylist').listview().listview('refresh');
!important
覆盖来完成。没有它,默认 css 样式无法更改。
#navbar li {
background: red !important;
}
jsFiddle
示例:
http://jsfiddle.net/Gajotres/vTBGa/
关于javascript - jQuery 移动 : Markup Enhancement of dynamically added content,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14550396/
我重新下载了 Eclipse Juno 并安装了 Google App Engine SDK。在此之后,每当我开始 eclipse 时,我都会收到错误 Could not find the main
我安装了 Google Plugin for Eclipse 并创建了一个新的 Google App Engine 项目,如 https://developers.google.com/appengi
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the he
我想使用WebKit的box-shadow css属性进行一些下拉。代码如下所示: .drop_down{ -webkit-box-shadow: 1px 1px 4px #888; box-
我正在迭代 String 对象列表的元素一个接一个: LinkedList list; // add values to the list here for (int i = 0; i < list.
您好,我正在将 signalR 与 ASP.Net Webforms 一起使用。对于普通页面来说它工作正常。但对于母版页继承的页面,在该行 var chatHub = $.connection.cli
This问题讨论了渐进增强。我的问题是关于替代类型的 Web 应用程序。如果你有一个 UI 几乎完全用 Javascript 构建的 Web 应用程序,不会优雅地降级,具有桌面感觉等,那么这种 Web
所以我的理解是增强的 for 循环应该更慢,因为它们必须使用迭代器..但是我的代码提供了混合结果..(是的,我知道循环逻辑占用了循环中花费的大部分时间) 对于少量迭代(100-1000),增强的 fo
我有一个像这样定义的特征: @Enhances(ControllerArtefactHandler.TYPE) trait NullCheckTrait { def nullCheck(def
考虑这段代码: for (int value : values) { values[value] = -values[value] - 1; } 当迭代过程到达适当的元
我正在尝试使用 CoreNLP (Java) 对大量产品评论进行情绪分析。总的来说,我发现分析的准确性非常好。根据我的阅读,我使用的模型最初是使用电影评论创建的(我认为),因此它不是 100% 适合分
简短的问题:Bitbucket 问题跟踪器中的任务和增强之间有什么区别?有什么经验法则、最佳实践吗? 最佳答案 任务是某些开发事件的通用标签,而增强功能则非常清楚如何使用它,例如完善用户体验、优化等。
我对 Objective C/iOS 开发比较陌生,所以我意识到这似乎是一个基本问题:对于 iOS 5+,我正在寻找有关如何创建包含各种数据的单元格的 tableview 的入门知识。例如,在我的数据
我正在迭代一系列对象(不同的网站类型)。但我希望能够显示哪个网站的成员(member)数量最多。最初,我的代码显示每个网站的成员(member)数量,但我的代码不完整,因为我不确定如何比较对象以查看哪
我正在使用带有分页和嵌套排序插件的 Dojo 增强型网格。在网格中,当我单击列标题上的向下箭头时,元素未正确排序。假设如果我有:哈尔阿马尔内存1内存体21个2 所以当我对它们进行排序时,它们变成了:1
我已按照 Google Documentation 中的步骤操作.我已将分析帐户配置为显示增强报告。我已经尝试了文档示例中的所有可能性,但没有成功。我也在 iOS 中尝试过,但结果相同。有什么原因吗?
作为 Google App Engine 项目的一部分,我正在使用 DataNucleus,但我在持久性列方面遇到了一些麻烦。 @PrimaryKey(column = "user_id") @Col
我的一个常见问题如下: 作为我的输入(n 是一些 int >1) W = numpy.array(...) L = list(...) 在哪里 len(W) == n >> true shape(L)
假设我有两个 C++ 函数 foo1() 和 foo2(),我想尽量减少 foo1() 开始执行但 foo2() 由于某些外部事件而未被调用的可能性。我不介意两者都没有被调用,但是如果调用了 foo1
我正在研究进程同步,改进版本的游泳池问题: Bathers want to go to the swimming pool: They have to take an empty basket The
我是一名优秀的程序员,十分优秀!