如何将 jQuery UI 样式应用于普通表单元素,例如输入和选择标签?
也许我遗漏了一些东西,但是在阅读 jQuery UI 文档之后,我没有看到任何有关将主题样式应用于普通小部件的内容,例如输入和选择标签。在按钮上调用 button()
和在将选择日期的输入标记上调用 datepicker()
后,我是否应该将普通文本区域和输入包装在
来提供一致的样式,或者给它们一个特定的 css 类,或者在文档加载时调用一个函数来设置其他所有内容的样式?Maybe I'm missing something, but after reading the jQuery UI docs, I don't see anything about applying theme styles to normal widgets, like input and select tags. After calling button()
on buttons and datepicker()
on input tags that will pick dates, am I supposed to wrap normal textareas and inputs in a <div class="ui-widget">
to give a consistent-looking style, or give them a certain css class, or call a function on document load that styles everything else?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
jQuery UI 主题的工作方式与您使用的任何其他 CSS 文档一样。如果您在特定元素上需要一组样式,通常您需要做的就是向相关元素添加定义所需样式的类。
困难的部分是,根据浏览器的不同,许多表单元素的样式化程度差异很大。特别是,Internet Explorer 使用本机操作系统表单控件,这些控件从操作系统主题设置中获取默认样式,而 Chrome 和 Firefox 等其他浏览器则使用自己的表单控件集,并拥有自己的默认样式集。
在许多情况下,jQuery UI 小部件所做的就是隐藏默认的表单元素,然后用更多可样式化的元素替换它们,例如
的结构,可以将其样式设置为模仿实际表单元素。这些假结构还附加了 JavaScript 事件处理程序,用于捕获输入并将其代理回实际的表单元素,以及在其内部呈现它。
因此,简而言之,将 jQuery UI 样式应用于表单元素有时就像应用主题类一样简单,有时则像必须模仿实际的表单元素一样痛苦。这完全取决于您的目标浏览器和您想要应用的样式。
The jQuery UI themes work just like any other CSS document that you would use. If there is a set of styles you are after on a particular element, often all you need to do is add the classes that define the styles you want to the element in question.
The difficult part is that, depending on the browser, many form elements have widely varying degrees of stylability. In particular, Internet Explorer uses native OS form controls, which get their default styling from the OS theme settings, while other browsers like Chrome and Firefox use their own set of form controls and have a default style set all their own.
In many cases, what the jQuery UI widgets do is hide the default form elements and then replace them with more styleable elements, like a structure of
<div>
s, that can be styled to mimic actual form elements. These fake structures also have javascript event handlers attached to capture input and proxy it back to the actual form elements, as well as render it within themselves.So, in a nutshell, applying jQuery UI styles to form elements can sometimes be as simple as just applying the theme classes, or sometimes be as painful as having to mimic the actual form elements. It all depends on your target browsers and the styles you want to apply.
使用 Jquery 的一些示例。
Some examples using Jquery.