observable-framework-lib-jquery-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Library: jQuery UI

库：jQuery UI

Observable Framework documentation: Library: jQuery UI Source: https://observablehq.com/framework/lib-jquery-ui

jQuery UI is a set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

html

<link rel="stylesheet" href="npm:jquery-ui/dist/themes/base/jquery-ui.css">

import $ from "npm:jquery";
self.jQuery = $;
await import("npm:jquery-ui");

Price range: ${value.join("–")}

Price range: ${value.join("–")}

html

<div style="max-width: 320px;" id="slider"></div>

const value = Generators.observe((notify) => {
  const slider = $("#slider");
  slider.slider({
    range: true,
    min: 0,
    max: 500,
    values: [5, 300],
    slide: (event, ui) => notify(ui.values)
  });
  notify(slider.slider("values"));
});

Observable Framework 文档：库：jQuery UI 来源：https://observablehq.com/framework/lib-jquery-ui

jQuery UI 是基于jQuery JavaScript库构建的一套用户界面交互、特效、组件和主题集合。

html

<link rel="stylesheet" href="npm:jquery-ui/dist/themes/base/jquery-ui.css">

import $ from "npm:jquery";
self.jQuery = $;
await import("npm:jquery-ui");

价格范围：${value.join("–")}

Price range: ${value.join("–")}

html

<div style="max-width: 320px;" id="slider"></div>

const value = Generators.observe((notify) => {
  const slider = $("#slider");
  slider.slider({
    range: true,
    min: 0,
    max: 500,
    values: [5, 300],
    slide: (event, ui) => notify(ui.values)
  });
  notify(slider.slider("values"));
});