jQuery Mobile Radio 字段集具有不同的样式 [英] jQuery Mobile Radio fieldset has different styling

查看:24
本文介绍了jQuery Mobile Radio 字段集具有不同的样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这两个 jQuery Mobile 复选框具有不同的样式,但是我相信我正在以非常相似的方式创建它们.我动态附加的顶部框,底部框是硬编码的.有人知道为什么会出现这种风格差异吗?

用于保存字段集的 Div

</fieldset>

附加单选按钮

$('#surveyViewer').append('<legend>Survey Preview:</legend><input type="radio" name="options" id="1" value="1"/><label for="1">1</label><input type="radio" name="options" id="2" value="2"/><label for="2">2');

这行刷新样式:

$('#surveyViewer').trigger("create");$("input[type='radio']").checkboxradio("refresh");

解决方案

当您动态加载前两个时,您的所有 CSS 都不会被应用.

在将内容添加到的元素上添加 .trigger("create").

参见此处:jQuery Mobile 不应用样式动态添加内容后

更新

<块引用>

但是,如果您在客户端生成新的标记或通过以下方式加载内容Ajax 并注入到页面中,可以触发create事件处理包含在其中的所有插件的自动初始化新标记.这可以在任何元素上触发(甚至页面div 本身),省去了手动初始化每个插件的任务(列表视图按钮、选择等).

例如,如果加载了一个 HTML 标记块(比如一个登录表单)在通过ajax,触发create事件自动转换它包含的所有小部件(在这种情况下是输入和按钮)到增强版.这个场景的代码是:

$( ...包含小部件的新标记... ).appendTo( ".ui-page" ).trigger( "create" );

更新 #2

//HTML<a id="myButton" href="" data-role="button" data-theme="e">添加单选</a><div id="radiodiv1"><fieldset id="surveyViewer" data-role="controlgroup"></fieldset>

//JS$( "#myButton" ).bind( "click", function(event, ui) {$("#surveyViewer").append('<legend>Survey Preview:</legend><input type="radio" name="options" id="1" value="1"/><;label for="1">1');$("#radiodiv1").trigger("create");});

我创建了一个 JSfiddle 来说明解决方案.我在我的 iPad 上做了所有这些(不客气)所以如果这对你有用,请至少将其标记为正确答案,哈哈.这是链接(基于通过单击按钮添加单选按钮)

工作示例:http://jsfiddle.net/nsX2t/

These two jQuery Mobile checkboxes have different styling, however I believe I am creating them in very similar ways. The top boxes I am appending dynamically, where as the bottom box is hardcoded. Does anybody know why this is this discrepancy in styles?

Div to hold fieldset

<fieldset id="surveyViewer" data-role="controlgroup">
  </fieldset>

Appending radio buttons

$('#surveyViewer').append('<legend>Survey Preview:</legend><input type="radio" name="options" id="1" value="1" /><label for="1">1</label><input type="radio" name="options" id="2" value="2" /><label for="2">2</label>');

This line to refresh styling:

$('#surveyViewer').trigger("create");
$("input[type='radio']").checkboxradio("refresh");

解决方案

All of your CSS is not being applied when you are dynamically loading the top two.

Add .trigger("create") on the element that gets the content added to.

See here: jQuery Mobile does not apply styles after dynamically adding content

UPDATE

However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).

For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

UPDATE #2

// HTML
<a id="myButton" href="" data-role="button" data-theme="e">Add Radio</a>

<div id="radiodiv1">
<fieldset id="surveyViewer" data-role="controlgroup"></fieldset>
</div>

// JS 
$( "#myButton" ).bind( "click", function(event, ui) {

     $("#surveyViewer").append('<legend>Survey Preview:</legend><input type="radio" name="options" id="1" value="1" /><label for="1">1</label><input type="radio" name="options" id="2" value="2" /><label for="2">2</label>');

     $("#radiodiv1").trigger("create");

});

I created a JSfiddle to illustrate a solution. I did all this on my iPad (you're welcome) so if this works for you, PLEASE at least mark it as the correct answer lol. Here's the link (based on adding the radio buttons via a button click)

WORKING EXAMPLE: http://jsfiddle.net/nsX2t/

这篇关于jQuery Mobile Radio 字段集具有不同的样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆