问候,
所以我尝试手动将 jQuery CSS 类应用到我的元素,这样用户就不会在我的 javascript 样式化所有内容时出现“flash”,这样没有启用 JavaScript 的用户就会看到 purdyness。
所以这是一个按钮的例子。我已经应用了所有类(class) .button()
调用将以相同的方式添加和构建我的标记。
<button id="my-button" type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary">
<span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>
<span class="ui-button-text">Doit!</span>
</button>
它本身看起来很棒!当然,它没有悬停样式等,但这是预料之中的。
然后我应用我的 Javascript:
$('#my-button').button();
jQuery UI 似乎不知道现有的类/标记,它把我可爱的按钮变成了这个:
<button id="my-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" type="submit" role="button" aria-disabled="false">
<span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>
<span class="ui-button-text">
<span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>
<span class="ui-button-text">Doit!</span>
</span>
</button>
最后我的问题是:
如何手动/不使用 javascript 应用 CSS 类,但仍然使用 javascript 函数来添加交互功能?
编辑:好的,.button()
生成的标记不完全是我在那里发布的 ^^ 那是 .button(
使用图标参数调用。问题是一样的,通过一个简单的 .button() 调用,它只是将所有内容包装在 <span class="ui-button-text
中。
最佳答案
您可以先清除按钮,然后运行 .button() 来重新创建您的 ui 按钮
$('#my-button').html(function(){return $(this).text();}).button({ icons: {primary:'ui-icon-plus'}});
关于jquery - 手动将 jQuery UI CSS 类应用于元素会导致 JS 行为异常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5632887/