社区首页 >问答首页 >设置jQuery移动复选框的样式

问设置jQuery移动复选框的样式
EN

Stack Overflow用户

提问于 2011-08-09 18:35:44

回答 3查看 13.8K关注 0票数 10

我几乎没有使用CSS的经验。

我想设置默认JQuery Checkboxes的样式，以便将选中的图标从左向右移动。

我已经用我的坏蛋绘画技巧来说明我正在寻找的东西。

因此，我并不是要求别人来做这项工作，只是在正确的方向上提出一些建议。

实现这一目标的最佳方法是什么？

谢谢！

jquery-mobile

javascript

jquery

html

css

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-08-09 18:45:44

尝试在jQuery Mobile使用Firebug解析您的代码之后查看呈现的输出。

您将能够看到添加到表单元素的结构和类。jQuery移动添加的类名非常简单易懂。

-更新--

下面是来自firebug的jQuery移动复选框文档：

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
        <fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"><div class="ui-controlgroup-label" role="heading">Agree to the terms:</div><div class="ui-controlgroup-controls">

            <div class="ui-checkbox"><input type="checkbox" class="custom" id="checkbox-1" name="checkbox-1"><label for="checkbox-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-corner-bottom ui-controlgroup-last ui-checkbox-on ui-btn-up-c"><span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">I agree</span><span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span></span></label></div>

        </div></fieldset>
    </div>

请注意"ui-btn-icon-left“类，我会使用它，您可能不只是可以将其更改为"ui-btn-icon-right”，还可以使用它的结构。我已经对其他元素这样做了，但是我还没有使用复选框进行测试。

票数 3

Stack Overflow用户

发布于 2012-01-17 23:56:39

jquery-mobile v1.0具有自定义数据属性，您可以使用该属性调整图标位置。这包括复选框、单选按钮、导航栏和其他元素。

文档：http://code.jquery.com/mobile/latest/demos/docs/buttons/buttons-icons.html

要创建您在上面的问题中绘制的复选框，您的代码应为：

  <input type="checkbox" name="checkbox-name" id="checkbox-id" />
  <label for="checkbox-id" data-iconpos="right">I agree</label>

请注意，data-iconpos已应用于label。这是因为jQuery移动版对这个元素进行了大量的样式化，使其充当前端的UI元素。换句话说，有了这个属性，您就可以将选中/取消选中的图标定位到label的右侧。

注意:如果您尝试解决此属性并将class="ui-btn-icon-right"添加到您的元素，jQuery移动可能会在页面呈现时删除这些类。

票数 20

Stack Overflow用户

发布于 2016-07-31 08:13:20

这现在是通过设置data-iconpos="right"来使用标准API的JQM的一部分。有关更多详细信息，请参见http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/#Iconposition

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/7001124

复制

重绘与回流_html回流重绘

渲染编程算法

浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。也就是我们各种各样的Dom标签

全栈程序员站长

2022/11/01

1.4K0

回流重绘

渲染 css

HTML默认是流式布局，css与js会打破这种布局，改变DOM的几何属性与外观属性。在绘制时根据渲染树布局，再根据布局绘制，这就是回流重绘。

岳泽以

2022/11/21

6390

重排与重绘

css

原文地址：http://www.cun-xu.cn/index.php/2018/12/25/重排与重绘/

IMWeb前端团队

2019/12/03

1.2K0

回流和重绘

编程算法

我们要明确页面在文档加载完成之后到完全显示中间的过程是根据文档生成DOM树（包括display:none的节点）在DOM树基础上根据节点的几何属性（margin/padding/width/height等)生成render树（不包括display:none、head节点但会包含visibility:hidden节点）在render树基础上进行进一步渲染包括color,outline等样式 reflow: 当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流 rep

念念不忘

2019/03/29

8800

“重绘” 和 “重排”

css

重绘是指一个元素外观改变所触发的浏览器行为，大概就是外观属性的改变，像，背景颜色，等

用户3055976

2019/10/31

8030

HTML中的重绘与回流

html

在认识重绘和回流之前，我们先认识一下一个页面加载的时候，会发生什么？　　页面加载时，生成一个DOM树，DOM Tree里包含了构成页面所有的标签。Style Sheets（CSS样式表）会生成一个Style Rules。当DOM Tree和Style Rules一起构建出了Render Tree，对于Render Tree的理解：Render Tree和DOM Tree类似，但是Render Tree能够识别样式，在Render Tree上，每一个node（节点）都有自己的Style（样式），但隐藏的节点或是不会用于显示的部分不会包含在Render Tree上。

刘亦枫

2020/03/19

1.5K0

浏览器的重排重绘

github css https git 开源

完整高频题库仓库地址：https://github.com/hzfe/awesome-interview

HZFEStudio

2021/09/12

1.1K0

MFC-4简单的窗口重绘（非部分重绘）

#include <afxwin.h> #include "resource.h" #include <afxtempl.h> //定义模板类的头文件 class MyDocument : public CDocument { public: CArray<CPoint,CPoint &> pArray;//<保存的数据类型,读取保存数据类型的返回值> void AddPoint(CPoint p) { pArray.Add(p); } CPoint GetPoint(int i) {

liulun

2022/05/09

6900

页面优化——重绘和回流[通俗易懂]

渲染 https 网络安全

一、写在前面页面优化在面试的过程中经常遇到的问题，今天就来总计一下重绘和回流的问题。二、重绘和回流是什么我们都知道一个页面从加载到完成，首先是构建DOM树，然后根据DOM节点进行几何布局形成render树(渲染树)，当渲染树构建完成后，页面就根据DOM树开始布局，渲染树也根据设置的样式渲染这些节点。在这一过程中，比如我们删除DOM节点，修改一个元素的宽高，页面布局发生变化，DOM树也发生变化，那么肯定要重新构建DOm树，而DOM树和渲染树紧密相连，DOM树渲染完了，渲染树也会随之进行渲染，这个过程就称为回流。在比如说，我们给一个元素修改颜色，这样的行为是不会影响页面的布局的，DOM树不会发生改变，但是颜色变了，渲染树得重新绘制，这就是重绘。所以说回流一定会触发重绘，重绘不一定触发回流。题外话： 1、由于display:none的元素不在页面渲染，渲染树的构建不包含这些节点。但是visibility为hidden的元素会在渲染树中。因为display为none会脱离文档流，visibility为hidden虽然看不到，但类似与透明度为0，其实还在文档流中，还是有渲染的过程。 2、尽量避免使用表格布局，当我们不给表格的td设置固定的宽度的时，一列的td的宽度会以最宽的td的宽作为渲染的标准，假设前几行的td在渲染时都渲染好了，结果下面的某行特别宽，table为了统一宽度，前几行的td会回流重新计算宽度，这是一个比较耗时的操作。三、怎么样减少回流回流会重构DOM树，渲染树也得重新渲染，比较麻烦，哪些行为可以引发回流，如何去避免呢？ 1、DOM的删除行为比如删除某个节点，或者给父元素插入子节点，这类操作都会触发回流。如果我们插入多个子节点的话，可以使用documentfragment。 2、几何属性的变化比如说元素的宽度变了，border变了，字体大小变了，这种直接会引发页面的布局的改变，也会触发回流。如果我们需要改变多个属性，做好的是将这些改变定义在一个class中，直接修改class名，这样只会触发一次回流。 3、元素的位置发生改变修改一个元素的左右margin，padding之类的操作，所以在元素位移的动画，不要更改margin之类的值，使用定位脱离文档流后进行改变位置。 4、获取文章的偏移量之类的属性例如我们需要获取scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性的时候，浏览器为了保证值的正确性也会回流进行获取，所以如果你要不多次操作，最好取完进行缓存。 5、页面初次渲染触发回流页面的初次渲染触发回流这样无法避免。 6、浏览器窗口尺寸的改变 resize事件的发生也会触发回流。

全栈程序员站长

2022/11/17

9460

JS引发页面重排重绘的代价

javascript

示例目标是修改div内容，3种实现方式，看下每种方式的执行时间 <html> <body> <div id="myDiv1"></div> <div id="myDiv2"></div> <div id="myDiv3"></div> <script> var times = 10000; // 方式1 console.time(1); for(var i = 0; i < times; i++) { document.getElementById('myDiv1').innerHTML += 'a'

dys

2018/04/02

1.2K0

DOM优化之重绘和回流

android javascript 渲染费用中心

浏览器内核中的JS 引擎和渲染引擎是独立存在的，当我们用JS去操作DOM时，本质上是JS引擎和渲染引擎之间进行的“跨界交流”。

九旬

2020/10/23

9020

使用重绘项美化WinForm中的控件

编程算法

如果你觉得项目中的ComboBox、ListBox或其它的Winforms控件不能满足你的显示要求，包括窗体在内很多控件都支持重绘修改显示样式。下面的示例完成对ComBox数据项的重绘，希望能起到抛砖引玉的作用。

张果

2022/05/09

1.1K0

你真的了解回流和重绘吗

html

回流和重绘可以说是每一个web开发者都经常听到的两个词语，我也不例外，可是一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享，所以对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合自己的体会，写了这篇文章，希望可以帮助到大家。

嘿嘿嘿

2018/12/25

1.3K0

浏览器的回流与重绘 (Reflow & Repaint)

css

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。会导致回流的操作：

Nealyang

2019/09/29

6890

重绘和回流（Repaint & Reflow），如何优化

css node.js

由于节点的几何属性发生改变或者由于样式改变而不影响布局的，称为重绘，例如outline,visibility,color,background-color等，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点的可见性。

刘嘿哈

2022/10/25

7820

浏览器的渲染流程--重排、重绘、合成

css 渲染编程算法

定义：当通过JS或css改变了元素的宽度、高度等，修改了元素的几何位置属性，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排。无疑，重排需要更新完整的渲染流水线，所以开销也是最大的。

用户7741497

2022/03/06

1.1K0

页面重绘和回流（重排）以及优化

其他

1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。 2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。回流何时发生：

windseek

2018/06/15

1K0

什么是回流与重绘 (Reflow & Repaint)

node.js css api

在讨论今天的主角之前，我们要先了解一下浏览器的渲染机制。以Google,Firefox,Safari为例，Firefox 使用Geoko——Mozilla 自主研发的渲染引擎，Safari 和Chrome 都使用 webkit。

w候人兮猗

2020/12/21

8780

你真的了解回流和重绘吗

其他

最近有空对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合一些例子，写了这篇文章，希望可以帮助到大家。

嘿嘿嘿

2018/12/19

5K4

浏览器渲染之回流重绘

渲染 https http 网络安全 css

回流和重绘是前端开发的高频词汇之一，你可以在各种面经，性能优化相关文章可以看到，但是很多都是草草带过。本文带你从浏览器渲染流程中了解回流与重绘的原理。

政采云前端团队

2021/09/30

1.7K0

相似问题

SvelteJS与ReactJS呈现差异(重绘/再流)

如何强制reactJS重绘？

快速重绘视图

重绘视图Android

视图不会重绘

活动推荐

助力在校大学生快速入门云计算，畅游云端

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例