كيفية تغيير مقبض Jquery UI Slider

https://stackoverflow.com/questions/1207307

05-07-2019
|

سؤال

أرغب في تعديل شريط تمرير JQuery UI الخاص بالسهم بحيث يحتوي المقبض على سهم بدلاً من أن يكون مربعًا.أي.أريد استخدام صورة مخصصة كمقبض.

هناك عدد قليل من البرامج التعليمية التي تفعل ذلك:

لكن لا يمكنني تشغيله.ينتج عن التعليمة البرمجية التالية صورة مقبض ثابتة:

<!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>

يبدو الأمر كما لو أن JQuery لا يلتقط أنني أريد استخدام ملف com.myhandle معرف للمقبض.انا اتسائل:هل أحتاج إلى مكون إضافي لـ JQuery للتعرف على ملف مقبض خيار؟(لم يتم توثيقه في http://docs.jquery.com/UI/Slider).أو ربما كان يعمل فقط في الإصدار القديم من JQuery؟

أيه أفكار؟

المحلول

تسمى فئة CSS التي يمكن تغييرها لإضافة صورة إلى مقبض شريط تمرير JQuery ".ui-slider-horizontal .ui-slider-handle".

يظهر الكود التالي عرضًا توضيحيًا:

<!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>

أعتقد أن تسجيل أ مقبض كان الخيار هو الطريقة القديمة للقيام بذلك ولم يعد مدعومًا في JQuery-ui 1.7.2؟

نصائح أخرى

.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; 
}

إذا كنت بحاجة إلى استبدال المقبض بشيء آخر تمامًا، بدلاً من إعادة تصميمه فقط:

يمكنك تحديد عناصر مقبض مخصصة عن طريق إنشاء العناصر وإلحاقها وإضافة فئة ui-slider-handle قبل التهيئة.

مثال العمل

$('.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>

يجب عليك أيضًا تعيين border:none إلى تلك الفئة المغلق.

هذا التغيير هو المقبض الأول فقط في شريط التمرير متعدد المقابض.في apiDoc يمكنك أن ترى: "على سبيل المثال، إذا قمت بتحديد القيم:[ 1, 5, 18 ] وإنشاء مقبض مخصص واحد، سيقوم البرنامج الإضافي بإنشاء الاثنين الآخرين."

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow