jQuery CSS 主题滚轮

发布于 2024-10-25 09:07:15 字数 102 浏览 7 评论 0原文

我想从 jQuery Themeroller 中获取一个图标并将其实现为按钮。然后,当我单击该图标时,它会在一种颜色和另一种颜色之间切换。这是在 Ruby on Rails 中。我该怎么做?

I want to take an icon from the jQuery Themeroller and implement it as a button. Then, when I click the icon, it toggles between one color and another color. This is in Ruby on Rails. How should I do this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

孤单情人 2024-11-01 09:07:15

这是前端代码,所以它几乎都是 JS/jQuery,你想要完成的事情与 Rails 无关。

这些图标是单独的类,例如 .jquery-ui-wrench。

一种方法是:

<div id="some_button" class="jquery-ui-wrench"></div>

然后在某个地方:

$('#some_button').click(function(){
  // Code to toggle button, probably 
  $('#some_button').removeClass('jquery-ui-wrench');
  $('#some_button').addClass('colored-version-of-icon');
});

包括,根据评论

从网站下载自定义主题 + jQuery UI 后,将 .js 文件提取到您的 public/ javascripts,然后将 css 样式表放入 public/stylesheets,将图像放入 public/images。编辑 css 文件并将所有出现的 images 替换为 /images。 (这是为了确保它正确指向图像文件夹)

然后只需将样式表和 javascript 文件包含在您的布局中,您应该就可以开始使用它了。

This is front-end code, so it's pretty much all JS/jQuery, what you're trying to accomplish has nothing to do with Rails.

The icons are separate classes, for example .jquery-ui-wrench.

One way to do it is:

<div id="some_button" class="jquery-ui-wrench"></div>

And then somewhere:

$('#some_button').click(function(){
  // Code to toggle button, probably 
  $('#some_button').removeClass('jquery-ui-wrench');
  $('#some_button').addClass('colored-version-of-icon');
});

Including, as per comment

Once you've downloaded your custom theme + jQuery UI from the site, extract the .js files into your public/javascripts, then the css stylesheet into public/stylesheets, and the images into public/images. Edit the css file and replace all occurances of images with /images. (This is to ensure it points to the images folder correctly)

Then simply include the stylesheet and javascript file in your layout, and you should be able to start using it.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文