私信  •  关注

Twisty

Twisty 最近创建的主题
Twisty 最近回复了

$(function() {
  $('#example').DataTable();
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th style="width: 25px;">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="Add"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Sonya Frost</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Quinn Flynn</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Charde Marshall</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Haley Kennedy</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Tatyana Fitzpatrick</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Michael Silva</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Paul Byrd</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Gloria Little</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Bradley Greer</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Dai Rios</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>&nbsp;</th>
    </tr>
  </tfoot>
</table>

希望能有所帮助。

1 年前
回复了 Twisty 创建的主题 » 如何用Pix.js或jQuery UI进行自由滚动?

下面是一个可能对你有帮助的例子。它远没有你提供的示例站点那么密集。如果这对你有用,你可以把它集成到你自己的项目中。

HTML格式

<div id="main">
  <div class="part" style="background-color: rgba(255,0,0,0.25); top: 0; left:0;"></div>
  <div class="part" style="background-color: rgba(0,0,255,0.25); top: 0; left: 1500px;"></div>
  <div class="part" style="background-color: rgba(255,255,0,0.25); top: 900px; left: 0;"></div>
  <div class="part" style="background-color: rgba(0,255,0,0.25); top: 900px; left: 1500px;"></div>
</div>

创建4个大型div部分并将其特别放置在HTML中的基本结构。我们可以将项目放入页面的负片部分,但不能在任何方向将负片滚动到0,因此最好从0,0开始放置它们。

CSS

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#main {
  position: relative;
}

.part {
  width: 1500px;
  height: 900px;
  position: absolute;
}

这有助于隐藏滚动条并设置其他常规样式。

JavaScript

$(function() {
  function moveToCenter() {
    var vert = $(document).height() - $(window).height();
    var horz = $(document).width() - $(window).width();
    console.log("Centering View:", Math.round(horz / 2), Math.round(vert / 2));
    window.scrollTo(Math.round(horz / 2), Math.round(vert / 2));
  }

  function calcEdges(buff) {
    var t = [0, buff];
    var b = [$(window).height() - buff, $(window).height()];
    var l = [0, buff];
    var r = [$(window).width() - buff, $(window).width()];
    return {
      top: t,
      left: l,
      right: r,
      bottom: b
    };
  }

  function move(d, n) {
    var c, g;
    if (d == "top") {
      c = $(window).scrollTop();
      g = c + n;
      if (g <= 0 || (g >= $(document).height())) {
        console.log("Hit Top/Bottom Boundry");
        return false;
      }
      $(window).scrollTop(g);
    } else {
      c = $(window).scrollLeft();
      g = c + n;
      if (g <= 0 || (g >= $(document).width())) {
        console.log("Hit Left/Right Boundry");
        return false;
      }
      $(window).scrollLeft(g)
    }
  }

  function init() {
    moveToCenter();
    var sides = calcEdges(30);
    $(window).mousemove(function(e) {
      var x = e.clientX,
        y = e.clientY;
      if (x > sides.left[0] && x < sides.left[1]) {
        console.log("Dir: Left", x);
        move("left", -5);
      } else if (x > sides.right[0] && x < sides.right[1]) {
        console.log("Dir: Right", x);
        move("left", 5);
      }
      if (y > sides.top[0] && y < sides.top[1]) {
        console.log("Dir: Top", y);
        move("top", -5);
      } else if (y > sides.bottom[0] && y < sides.bottom[1]) {
        console.log("Dir: Bottom", y);
        move("top", 5);
      }
    });
  }
  init();
});

这是相当可观的数目。以下是基本知识:

  • 将视区移动到内容中心的函数。这样用户就可以滚动到
  • 一个函数,它帮助我们根据窗口边缘的特定像素数计算“边”的位置
  • 向特定方向移动或滚动窗口的功能( top left )具体数额
  • 一个初始化所有内容的函数,滚动到中心并设置 mousemove 回调事件

工作示例代码: https://jsfiddle.net/Twisty/z8vh6kwx/

工作示例显示: https://jsfiddle.net/Twisty/z8vh6kwx/show

我已经配置了我的示例,当用户将鼠标从屏幕边缘移动30像素时,它将向该方向滚动5像素。这有点笨拙,但你可以看到它的整体工作。你可以有许多不同大小的部分,浮动在页面的不同部分。可以添加其他悬停样式并单击事件。不必比这更复杂。

希望有帮助。

1 年前
回复了 Twisty 创建的主题 » 显示jquery ui“instance”方法的键和值

如果您使用的是jqueryuiversion1.10.2,它将不包括 instance 方法,你将不得不回到 .data() 打电话来。

$(function() {
  $("#a").autocomplete({
    source: ["abc", "def", "ghi"]
  });

  var t = "<div class='show'>";
  $.each($("#a").data("ui-autocomplete"), function(key, value) {
    t += key + " = " + value + "</br>";
  });
  t += "</div>";

  $("body").append(t);
})
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

<input id="a" type="text">

查看更多: https://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/

在将来,您可能会希望正确地标记您的帖子 jquery-ui 所以你可以得到更具体的帮助。

希望能有所帮助。

1 年前
回复了 Twisty 创建的主题 » 使用jquery和ajax淡入html页面的问题

我不确定你的项目范围,所以这可能超出了范围。使用fadein和fadeout,可以在转换结束时执行函数。有了ajax,就不完全一样了。这有点复杂,但这意味着即使AJAX正在处理请求,在返回数据之前可能还会执行更多的代码所以最好把所有的代码都包起来。

下面是一个建议的示例:

$(function() {
  function getContent(u, target, fn) {
    var newPage;
    console.log("GET " + u);
    var req = $.ajax({
      url: u,
      cache: false,
      dataType: "html",
      success: function(data) {
        console.log("SUCCESS ", data);
        newPage = $(data).find("body").childern();
        target.html(newPage);
        fn();
      },
      error: function(xhr, stat, error) {
        console.log("ERROR ", xhr, stat, error);
        newPage = $("<div>", {
          class: "error"
        }).html("Error " + stat + ": " + error);
        target.html(newPage);
        fn();
      }
    });
  }
  $("a").on("click", function(event) {
    event.preventDefault();
    var href = $(this).attr("href");
    window.history.pushState(null, null, href);
    $("body").fadeOut(300, function() {
      $("body").html("");
      getContent(href, $("body"), function() {
        $("body").fadeIn(250);
      });
    });
  });
});
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<div class="content">
  <h1><a href="index2.html" id="index2go">Welcome to Greendale</a></h1>
</div>
1 年前
回复了 Twisty 创建的主题 » jquery ui可排序的位置使用<input>

可能比你想的要复杂,但我希望这能有帮助。

https://jsfiddle.net/Twisty/9aes8omr/

javascript

$(function() {
  function showIndex(tb) {
    var fields = $(tb).find("input[name='order']");
    console.log(fields);
    fields.each(function(ind, el) {
      console.log(ind, el);
      $(el).val(ind + 1);
    });
  }

  function spliceRow(tb, r, i) {
    var ind = i - 1;
    var ln = $("tr", tb).length;
    var rows = [];
    $("tr", tb).each(function(ind, el) {
      rows.push(el);
    });
    rows.splice(ind, 0, r);
    tb.html("");
    $.each(rows, function(k, v) {
      tb.append(v);
    });
  }
  // Fix the width of the cells
  $('td, th', '#sortFixed').each(function() {
    var cell = $(this);
    cell.width(cell.width());
  });

  $('#sortFixed tbody').sortable({
    items: "> tr",
    update: function(e, ui) {
      console.log("Sort Update.");
      showIndex($(this));
    }
  }).disableSelection();

  $("#sortFixed tbody").on("change", "input[name='order']", function(e) {
    var me = $(this);
    var orig = me.parents("tr");
    var row = orig.clone();
    var t = parseInt(me.val());
    console.log(t, row);
    orig.remove();
    spliceRow($("#sortFixed tbody"), row, t);
    $("#sortFixed tbody").sortable("refresh");
    showIndex($("#sortFixed tbody"));
  });
});

如果创建一个HTML行数组,则可以使用 .splice() 是的。如果要使用可排序并手动输入索引,则以上代码将执行此操作。您可以拖动它们,它将求助或您可以输入一个数字,它将改变位置(也刷新可排序)。

这意味着最终,你可以使用 .sortable("serialize") .sortable("toArray") 随你喜欢。

希望能有所帮助。

1 年前
回复了 Twisty 创建的主题 » 如何在jquery accordions中实现即时搜索

考虑以下可能的解决方案。

工作示例: https://jsfiddle.net/Twisty/6v4h7fL3/73/

切换小提琴使用jquery 3.3.1和jquery ui 1.12.1。最好尽可能使用最新版本。代码应该可以使用一些未经测试的旧版本。

HTML

<div id="contactlist">
  <form id="search-form" class="ui-widget">
    <p class="ui-widget-content">
      <label for="term">Search:</label> <input type="text" id="term" class="ui-widget ui-corner-all" /> <button type="submit" id="btn-go" class="ui-widget ui-button ui-corner-all">Find</button>
    </p>
  </form>
  <div id="accordion">
  </div>
</div>

添加了搜索字段表单。使用窗体事件回调 submit 允许用户点击 进入 或者点击按钮。我怀疑很多像我这样的用户输入了一些东西然后点击 进入 .

JavaScript

$(function() {
  var departmentlist = [];
  var a = $("#accordion");

  function wrapText(term, obj) {
    var myText = obj.html().toString();
    var re = new RegExp(term, "g");
    var wObj = $("<span>", {
      class: "found ui-state-highlight"
    }).html(term);
    var w = wObj.prop("outerHTML");
    var newText = myText.replace(re, w);
    console.log("Wrap:", re, myText, newText);
    obj.html(newText);
  }

  $.each(contacts, function(i, contact) {
    //insert the departments
    if (contact.Title != null && $('#' + contact.Title).length == 0) {
      var header = $("<h3>", {
        id: contact.Title
      }).html(contact.Title).appendTo(a);
      var details = $("<div>").appendTo(a);
      $("<p>").html(contact.Definition).appendTo(details);
      departmentlist.push(contact.Title);
    }
  });

  a.accordion({
    collapsible: true,
    active: false,
  });

  $("#search-form").submit(function(e) {
    e.preventDefault();
    var q = $("#term").val();
    $.each(contacts, function(k, v) {
      if (v.Definition.indexOf(q) >= 0) {
        // Found
        console.log("'" + q + "' found under " + v.Title + " (" + k + ")");
        // Collapse all
        a.accordion("option", "active", false);
        // Active Section with found item
        a.accordion("option", "active", k);
        a.find(".found").removeClass("found ui-state-highlight");
        wrapText(q, $(".ui-accordion-content-active"));
        return false;
      }
    });
  });
});

这个 wrapText() 对要搜索的文本进行某种基本的替换,并用 <span> 用于突出显示。它接受术语和jquery对象,该对象包含应搜索和突出显示的文本。

我改进了您使用的构造代码,使其更像jquery。一旦一切就绪,我们就申请 .accordion() .

当输入搜索并提交表单时,我们将查找查询的第一个匹配项,打开它的容器并突出显示文本。

这有点又快又脏。如果你需要的话,可以通过一些方法来改进它。例如,现在它的大小写是不必要的。所以如果你想 testing 你不会得到任何点击,但是如果你搜索 Testing ,它会起作用的。

更新

如果您在sharepoint中运行它,而您对html没有那么多的控制权,那么这会有帮助。

$(function() {

  function GetItems() {
    var siteURL = _spPageContextInfo.webServerRelativeUrl;
    //var siteURL = "https://reqres.in/api/unknown" //Non-SharePoint URL
    $.ajax({
      url: siteURL + "/_api/web/lists/GetByTitle('glossary of terms')/items", //change the list name
      type: "GET",
      dataType: "json",
      headers: {
        Accept: "application/json;odata=verbose"
      },
      success: function(data) {
        if (data.d.results.length > 0) {
          GenerateAccordionFromJson(data.d.results, true, $("#accordion"));
          $("#accordion").accordion({
            collapsible: true,
            active: false,
          });
        } else {
          $('#accordion').append("<span>No Records Found.</span>");
        }
      },
      error: function(error) {
        console.log(JSON.stringify(error));
      }
    });
  }

  function wrapText(term, tObj) {
    var oldText = tObj.html();
    var re = new RegExp(term, "g");
    var newText = oldText.replace(term, "<span class='found highlight'>" + term + "</span>");
    tObj.html(newText);
  }

  function GenerateAccordionFromJson(json, search, tObj) {
    if (search == undefined) {
      search = false;
    }
    if (tObj == undefined || tObj.length < 1) {
      tObj = $("<div>", {
        class: "items",
        id: "accordion" + ($("#accordion").length ? "-" + $("#accordion").length : "")
      }).appendTo($("body"));
    }
    if (search) {
      var form = $("<form>", {
        class: "search-form"
      }).submit(function(e) {
        e.preventDefault();
        var q = $(".search-term", this).val();
        var aObj = $(this).next("div");
        var stacks = [];

        $(".found").removeClass("found highlight");

        $(".ui-accordion-content", aObj).each(function(ind, el) {
          stacks.push($(el).text().trim());
        });
        $.each(stacks, function(i, s) {
          if (s.indexOf(q) >= 0) {
            aObj.accordion("option", "active", false);
            aObj.accordion("option", "active", i);
            wrapText(q, $(".ui-accordion-content-active", aObj));
          }
        });
      }).insertBefore(tObj);
      $("<p>").html("Search:").appendTo(form);
      $("<input>", {
        type: "text",
        class: "search-term"
      }).appendTo($("p", form));
      $("<button>", {
        type: "submit",
        class: "search-btn-go"
      }).appendTo($("p", form));
    }
    $.each(json, function(key, row) {
      $("<h3>").html(row.Title).appendTo(tObj);
      $("<div>").html("<p>" + row.Definition + "</p>").appendTo(tObj);
    });
  }
});

更新2

确保在头部加载正确的库。显示您正在使用:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

这将加载同一个库两次,只是先加载“min”版本。我会把第二个移走。

我不知道sp是否使用jquery。如果尚未加载,则需要确保将其包含在标题中。

如果没有,可以执行以下操作:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

正如您所提到的,在您的评论中,我忘记包括初始函数的最后一次运行:

GetItems();

在关闭最后一个包装器之前添加这个,以确保它被执行。

更新3

请尝试以下脚本代码:

$(function() {
  var n = new Date();

  function log(msg) {
    var t = new Date();
    var d = t - n;
    console.log(d, msg);
  }

  function GetItems() {
    var siteURL = _spPageContextInfo.webServerRelativeUrl;
    log("GetItems: Start: " + siteURL);
    $.ajax({
      url: siteURL + "/_api/web/lists/GetByTitle('glossary of terms')/items", //change the list name
      type: "GET",
      dataType: "json",
      headers: {
        Accept: "application/json;odata=verbose"
      },
      success: function(data) {
        if (data.d.results.length > 0) {
          $('#accordion').append(GenerateAccordionFromJson(data.d.results));
          $("#accordion").accordion({
            collapsible: true,
            active: false,
          });
        } else {
          $('#accordion').append("<span>No Records Found.</span>");
        }
      },
      error: function(error) {
        log("GetItems: Error: " + JSON.stringify(error));
      }
    });
    log("GetItems: Complete");
  }

  function GenerateAccordionFromJson(objArray) {
    log("GenAccord: Started");
    var accordionContent = "";
    for (var i = 0; i < objArray.length; i++) {
      accordionContent += '<h3>' + objArray[i].Title + '</h3>';
      accordionContent += '<div><p>' + objArray[i].Definition + '</p></div>';
    }
    log("GenAccord: Complete");
    return accordionContent;
  }

  GetItems();
});

然后,您可以查看控制台,并应看到所有操作都在运行。如果没有详细信息,请查找警报或错误。

希望能有所帮助。

1 年前
回复了 Twisty 创建的主题 » jqueryui工具提示+全屏

没有代码示例,就不清楚可能发生什么。

至少对于jquery ui-modal,它可以按预期工作。

https://jsfiddle.net/Twisty/x7wc51qk/

JavaScript

$(function() {
  $(document).tooltip();
  $(".dialog").dialog({
    autoOpen: false,
    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    buttons: {
      "Delete all items": function() {
        $(this).dialog("close");
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    }
  });
  $("#show-diag-btn").click(function() {
    $(".dialog").dialog("open");
  })
});

示例是根据 https://jqueryui.com/tooltip/ https://jqueryui.com/dialog/#modal-confirmation

更新

你的小提琴配置不正确。我用叉子叉了它并适当地更新了资源:

https://jsfiddle.net/Twisty/hv7ak1rb/

更新后工具提示将按预期工作。我发现jquery ui 1.9.0css与jqueryui1.12.4一起使用。将此更新为正确的css。

确保您的html以正确的顺序正确地加载资源。

这应该会有帮助。

1 年前
回复了 Twisty 创建的主题 » jqueryui自动完成模型数据的有效使用方法

这是一个我希望能有所帮助的例子。

$(function() {
  var listAddress = [{
    label: "Address 1",
    value: 1,
    id: 1
  }, {
    label: "Address 2",
    value: 2,
    id: 2
  }, {
    label: "Address 3",
    value: 3,
    id: 3
  }];

  function saveAddress(e) {
    var a = parseInt($("#address_id").val());
    if (isNaN(a)) {
      return;
    }
    // Post back to save selected Address ID
    return true;
  }

  $('#show_address').autocomplete({
    source: listAddress,
    minLength: 0,
    scroll: true,
    select: function(event, ui) {
      $("#address_id").val(ui.item.id);
      $(this).val(ui.item.label);
      // Trigger any other events or post backs
      return false;
    }
  }).focus(function() {
    $(this).autocomplete("search", "");
    return false;
  }).blur(saveAddress);
});
.hidden {
  opacity: .25;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="form-group">
  <!--
  @Html.LabelFor(model => model.allBuildings.First().Address, htmlAttributes: new { @class = "control-label col-md-2" })
  -->
  <label class="control-label col-md-2">Address</label>
  <div class="col-md-10">
    <input type="text" id="show_address" class="form-control" />
    <input type="text" id="address_id" class="hidden form-control" />
    <!--
        @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control", @id = "show_address" } })
        -->
  </div>
</div>

首先,最好解决您的源结构。你可以使用 id ,但是autocomplete正在查找特定对象的数组或数组。

具有标签和值属性的对象数组: [ { label: "Choice1", value: "value1" }, ... ]

如果需要,可以添加其他属性。如果你的数据很简单,我会坚持 label value .

下一步,为了 focus blur ,使用它们的方式将不在自动完成功能范围内,而是绑定到具有输入字段本身的事件。对于自动完成中的焦点,这与列表项的焦点相关。

焦点移动到项目时触发(未选择)。默认操作是将文本字段的值替换为焦点项的值,但前提是事件是由键盘交互触发的。

也不清楚你想做什么。您似乎想将选定的id发回数据库中的某个位置进行更新。我会这么做的 $.post() $.ajax() . 与.net相比,我在php上做的工作更多,所以我不能说这么多,而且您的示例代码并没有真正显示出您想要做什么。

希望能帮上忙/

1 年前
回复了 Twisty 创建的主题 » 编辑数据devbridge/jquery自动完成时出现问题

如果您对使用jquery ui autocomplete感兴趣,则需要查看以下示例:

http://jqueryui.com/autocomplete/#multiple-remote

用你的代码,它会像这样,用 jquery ui自动完成

var estatus = 1;
var exampleData = {
  "suggestions": [{
    "value": "Pendiente",
    "data": 1
  }, {
    "value": "Programar",
    "data": 2
  }]
};
$(function() {
  function split(val) {
    return val.split(/,\s*/);
  }

  function extractLast(term) {
    return split(term).pop();
  }

  $('#eestado').val(estatus); // example estatus = 1
  $('#eestado').on("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB &&
      $(this).autocomplete("instance").menu.active) {
      event.preventDefault();
    }
  }).autocomplete({
    source: function(req, resp) {
      var url = "{{ url('/getestados/') }}";
      var results = [];
      $.get(url, {
        q: extractLast(req.term)
      }, function(data) {
        $.each(data.suggestions, function(k, v) {
          results.push({
            label: v.value,
            value: v.data
          });
        });
      });
      resp(results);
    },
    focus: function() {
      // prevent value inserted on focus
      return false;
    },
    select: function(event, ui) {
      var terms = split(this.value);
      terms.pop();
      terms.push(ui.item.value);
      terms.push("");
      this.value = terms.join(", ");
      return false;
    }
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="eestado" type="text" />

对于jquery自动完成

在您的评论中,您提到您正在使用另一种jquery自动完成方法: https://www.devbridge.com/sourcery/components/jquery-autocomplete/

他们说:

已知问题

如果将它与jquery ui库一起使用,它还有一个名为autocomplete的插件。在这种情况下,可以使用插件别名devbridgeautocomplete:

$('.autocomplete').devbridgeAutocomplete({ ... });

所以,如果你同时包含了这两个库,请注意。对于您的代码,我只更改一个元素:

onSelect: function (suggestion) {
  $('#eestado').val(suggestion.value);
}

当用户进行选择时, value 将出现在输入中,而不是 data .

完整代码:

$('#eestado').autocomplete({
  serviceUrl: '{{ url('/getestados/') }}',
  onSelect: function (suggestion) {
    $('#eestado').val(suggestion.value);
  },
  formatResult: function(suggestion, currentValue){
    if (suggestion.data === null) {
      return "Create a new tag";
    }
    return suggestion.value;
  },
  onInvalidateSelection: function() {
    $('#eestado').val('');
  }
});

希望能有所帮助。

1 年前
回复了 Twisty 创建的主题 » jquery拖放功能问题

考虑下面的例子。如果你真的需要 <div> 元素,则必须调整 items 可排序的选项。

$(function() {
  $(".waiters").sortable({
    connectWith: "ul.waiters",
    placeholder: "target-drop"
  });
  $(".sortable").disableSelection();
});
.waiters {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: #eef;
  min-height: 82px;
  min-width: 82px;
}

.waiter {
  height: 80px;
  width: 80px;
  text-align: center;
  background: #CCCCCF;
  margin: 1px;
  padding: 4px 2px;
  float: left;
}

.target-drop {
  height: 78px;
  width: 78px;
  background: #EEE;
  border: 1px dashed #ccc;
  float: left;
  margin: 1px;
  padding: 4px 2px;
}

.waiter .waiter-name {
  font-weight: normal;
  font-size: .65em;
  width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.r-table {
  min-height: 90px;
  border: 1px solid #CCC;
  display: inline-block;
  padding: 3px;
  text-align: center;
}

.top4 {
  width: 90px;
}

.top8 {
  width: 172px;
}

.r-table .table-name {
  font-weight: normal;
  font-size: .65em;
  line-height: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-6">
  Restaurant
  <div id="restaurant" class="restaurant">
    <div id="table-0" class="r-table top4">
      <label class="table-name">Table 1</label>
      <ul class="waiters">
      </ul>
    </div>
    <div id="table-1" class="r-table top4">
      <label class="table-name">Table 2</label>
      <ul class="waiters">
      </ul>
    </div>
    <div id="table-2" class="r-table top8">
      <label class="table-name">Table 3</label>
      <ul class="waiters">
      </ul>
    </div>
  </div>
</div>

<div class="col-md-2">
  <div>
    <span>Serveurs</span>
  </div>
  <ul id="waiters" class="waiters" style="padding: 2px; min-height: 86px;">
    <li id="waiter-1" class="waiter">
      <img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
      <label class="waiter-name">Bart Simpson</label>
    </li>
    <li id="waiter-2" class="waiter">
      <img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
      <label class="waiter-name">Lisa Simpson</label>
    </li>
    <li id="waiter-3" class="waiter">
      <img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
      <label class="waiter-name">Milhouse Van Houten</label>
    </li>
    <li id="waiter-4" class="waiter">
      <img src="https://www.freeiconspng.com/uploads/bw-waiter-png-3.png" height="40px;" />
      <label class="waiter-name">Martin Price</label>
    </li>
  </ul>
  <p style="clear: both;">
    <a href="{{route('showAddWaiter')}}" title="Panel boxes"><span>Ajouter un serveur</span></a>
  </p>
</div>

这允许您将服务器分配、移动或未分配给表。您确实提到了是否需要将同一服务器分配给多个表。

希望能有所帮助。

1 年前
回复了 Twisty 创建的主题 » 在可排序函数(jquery)中实现抓取多个项

我注意到你的代码中有语法错误。这可能是因为它只是一个局部的例子。

您可以将数据添加到助手中,也可以简单地隐藏移动中的项目,然后在 stop . 下面是后者的一个例子:

$(function() {

  function setUsersList() {
    $('ul.sortable').on('click', 'li', function(e) {
      if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
      } else {
        $(this).addClass("selected")
          .siblings().removeClass('selected');
      }
    });

    $('.users-list').sortable({
      items: "> li:not(.to-resize)",
      connectWith: '.users-list',
      helper: function(e, item) {
        var list = item.parent();
        var elements = $('.selected:not(.to-resize)', list);
        if (elements.length === 0) {
          return item;
        }
        elements.addClass("move-hide");
        var helper = $('<li>', {
          class: "ui-state-default",
          style: "width: 178px"
        });
        helper.text(elements.length + " Users");
        return helper;
      },
      stop: function(e, ui) {
        var list = $(this);
        var elements = $(".move-hide", list);
        elements.each(function(ind, el) {
          ui.item.before($(el));
        });
        $(".move-hide", list).removeClass("move-hide selected");
      }
    });
    $('.users-list').disableSelection();
  }
  setUsersList();
});
.sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
}

.sortable li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  height: 1.5em;
}

.sortable li.selected {
  border-color: red;
}

.sortable li.move-hide {
  display: none;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="users-list-1" class="sortable users-list">
  <li class="ui-state-default">User 1</li>
  <li class="ui-state-default">User 2</li>
  <li class="ui-state-default">User 3</li>
  <li class="ui-state-default">User 4</li>
  <li class="ui-state-default">User 5</li>
  <li class="ui-state-default">User 6</li>
  <li class="ui-state-default">User 7</li>
</ul>

仍然存在一些逻辑问题,例如如果用户单击以拖动单个项,则会创建 mousedown , drag , drop , mouseup 一系列事件。发生的情况是,对单个列表项的排序完成,然后触发对该项的单击。

您也无法取消选择项目。你可以考虑加上这个。

希望能有所帮助。

2 年前
回复了 Twisty 创建的主题 » jquery draggable:仅在一个可下拉列表上可拖动

如果没有看到完整的代码,就很难提供帮助。我建议这样做:

$(function(){
  var $grid = $('.grid-drop').droppable({
    accept: '.block',
    hoverClass: 'hovered',
    drop: handlePublishBlock
  });
  var isDragging = false;
  $(".draggable-one").draggable({
    start: function(e, ui){
      $grid.droppable("option", "accept", ".draggable-one");
      console.log(e.type);
      isDragging = true;
    },
    stop: function(e, ui){
      $grid.droppable("option", "accept", ".block");
      console.log(e.type);
      isDragging = false;
    }
  });
});