纯CSS滑块 [英] pure css slider

问题描述

我试图得到一个纯CSS滑块（ http://jsfiddle.net/trN4p/1/ ）到另一个纯CSS滑块在同一个文件/页面上使用操作：目标与每个滑块独立控制导航

I'm trying to get one pure css slider (http://jsfiddle.net/trN4p/1/) to operate within another pure css slider on the same document/page using :target for navigation with independent control for each slider.

这是问题的一个例子： http://jsfiddle.net/ J6htH / 4 /

我要在里面（儿童）滑块独立的和一起工作（瓦特/出冲突）外（父）滑块。

我在想，如果有这样的列表项（和哈希标签）相对于滑块操作两个滑块分开的方式，而不是整个页面/ DOM？是有一些的的jQuery /阿贾克斯魔法或 JS模板（骨干网/下划线）技巧来做到这一点？

I was wondering if there is a way to separate the two sliders so that their list items (and hash tags) operate relative to the slider and not the whole page/dom? Is there some jQuery/Ajax magic or JS templating (backbone/underscore) tricks to do this?

推荐答案

我讨厌这样说（因为我知道那感觉如何真棒，使纯CSS真的很酷的东西），但你应该使用JavaScript。

I hate to say it (because I understand how awesome it feels to make really cool things in pure CSS), but you should use JavaScript.

包涵在这里，如果你觉得我是不合理的评论：

Bear with me here, and comment if you feel i'm being unreasonable:

您只能有一个的相匹配的一个元素：目标，因为你只能有一个主题标签，让您最多可以有有一个滑块设置在一个特定时间的项目（对方会恢复到默认值）。这是约束，不管你喜欢还是不喜欢。

You can only have a single element that's matched as :target, because you can only have one hashtag, so at most you can have one slider set to a particular item at a time (the other would return to default). This is the constraint, whether you like it or not.

在另一方面，HTML + CSS + JS是Model-View-Controller模式/模式/概念的一个很好的例子。

On the other hand, HTML+CSS+JS is a great example of the Model-View-Controller pattern/model/concept.

• HTML是模式，因为它包含了所有的数据


• CSS是查看，因为它包含了所有的风格


• JS​​是控制器，因为它定义了如何在用户，数据和样式互动对方。

• HTML is the Model as it contains all the data
• CSS is the View as it contains all the styles
• JS is the Controller as it defines how the user, data and styles interact with each other.

您正在努力使涉及用户交互的滑块。触发事件（如点击）确实应该由控制器，而不是查看处理。

You're trying to make a slider which involves user interactions. The triggering events (like click) should really be handled by the Controller, not the View.

TL;博士：

您不能做你所描述什么的纯粹的CSS。

You can't do what you're describing in pure CSS.

这篇关于纯CSS滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！