首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >带有单选按钮的jquerymobile文本输入

带有单选按钮的jquerymobile文本输入
EN

Stack Overflow用户
提问于 2013-07-03 16:47:56
回答 1查看 1.4K关注 0票数 1

这是我的演示http://jsfiddle.net/PZGQp/3/

在“group 1”中,我有一个单播组作为垂直控制组。

我尝试在每个单选按钮的右侧放置一个文本字段-如'group 2‘(下面的代码)所示。

有没有可能在保留单选按钮的控制组行为的同时做到这一点--如果不能做到这一点,单选按钮上的圆角而不是方角?

代码语言:javascript
复制
<fieldset data-role="controlgroup"   data-theme="b">
  <table width="100%">
    <tr>
      <td width="80%"><input type="radio" id="radio-1"  value="" class="radioclass" />
        <label for="radio-1">1</label></td>
      <td width="10%"><input type="text" placeholder="Qty" id="qty"></td>
    </tr>
    <tr>
      <td width="80%"><input type="radio" id="radio-2"  value="" class="radioclass" />
        <label for="radio-2">2</label></td>
      <td width="10%"><input type="text" placeholder="Qty" id="qty"></td>
    </tr>

      <td width="80%"><input type="radio" id="radio-3"  value="" class="radioclass" />
        <label for="radio-3">3</label></td>
      <td width="10%"><input type="text" placeholder="Qty" id="qty"></td>
    </tr>
  </table>
</fieldset>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-07-03 17:10:39

我希望我没听错。

Working jsFiddle示例:http://jsfiddle.net/Gajotres/uwq8b/

使用的HTML:

代码语言:javascript
复制
<div class="ui-grid-a">
    <div class="ui-block-a">
        <fieldset data-role="controlgroup"  data-theme="a">
            <input type="radio" id="radio-1"  name="radio-1" value="" class="radioclass" />
            <label for="radio-1">1</label>

            <input type="radio" id="radio-2"  name="radio-1" value="" class="radioclass" />
            <label for="radio-2">2</label>

            <input type="radio" id="radio-3"  name="radio-1" value="" class="radioclass" />
            <label for="radio-3">3</label>
        </fieldset>        
    </div>
    <div class="ui-block-b">
        <input type="text" placeholder="Qty" id="qty"/>
        <input type="text" placeholder="Qty" id="qty"/>
        <input type="text" placeholder="Qty" id="qty"/>
    </div>
</div><!-- /grid-a -->

使用的CSS:

代码语言:javascript
复制
.ui-block-a {
    width: 80% !important;
    padding-top: 0.5em;
}

.ui-block-b {
    width: 20% !important;
    padding-top: 0.5em;    
}

fieldset.ui-controlgroup {
    margin: 0 !important;
}

div.ui-input-text {
    margin: 0 0 0.3em 0 !important;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17443539

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档