标签: jquery-ui-button

我一直在我的页面上使用jQuery UI按钮,但是我还没有找到解决似乎是一个简单问题的方法.我希望我的一些按钮比另一个小,这应该像设置按钮文本的CSS一样简单,font: .8em;但是jQuery UI采用你的DOM元素并包装它:

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
   <span class="ui-button-text">Button Label</span>
</button>

因此,如果我有一个<button class="small-button">Small button!</button>jQuery将文本放在子跨度.给予small-button该类的任何字体大小都将被忽略.

必须要解决这个问题,而不要犹豫jQuery如何制作按钮.有任何想法吗？

有没有一种简单的方法来改变jQuery UI Button的颜色？不鼓励修改css文档,这样做无论如何都很棘手.他们说,"我们建议使用ThemeRoller工具来创建和下载易于构建和维护的自定义主题." 我理解如何更改主题,但是如何在同一页面上获得不同的彩色按钮？

几周前我在jquery论坛上问了这个没有运气,所以我会在这里再试一次:)

我为我正在研究的项目制作了一个简单的小部件,但我遇到了一个奇怪的问题.

用示例实现来解释它是最容易的. http://decko.dk/buttontest

在页面上有3个按钮.第一个是我的下拉小部件.下一个是常规禁用按钮(A),最后一个是常规启用按钮(B).如果您然后刷新页面(按F5或其他),启用按钮现在神秘地被禁用.我不知道为什么会发生这种情况,但如果按钮A没有被禁用,则刷新时不会禁用按钮B. 此外,如果我在我的小部件代码中删除对insertAfter的调用,则不会禁用该按钮.任何人都可以阐明为什么会出现这种奇怪的行为？

顺便说一句,我只能在Firefox中重现这一点.

使用jQuery UI我有两个单选按钮,Approve/Reject,我想独立地设置样式,所以当选择'Approve'时,它将是蓝色,当选择'Reject'时,它将是红色:

为我可怕的红色按钮样机道歉:-)希望这会让你知道我在追求什么.我已经尝试更改两个按钮/标签的类,但这不会反映到jQuery-UI叠加层上.

这是我当前的代码,它生成按钮,并根据选择显示刻度线或十字形:

$('.approvedToggle').buttonset();

$('input:radio').click(function() {
    if($(this).val() === 'approve') {
        $(this).parent('div').children(".tick").show();
        $(this).parent('div').children(".cross").hide();
    } else {
        $(this).parent('div').children(".tick").hide();
        $(this).parent('div').children(".cross").show();
    }
});

任何帮助将不胜感激 - 谢谢!

是否可以使用自定义图标创建一个jQueryUI按钮,即:一个图标不是jQueryUI提供的精灵图标的一部分？

我使用ButtonSet功能为一组3个复选框,但需要一个比开箱即用的更加风格化的图标...

<script>
    $(function() 
    {
        $( "#dynabutton" ).button(
        {
            icons: 
            {
                primary: "ui-icon-gear"
            },
            text: false
        });

        $( "#swap" ).button(
        {
            icons: 
            {
                primary: "ui-icon-locked"
            },
            text: true
        }).click(function(event)
        {
            // change #dynabutton icon from
            // "ui-icon-gear"
            // to:
            // "ui-icon-locked"
        });         
    });
    </script>



<div class="demo">

<button id="dynamic_button">Button with gear icon</button>
<button id="swap">Swap icons</button>

</div>

在的点击#swap按钮,我想切换图标(jQueryUI的图标关联)#dynabutton从ui-icon-gear到ui-icon-locked.

但我不知道这是否得到支持？

为什么JQuery UI选项按钮(buttonset)没有任何事件 - 我想为它处理选择事件,想知道这样做的正确方法是什么.

我在一个表格中使用jQuery UI 按钮小部件,我需要验证一些无线电/复选框元素.

根据提供的链接中的演示 -

它们(原始元素)关联标签的样式显示为按钮,而基础输入在单击时更新.

如果您检查我提供的示例页面,基础按钮元素不会更新任何内容. Note - 默认情况下会检查示例中的中间单选按钮.

我使用以下代码来检测按钮状态 - 奇怪的是它始终是真的(认为它是假的).

$el = $("#someCheckbox");
if($el.attr('checked')){ //do stuff }

看起来我可以从标签jquery ui用作按钮样式获取按钮状态(a la class="ui-state-active),但我想避免阅读标签并坚持验证实际的单选按钮.

我是否通过访问原始单选按钮来拉取表单数据错误？

要么

这可能是jquery ui butotn小部件中的错误吗？

我是jQuery的新手,并且认为我会在我的应用程序中使用它的buttonset而不是一些单选按钮.文档:http: //jqueryui.com/demos/button/#radio

当按钮组更改值时,如何为事件添加处理程序？

这是我尝试的代码片段:

$('input.tod_quant').change(function() {
    alert('TEST');
});

然后在HTML中:

<span id="tod_quant" class="buttonset">
        <input type="radio" id="tod_quant5" name="tod_quant" value="5" /><label for="tod_quant5">5-Minute</label>
        <input type="radio" id="tod_quant60" name="tod_quant" checked="checked" value="60" /><label for="tod_quant60">60-Minute</label>
        </span>

"改变"事件永远不会发生.甚至有变化事件吗？我怎样才能做到这一点？此外,是否有任何文档的例子？ http://jqueryui.com有很多例子,我找不到任何一个例子可以显示任何事件.我想我对jQuery的无知并不完全有助于这种情况.

非常感激任何的帮助.谢谢.

我正在为移动电话编写一个Web应用程序,我希望所有复选框都是带有"检查"或"交叉"的按钮,以及复选框的文本.我有一个使用jQuery UI的工作解决方案,但它看起来并不优雅.有人可以建议任何改进吗？

这是代码:

$(function () {
    $("input[type=checkbox]")
    .button({ icons: { primary: "ui-icon-circle-close"} })
    .click(function () {
        if (this.checked) {
            $(this).button("option", "icons", { primary: 'ui-icon-circle-check' })
        }
        else {
            $(this).button("option", "icons", { primary: 'ui-icon-circle-close' })
        }
    });
    $("input[type=checkbox]:checked")
    .button({ icons: { primary: "ui-icon-circle-check"} })
    .click(function () {
        if (this.checked) {
            $(this).button("option", "icons", { primary: 'ui-icon-circle-check' })
        }
        else {
            $(this).button("option", "icons", { primary: 'ui-icon-circle-close' })
        }
    });
});