标签: jquery-ui-slider

请查看Cheese&Burger网站.

更准确地说,看看底部与上面翻盖板关系的滑块.

我知道我可以使用jQuery UI Slider来完成相对简单的滑块操作.我更关心的是你可以在不诉诸Flash的情况下接近翻转效果.

我不想使用Canvas,因为我不知道它并且没有时间学习它(还).

我可以使用最新的Gecko和WebKit支持的任何CSS3内容,只要它在IE中有点优雅地降级(也许它们可以简单地改为IE).

理想情况下,这些小组应该div具有任何(合理的)内容.这种排除了动画img元素的height效果属性.

如果不按顺序执行,则不一定需要翻转路径面板(如Flash所示).

我想也许我可以overflow: hidden div使用jQuery 为s 的高度设置动画,然后制作一个在动画期间突出的位的精灵(因为这些部分中没有内容).我可以穿过框架setInterval().

我猜它不会有缩放效果,因为页面朝向你而去,但我想我可能能够逃脱它.

我将使用jQuery 1.4.

在我进入这个之前,你认为它是值得尝试的还是没有Flash(目前为止)它是不可行的？

如果可行,你有什么建议吗？我不是在寻找工作代码(虽然片段会很好),更多的是我可能忽略的建议.

我的页面上有一个jQuery UI滑块,它通过下拉菜单突出显示.

有没有办法调整其z-index或者它是否需要成为页面上最顶层的元素？

我们有一个简单的问题.我可以为jquery ui滑块添加文本最小/最大值,滚动时是否显示数字？下面是一个示例,最大值的左侧滑块具有"无限制",当您滚动它时,会出现数字.

我正在尝试复制您在jquery中的图像中可以看到的内容,以创建现有应用程序的启用触摸的版本:

我正在使用jquery-ui滑块,我想继续使用它们,因为我有很多与它们相关的业务逻辑,实际上它们看起来很像:

我需要css和html部分的帮助,我不知道当用户点击"加号"按钮以及我应该如何组织我的HTML以实现该外观时,如何使"滑块"填充效果.

我的标记如下:

  <table>
    <tr>
      <td>
        <div id="timeName">
          Tempo a disposizione
        </div>

        <div id="travelTime">
          <div class="selectedHandler"></div>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <div class='paramName'>
          Architecture and Heritage
        </div>

        <div id="Architecture_and_Heritage" class="param" data-id="3">
          <div class="selectedHandler"></div>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <div class='paramName'>
          Culture
        </div>

        <div id="Culture" class="param" data-id="5">
          <div class="selectedHandler"></div>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <div class='paramName'>
          Fairs Performances and Special Events
        </div>

        <div id="Fairs_Performances_and_Special_Events" class="param" data-id="6">
          <div class="selectedHandler"></div>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <div class='paramName'>
          Food and Drink
        </div>

        <div …

我想更改jquery滑块UI的宽度和高度.我正在使用ui-lightness主题.我尝试通过在样式表中添加以下代码来覆盖默认的jquery.css.

.ui-slider .ui-slider-horizontal { height: .6em; }
.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1em;
  height: 1em;
  cursor: default;
}

但上面的CSS没有效果.jquery.css覆盖了上面的样式,我看到滑块没有变化.如何覆盖默认的jquery.css样式？

我正在阅读滑块的官方演示页面中的代码:http://jqueryui.com/demos/slider/我想知道为什么<a>标签用于处理？为什么不<div>呢？

<div class="demo">

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <a class="ui-slider-handle ui-state-default ui-corner-all ui-state-hover" href="#" style="left: 19%; ">
    </a>
</div>

</div>

你可能已经知道我是jQuery的新手,所以仍然非常允许不属于这个主题的代码改进.

这是我的HTML代码:

<div style="display: inline-block; width: 120px;">
    <div>
        Bananas:
        <br />
        <input id="bananas_amount" />
        <input id="bananas_amount_percent" />
    </div>
    <br />
    <div id="bananas" style="height:200px;"></div>
</div>

这是我可怕的js代码:

$( "#bananas" ).slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 100,
    value: 20,
    step: 5,
    slide: function( event, ui ) {
        $( "#bananas_amount_percent" ).val( ui.value + " %" );

            // the code displays a percentage by standart, but I need the real value, too:
            var bananas_amount_percent = $( "#bananas_amount_percent" ).val();
            var bananas_amount_percent = bananas_amount_percent.replace(" %", …

我有一个具有以下属性的滑块:

• 水平方向
• 一把手
• 最少2分钟
• 最多65

我的目标是强迫用户在7点之间进行选择(例如:"2,3,4,26,39,52,65"),仅此而已.

如何创建动态步长或如何仅允许这些点作为滑块步骤？

我正在使用一个jQuery滑块,其固定的最小值为20,如文档中所述.

但是,这不是我需要的.我希望滑块的可视范围为0-100,但绝不允许用户将滑块移动到小于20.

换句话说,滑块的手柄永远不会一直到滑块的左侧(就像此刻一样),但是应该显示范围0-20.

这是一个JSFiddle来显示我的意思,这是当前的代码:

$("#range-slider").slider({
    range: "min",
    min: 20,
    max: 100, 
    value: 20,
    step: 20,
});

有任何想法吗？

我正在使用royalslider.我有这个

<a class="rsImg" data-rsDelay="1000" href="image.jpg">
  <span>This is caption <b>HTML1</b> text</span>
</a>

这工作正常,并将文本放在图像下.但是,我想在图像上显示文本.但是当我移动文本时,它会在图片下方不在顶部.我试过这个

<a class="rsImg" data-rsDelay="1000" href="image.jpg" style="z-index:-10000 !important;">
  <span style="z-index:10000 !important;margin-top:-100px;">
    This is caption <b>HTML1</b> text
  </span>
</a>

但那没用.任何帮助将不胜感激