结合 jquery 和 kendo 示例

Question

我找到了 and reduce the working example to an input field where a number is displayed and two buttons where you can in- and decrease the value of integer by click as you can see here.

...
 <input type="text" name="quantity" size="2" value="1" />
...
<div class="quantity-wrapper pull-left">
   <span class="add-up add-action fa fa-plus"></span>
   <span class="add-down add-action fa fa-minus"></span>
 </div>
...

 $(document).ready(function () {

     $(".quantity-adder .add-action").click(function () {
         if ($(this).hasClass('add-up')) {
             var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
             text.val(parseInt(text.val()) + 1);
         } else {
             var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
             if (parseInt(text.val()) > 1) {
                 
             
                text.val(parseInt(text.val()) - 1);
             }
         }
     });

 });

我想添加一个 kendo 下拉列表，正如我在 this link 中尝试的那样。但是 +/- 按钮不见了。有人可以告诉我如何解决吗？

Answer 1

只需添加按钮而不是跨度

<div class="quantity-wrapper pull-left">
            <button class="add-up add-action fa fa-plus">+</button>
            <button class="add-down add-action fa fa-minus">-</button>
 </div>

Answer 2

我相信您正在寻找这样的东西。在 Telerik DOJO 中试试这个。我会把 CSS 的东西留给你。如果您打算重用此功能，那么我建议将其创建到自定义 Widget 中。请参阅 Kendo 文档以扩展 Widget class。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
  <input id="dropdownlist" />
  <input type="text" name="quantity" size="2" value="1" />
  
  <div class="quantity-wrapper">
    <button class="up">+</button>
    <button class="down">-</button>
 </div>
<script>
  $(document).ready(function() {
    var $quantity = $("[name=quantity]");
    $("#dropdownlist").kendoDropDownList({
      dataSource: {
        data: ["Banana", "Lemon"]
      }
    });

    $(".quantity-wrapper").on("click", "button", function () {
      var quantity = parseInt($quantity.val());
      
      if ($(this).hasClass("up")) {
        $quantity.val(quantity + 1);
      } else {
        if (quantity > 1) {
          $quantity.val(quantity - 1);
        }
      }
    });
  });
</script>
<style>
  .quantity-wrapper {
    display: inline-grid;
  }
</style>
</body>
</html>

结合 jquery 和 kendo 示例

combine jquery and kendo example

javascript

css

kendo-ui