Cách thay đổi thanh công cụ Jquery UI Slider

Tôi muốn sửa đổi thanh trượt JQuery UI của cổ phiếu để tay cầm có mũi tên trên đó chứ không phải là hình vuông. tức là tôi muốn sử dụng hình ảnh tùy chỉnh làm tay cầm.Cách thay đổi thanh công cụ Jquery UI Slider

Có một vài hướng dẫn mà làm điều đó:

Nhưng tôi không thể có được nó để làm việc. Kết quả mã sau vào một hình ảnh xử lý văn phòng phẩm:

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> 
    <style type="text/css"> 
    #myhandle {position: absolute;z-index: 100;height: 25px;width: 35px;top: auto;background: url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat;} 
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#slider").slider({handle: '#myhandle'}); 
    }); 
    </script> 
</head> 
<body> 
<div id="slider"><div id="myhandle"></div></div> 
</body> 
</html>

Đó là, nếu như JQuery không nhặt mà tôi muốn sử dụng myhandle id cho tay cầm. Tôi tự hỏi: Tôi có cần một plugin cho JQuery để nhận ra tùy chọn xử lý không? (nó không được ghi chép trong http://docs.jquery.com/UI/Slider). Hoặc có lẽ nó chỉ hoạt động trong một phiên bản cũ của JQuery?

Bất kỳ ý tưởng nào?

Nguồn

2009-07-30 Tom

Điều này đã được trả lời trước đây: http://stackoverflow.com/questions/1170596/changing-slider-handle-image – karim79

Cả ba liên kết hướng dẫn trong câu hỏi đều đã chết. :( –

Lớp CSS có thể được thay đổi để thêm hình ảnh vào thanh trượt của thanh trượt JQuery được gọi là ".ui-slider-horizontal .ui-slider-handle".

Các mã sau đây cho thấy một bản demo:

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> 
    <style type="text/css"> 
    .ui-slider-horizontal .ui-state-default {background: white url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;} 
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#slider").slider(); 
    }); 
    </script> 
</head> 
<body> 
<div id="slider"></div> 
</body> 
</html>

Tôi nghĩ rằng việc đăng ký một tay cầm tùy chọn được theo cách cũ để làm việc đó và không còn được hỗ trợ trong JQuery-ui 1.7.2?

Nguồn

2009-07-30 16:05:12 Tom

wow .. tôi cũng phải đối mặt với cùng một vấn đề và đã được giải quyết từ giải pháp của bạn .. cảm ơn buddy –

Tôi đã sao chép và dán mã chính xác này vào DW và thử nó. Tôi đã thay thế hình ảnh bằng chính mình. Tôi đã thử tất cả các giải pháp được liệt kê liên quan đến chủ đề này và không có gì đã làm việc để thay đổi hình ảnh.Tôi sẽ đăng mã của tôi theo chủ đề của riêng tôi và nếu có một giải pháp làm việc trên SO, hy vọng ai đó có thể liệt kê URL trên SO. – Chris22

Liên kết tới png bị hỏng. –

Bạn cũng nên đặt border:none thành lớp css đó.

Nguồn

2010-06-08 02:36:28

.ui-slider .ui-slider-handle{ 
    width:50px; 
    height:50px; 
    background:url(../images/slider_grabber.png) no-repeat; overflow: hidden; 
    position:absolute; 
    top: -10px; 
    border-style:none; 
}

Nguồn

2010-08-04 02:07:40

Nếu bạn nên cần phải thay thế tay cầm với một cái gì đó khác hoàn toàn, thay vì chỉ restyling nó:

You can specify custom handle elements by creating and appending the elements and adding the ui-slider-handle class before initialization.

Working Example

$('.slider').append('<div class="my-handle ui-slider-handle"><svg height="18" width="14"><path d="M13,9 5,1 A 10,10 0, 0, 0, 5,17z"/></svg></div>'); 
 

 
$('.slider').slider({ 
 
    range: "min", 
 
    value: 10 
 
});

.slider .ui-state-default { 
 
    background: none; 
 
} 
 
.slider.ui-slider .ui-slider-handle { 
 
    width: 14px; 
 
    height: 18px; 
 
    margin-left: -5px; 
 
    top: -4px; 
 
    border: none; 
 
    background: none; 
 
} 
 
.slider { 
 
    height: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<div class="slider"></div>

Nguồn

2014-02-11 18:31:15 apaul

Đây phải là câu trả lời chấp nhận cho tính toàn vẹn và ví dụ làm việc. Tại sao phong cách một yếu tố có sẵn với bạn chỉ đơn giản là có thể tiêm của riêng bạn? –

Thay đổi này chỉ xử lý đầu tiên trong thanh trượt nhiều dải. Trong apiDoc bạn có thể thấy: "Ví dụ: nếu bạn chỉ định các giá trị: [1, 5, 18] và tạo một trình xử lý tùy chỉnh, plugin sẽ tạo hai giá trị khác."

Nguồn

2016-02-09 08:30:31 anatoli

Vui lòng thêm một số nhận xét về giải pháp của bạn về lý do và cách giải quyết vấn đề –

Cách thay đổi thanh công cụ Jquery UI Slider

Trả lời

Các vấn đề liên quan