j-Paper

Az összetevő szerkeszt egy dokumentumot, mint a widget tárgyak sorozata. köti a modellt útvonalat erre a sorozatra, állítsa be a widgets tárolóhelyet, és használja az autosave-t, hogy szerkesztéseket írjon vissza a modellekhez.

• Az eredmény egy egyszerű Object Array szerkezet:
  • [{ id: String, widget: String, newbie: Boolean, changed: Boolean, config: Object }]
• Személyi adatbázis: https://github.com/totaljs/parts/tree/main/paper

konfiguráció:

• A readonly {Number} engedélyezi / megakadályozza a 0=disabled, 1=partially enabled, 2=fully enabled módot
• parent {String} opcionális, a min-magasság szülőelem (default: null)
• margin {Number} extra margin min-magasság (default: 0)
• A autosave {Boolean} változások automatikusan sorozódnak az útvonal szerint
• widgets {String} a widgetekhez való link (default: Componentator CDN)
  • Több címet is tartalmazhat, amelyet a comma mywidget1.html,/mywidget2.html,etc.. oszt meg.
  • vagy megtarthatod CDN szerkezete
• icon {String} a function(opt, callback) címre
  • opt.element {jQuery element}
  • FONTOS: hívja a callback érvet, ha az ikon megváltozott az elemben
• link {String} a function(opt) címre
  • opt.element {jQuery element}
  • opt.href {String}
  • opt.target {String}
  • opt.widget {Object} egy widget példány
• command {String} a function(cmd) címre
  • cmd.widget {Object} egy ideiglenes widget
  • cmd.widgets {Array} regisztrált widgetek listája
  • cmd.remove() {Function} eltávolítja a widget
  • cmd.append(name) helyettesíti a jelenlegi ideiglenes widget egy új widget (name név widget)
• format {String} a function(toolbar) címre
  • A toolbar lehet a null
  • toolbar.element {jQuery element} - jelenlegi elem
  • toolbar.node {HTML element} - jelenlegi elem
  • toolbar.widget {Object} egy widget példány
  • A toolbar.style {Object} jelenlegi stílust tartalmaz, például a bold: 1, link: 1
• upload {String} a function(opt, callback) címre
  • opt.accept {String} opcionális
  • opt.files {FileList} opcionális
  • opt.multiple {Boolean} opcionális, alapértelmezett: false
  • opt.width {Number} opcionális
  • opt.height {Number} opcionális
  • FONTOS: A callback érv futtatása után a files {Array} érvkel kell végrehajtani
• change {String} a function(change) címre
  • change.id {String} azonosító
  • change.block {String} egy blokk azonosító
  • change.blockprev {String} egy korábbi blokk azonosító
  • change.widget {String} egy widget azonosító
  • change.type {String} műveleti típus (beállítása, frissítése, eltávolítása)
• contextmenu {String} egy link a function(widget) amikor a felhasználó megnyomta a jobb egér gombot a widgeten
• check {String} egy link a function(widget) amely eldönti, hogy engedélyezze-e a szerkesztést vagy sem
• placeholder {String} egy helytartó az alapértelmezett HTML widget (default: Press / for adding rich content)

módszerek:

• component.save(function(data, ischange) { a tartalmak megtakarításához
• component.import(url or url_array, [callback]) további widgetek importálására
• A component.notify(event, [a], [b], [c], [d]) minden widgetben eseményt ad ki

Jó tudni:

Az összetevő létrehoz egy globális változó nevű window.papercache {Object} által használt minden j-Paper példák.

• Az összetevő összehasonlítja a tartalmat, amikor adatokat módosít, így valós idejű adatok megváltoztatása
• a komponens (a formában) paper-yourwidgetname osztályát minden widget elemre adja meg
• HTML osztályok readonly, widget, selected
  • Használat: .readonly .paper-yourwidgetname { ... }
• A htmlelement.$widget {Object} tartalmaz egy widget példát
  • A widget.remove() módszer eltávolítja a widgetet

Rövid szövegek Edit:

• A CMD + m hangsúlyozza a szöveg
• A CMD + l létrehoz egy linket
• A CMD + p egy ikonot ad
• CMD + b Boldog
• CMD + i Olaszország
• CMD + u aljzat

Jó tudni:

• A [data-prevent] tulajdonság megakadályozhatja a kattintást a widgetben

Használat

<ui-component name="paper" path="form.widgets"
  config="autosave:true;widgets:/paper/db.json"></ui-component>
<script>
  SET('form.widgets', []);
  function saveDocument() {
    SETTER('paper/save', function(widgets) {
      console.log(widgets);
    });
  }
</script>

Szolgáltatja a widget indexet /paper/db.json és annak widget fájlokat az alkalmazásból.

forrásból : Total.js összetevőkSzerzői jog Peter Širka és hozzájárulók. A licenc.