标签: jquery-slider

我一直在寻找关于如何做到这一点的答案,我似乎无法弄明白(甚至看看jquery ui主题文档).当我从左向右移动滑块时,我希望滑块旋钮左侧的部分变为橙色(而不是默认的灰色).

jquery theme-roll生成了下面的css.据推测,.ui-widget-header背景颜色可以控制它,但似乎并没有.也没有为任何其他类添加背景颜色.知道如何解决这个问题,以便在水平滑动时获得不同的颜色吗？

JQUERY:

    $(document).ready(function(){

        $("#tasks_time").slider({
            value: 1,
            min: 0,
            max: 72,
            step: 1,
            slide: function() {
                update();
            }
        });

        $("#tasks_done").slider({
            value: 5,
            min: 0,
            max: 1000,
            step: 10,
            slide: function() {
                update();
            }
        });

HTML:

    Finish these items in <span id="curr-tasks_time" class="calc_number">1</span> hours

    <div id="tasks_time">
    </div>

CSS:

.ui-widget-content { border: 1px solid #ccc; background: #ff9900 url(images/ui-bg_flat_100_ff9900_40x100.png) 50% 50% repeat-x; color: #222222; }
.ui-widget-header { border: 1px solid #aaaaaa; background: #797979 url(images/ui-bg_highlight-soft_75_797979_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; …

我正在尝试将此代码用于rails:

$(elem).popover({
  title:"Brake activity",
  content: $("<div>").append( $("#slider").slider({ 
    range: "max",
    max: maxValue,
    min: maxValue / 5,
    value: maxValue / 2}) ).eq(0).outerHTML(),
  trigger: "manual"});

几乎一切都很顺利,但滑块没有用 - 它似乎被禁用了.即使我将禁用的选项定义为false,我也得到了相同的结果.outerHTML()方法是从Get selected元素的外部HTML中提取的.

我上传了一个屏幕截图,显示了滑块的显示方式:http://i48.tinypic.com/24azpkm.png

好的,我已经为Jquery UI添加了google api库,如下所示:

<script type='text/javascript'  src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js' ></script>

现在我有一个脚本可以更新文档幻灯片上的某些跨度和隐藏输入,而不仅仅是文档就绪:

<script type="text/javascript">
            $(document).ready(function()
            {
                 var slider=$('#slider_range').slider({
                        range:true,
                        min:0,
                        max:5,
                        step:1,
                        values:[0,3],
                        slide:function(event,ui)
                        {
                          $('#level').val(ui.values[0]+'-'+ui.values[1]);
                          $('#low').html(ui.values[0]);
                          $('#high').html(ui.values[1]);
                        }
                 });

                 var s=slider;
                 if(s.slider("values",0)==s.slider("values",1))
                 {
                    $('#level').val(s.slider("values",0));
                    $('#low').html(s.slider("values",0));
                    $('#high').html(s.slider("values",0));
                 }
                 else
                     {
                       $('#level').val(s.slider("values",0)+'-'+s.slider("values",1));
                       $('#low').html(s.slider("values",0));
                       $('#high').html(s.slider("values",1));
                     }
              });
         </script>

ideea是在页面上显示滑块而在另一个页面上没有.我从Firebug得到的错误信息是这样的:

$("#slider_range").slider is not a function

并指向该线

slide:function(event,ui)

可能是什么导致了这个？为什么在页面上可以看到滑块和另一个(使用加载上面的相同模板)的滑块？

请帮忙!

我有一个工作的Web应用程序,它使用jQuery UI默认滑块.

我收到用户抱怨滑块在移动设备上不能正常工作(似乎你必须点击,而不是拖动才能让它们工作).

有没有人知道一个在移动设备上运行良好的jQuery滑块插件？

显然我可以使用jQuery Mobile框架中的滑块或其他移动库,但我不愿意为了一个滑块而将整个移动框架添加到我的网站!

谢谢你的帮助.

我正在使用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>

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

我的问题与一年前提到的问题有关:

有没有办法在jquery ui滑块中显示"ticks"或"steps"的数量？

该问题中的OP想知道如何根据滑块中的刻度位置添加可视步骤.该解决方案是手动的,不适用于动态滴答方法.

我的问题是,如果我在加载时加载了多个滑块,每个滑块都有不同的步骤,并且在任何时间点,步骤的数量都可能会发生变化.我可能忽略了滑块API中的任何内容,可以将其用作步骤div的参考回调,让它知道每个步骤的位置.

例如,如果其中一个步骤是"left:28%".该信息在初始化后是否存储在滑块中的任何位置,是否可以在其下方创建动态步骤视觉效果？

我需要在jQuery上同时使用滚动条和箭头的内容滑块.像这样的东西 ,但是像这样的两侧有箭头.箭头应出现在悬停父标签上.我在互联网上搜索.但我找不到我需要的东西.有人知道这样的滑块吗？

我正在使用这个滑块.一切运作良好,但在自动播放中有问题.当我单击滑块上的导航箭头或底部的导航点上时.之后,自动播放无法正常工作.

这是链接点击这里

不存在自动播放功能,你必须下载它并进行自动播放:在Js中为true.

Js名称:jquery.slitslider.js

$.Slitslider.defaults = {
    // transitions speed
    speed : 800,
    // if true the item's slices will also animate the opacity value
    optOpacity : false,
    // amount (%) to translate both slices - adjust as necessary
    translateFactor : 230,
    // maximum possible angle
    maxAngle : 25,
    // maximum possible scale
    maxScale : 2,
    // slideshow on / off
    autoplay : true,
    // keyboard navigation
    keyboard : true,
    // time between transitions
    interval : 6000,
    // callbacks …

我想复制这里找到的滑块.

我有一个文件index.php,代码如下:

头:

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>

<style type="text/css">
.top {
    margin: 0px;
    padding: 0px;
    height: 500px;
    width: 500px;
}

.testing {
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    margin-bottom: 200px;
    padding: 0px;
    height: 100px;
    width: 100px;
    background: red;
    border: 1px solid #000;
}
</style>

</head>

身体:

<body>

<div class="top">
  <div class="testing"></div>
</div>

<p>a: <span id="a">0</span>
    <div id="a_slider"></div>
</p>

</body>

JavaScript的:

<script>

    $("#a_slider").slider({
        orientation: "horizontal",
        range: false,
        min: 0,
        max: 1,
        value: 0,
        step: …

我是jquery库的新手,所以我正在尝试一些jquery函数.这是我写的代码

<html>
<head>
<title>slide</title>

    <style>
        .outer  {

            width: 700px;
            height: 1000px;
            border: 2px dashed green;
            margin: 20px;
        }

        .box    {
            widht: 100px;
            height: 80px;
            border: 2px solid green;
            margin: 20px;
        }
    </style>

</head>
<body>
    <input type='button' id='btn' value='click' />
    <div class='outer'></div>
    <script type='text/javascript' src='jquery.js'></script>
    <script>
        $('#btn').click(function()  {
            $('.outer').prepend("<div class='box'></div>");
            $('.box').slideDown(3000);
        });
    </script>
</body> 

如您所见,如果我单击该按钮,则新的div前置为父div.但是jquery slideDown函数似乎没有任何效果,但是当我使用slideUp时,它按预期工作.因此,每当我单击按钮时,都会创建新div,但不会发生滑动动画.我错过了什么吗？

我花了2个小时的时间来尝试从不同来源的随机代码,声称他们已经设法将滑块捕捉到特定点.我不确定这是否适用于jQuery Mobile库,因为jQuery UI版本确实支持它,但我真的需要为当前项目找出一些东西.

基本上我有一个不同日期的时间表.它们不是"步骤",如10或20,它们是不同的数字.像1,3,10,12,32这样的东西.我需要滑块来捕捉这些点.

目前,我有一些东西正在测试步骤attr.

$('#slider-1').live( "change", function(e) {
    var step = $(this).attr('step'),
        val = $(this).val();
    if(step % val == step || val == step){
        console.log(val)
    }
});

我正在使用滑块的问题,不仅仅是捕捉,当我在20或40或60等附近滑动时,我正在获得控制台日志.它没有登录20等

我正在使用这个UI滑块,尺寸也是我网站上的一些(不是宽度,而是按钮的大小 - 演示页面的底部).-但是这里滑块按钮的尺寸更好,更小 - 演示右手边.

那么如何更改UI滑块按钮的大小？或者如何添加其他类型的按钮,例如图像？

如何将鼠标滑动到圆形？在画布中绘制圆弧和鼠标指针.鼠标应该在圆形路径上拖拽山墙？

//function to create mouse event to drag the mouse hover the arc

function mousedrag() {
    var canvasoffset = $(this.canvas).offset();
    var offsetX = canvasoffset.left;
    var offsetY = canvasoffset.top;     
    var mouseX = parseInt(e.offsetX || e.clientX - offsetX);
    var mouseY = parseInt(e.offsetY || e.clientY - offsetY);

    var radius = this.width / 2;
    var twoPI = 2 * Math.PI;
    var toRad =  twoPI / 360;
    var r_width =  this.width * 0.8;

    var radial_Angle = Math.atan2(mouseY - radius,mouseX - radius);

    var p_side_x =  radius …