当前位置：文江博客话题详情

Jquery 带箭头的水平条

发布于 2024-11-06 06:19:40 字数 178 浏览 2 评论 0原文

任何人都可以建议我一些 jquery 教程或演示，其中已制作如下图所示

在此处输入图像描述

箭头将指向某个介于 a 和 d 之间的结果值。还有其他方法可以做到这一点吗？使用谷歌图表API我可以以某种方式获得箭头吗？

原文

分享到QQ

分享到微博

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

发布评论

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

人疚 2024-11-13 06:19:41

您可以使用 jquery-ui slider 然后只需在 css 中进行修改以添加箭头

找到 .ui -slider-handle 在 jquery-ui 的 css 中并进行修改或添加

之前的 margin-top 和背景图像：

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

更改为：

.ui-slider .ui-slider-handle 
{
  margin-top:-20px; 
  background-image:url(ArrowDown.png);
  position: absolute; 
  z-index: 2; 
  width: 1.2em; 
  height: 1.2em; 
  cursor: default; 
}

在主页中只需添加滑块脚本：

$(function() {
    $( "#slider" ).slider({
        value:100,
        min: 0,
        max: 500,
        step: 50,
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});

和 HTML：

<p>
    <label for="amount">Donation amount ($50 increments):</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider"></div>

我使用 jquery 1.5.1 和 jquery -ui 1.8.12 也可以，（不要忘记调用 jquery.js、jquery-ui.js 和 jquery-ui.css）

you can use jquery-ui slider then just modify in css for add the arrow

find the .ui-slider-handle in jquery-ui's css and make moddified or add for margin-top and background image

before:

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

change to:

.ui-slider .ui-slider-handle 
{
  margin-top:-20px; 
  background-image:url(ArrowDown.png);
  position: absolute; 
  z-index: 2; 
  width: 1.2em; 
  height: 1.2em; 
  cursor: default; 
}

in the main page just add the Script for slider:

$(function() {
    $( "#slider" ).slider({
        value:100,
        min: 0,
        max: 500,
        step: 50,
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});

and the HTML:

<p>
    <label for="amount">Donation amount ($50 increments):</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider"></div>

i use the jquery 1.5.1 and jquery-ui 1.8.12 also and it's works, (dont forget to call the jquery.js, jquery-ui.js and jquery-ui.css)

回复收藏 0 原文

~没有更多了~