【问题标题】:Rounded corners for primefaces radion buttonsprimefaces 单选按钮的圆角
【发布时间】:2013-01-07 08:54:02
【问题描述】:

当使用单选按钮时,在 IE 8 中避免角落问题的正确用法是什么? 例如

我的数据表中有<p:column id="rad" selectionMode="single" />

在 IE 8 中,单选按钮呈现为复选框,即在一个方框中。所以为了解决这个问题,我使用了

<h:outputScript library="primefaces" name="jquery/jquery.js">
$(document).ready(function() {
          $('rad').corner();      
    });
</h:outputScript>

但这并没有解决问题。

那么为单选按钮设置圆角的正确方法是什么?

谢谢

编辑 1

<h:head>

<style type="text/css">
   <![CDATA[


      .radio input 
{
    position: absolute;
    left: -9999px;
}

.label_radio 
{
    background: url("/radio_labels.jpg") no-repeat scroll 0 0 transparent;
    height: 1em;
    width: 1em;
}

.label_radio.r_on 
{
    background-position: 0 -18px;
}

.radio label 
{
    display: inline;
    padding-bottom: 0.1em;
    padding-right: 1.9em;
}


   ]]>
</style>
</h:head>


<h:outputScript>
    $(document).ready(function() {
    alert("1");
    $('.rad label').addClass('label_radio');
if ($('.rad input').length) {
    $('.rad input').each(function () {
        $(this).next('label').removeClass('r_on');
    });
    $('.rad input:checked').each(function () {
        $(this).next('label').addClass('r_on');
    });
};

    });
</h:outputScript>

和数据表中的单选按钮。

<p:column  id="rad" selectionMode="single"  />

【问题讨论】:

  • 图像是迄今为止在 IE 中获得圆角的最佳解决方案 :)

标签: jquery jsf-2 primefaces


【解决方案1】:

这就是我的做法:

CSS:

.radio input 
{
    position: absolute;
    left: -9999px;
}

.label_radio 
{
    background: url("images/buttons/radio_labels.jpg") no-repeat scroll 0 0 transparent;
    height: 1em;
    width: 1em;
}

.label_radio.r_on 
{
    background-position: 0 -18px;
}

.radio label 
{
    display: inline;
    padding-bottom: 0.1em;
    padding-right: 1.9em;
}

jQuery:

$('.address_type label').addClass('label_radio');
if ($('.address_type input').length) {
    $('.address_type input').each(function () {
        $(this).next('label').removeClass('r_on');
    });
    $('.address_type input:checked').each(function () {
        $(this).next('label').addClass('r_on');
    });
};

HTML:

<div class="address_type clear width">
<span class="radio twelvepx">
<input id="rbDelAddr" type="radio" value="0" name="AddrType">
<label class="label_radio" for="rbDelAddr">Delivery Address</label>
</span>
<span class="radio twelvepx">
<input id="rbInvAddr" type="radio" value="-1" name="AddrType">
<label class="label_radio" for="rbInvAddr">Billing Address</label>
</span>
</div>

【讨论】:

  • address_type可以替换成rad吗?我在哪里可以得到radio_labels.jpg
  • 你可以用任何你想要的替换address_type,因为它只是一个类名。您可以自己创建radio_labels.jpg 图片或在谷歌图片等上查找。
  • 我所做的和你提到的完全一样,但是我仍然将单选按钮视为方形框。我还有什么需要修改的吗?
  • 添加了HTML 示例以更清晰。如果您仍在使用此行$('rad').corner();,也许您会看到方框?
  • 我已通过编辑我的问题将修改后的代码作为编辑 1 包含在内。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-05-17
  • 2011-05-04
  • 2013-10-01
  • 1970-01-01
  • 2013-02-17
  • 1970-01-01
相关资源
最近更新 更多