mozilla
Wyniki wyszukiwania

    Wiązania XBL

    Ta strona opisuje jak możesz używać CSS-u w Mozilli, aby poprawić strukturę złożonych aplikacji, sprawiając, że kod i zasoby stają się wygodniejsze do zarządzania i ponownego użycia.

    Wykorzystasz te techniki w przykładowej demonstracji.

    Informacja: Wiązania XBL

    Struktura dostarczana przez język znaczników i CSS nie jest idealna dla złożonych aplikacji, gdzie fragmentu muszą być kompletne i umożliwiać ponowne wykorzystanie. Możesz umieścić arkusze stylów w osobnych plikach, możesz umieścić skrypty w osobnych plikach. Ale musisz dodawać odnośniki do tych plików z dokumentu.

    Inne ograniczenie strukturalne dotyczy zawartości. Możesz użyć CSS, aby dodać zawartość do wybranych elementów, ale ta zawartość jest ograniczona do tekstu i obrazków, a ich pozycjonowanie jest ograniczone do przed i za wybranym elementem.

    Mozilla dodaje mechanizm, który pozwala pokonać te ograniczenia: XBL (Język Wiązań XML). Możesz używać XBL-a do wiązania wybranych elementów:

    • arkuszy stylów,
    • zawartości,
    • właściwości i metod,
    • uchwytów zdarzeń.

    Ponieważ unikasz umieszczania odnośników do tego wszystkiego w dokumencie, możesz stworzyć elementy kompletne, którymi łatwo można zarządzać i które można wielokrotnie wykorzystywać.

    Więcej szczegółów
    Aby dowiedzieć się więcej o wiązaniach XBL, zajrzyj na stronę o XBL na tym wiki.

    Zadanie: Demonstracja XBL-a

    Stwórz nowy dokument HTML, doc6.html. Skopiuj i wklej do niego poniższy kod:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
    <HTML>
    
    <HEAD>
    <TITLE>Mozilla CSS Getting Started - XBL demonstration</TITLE>
    <LINK rel="stylesheet" type="text/css" href="style6.css"></strong>
    </HEAD>
    
    <BODY>
    <H1>XBL demonstration</H1>
    <DIV id="square">Click Me</DIV>
    </BODY>
    
    </HTML>
    

    Stwórz nowy plik CSS, style6.css. Ten arkusz stylów zawiera style dokumentu. Skopiuj i wklej do niego poniższy kod:

    /*** XBL demonstration ***/
    #square {
      -moz-binding: url("square.xbl#square");
      }
    

    Stwórz nowy plik tekstowy, square.xbl. Ten plik zawiera wiązanie XBL. Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:

    <?xml version="1.0"?>
    <!DOCTYPE bindings>
    <bindings xmlns="http://www.mozilla.org/xbl">
    
    <binding id="square">
    
      <resources>
        <stylesheet src="bind6.css"/>
        </resources>
    
      <content xmlns="http://www.w3.org/1999/xhtml">
        <div anonid="square"/>
        <button anonid="button" type="button">
          <xbl:children/>
          </button>
        </content>
    
      <implementation>
    
        <field name="square"><![CDATA[
          document.getAnonymousElementByAttribute(this, "anonid", "square")
          ]]></field>
    
        <field name="button"><![CDATA[
          document.getAnonymousElementByAttribute(this, "anonid", "button")
          ]]></field>
    
        <method name="doDemo">
          <body><![CDATA[
            this.square.style.backgroundColor = "#cf4"
            this.square.style.marginLeft = "20em"
            this.button.setAttribute("disabled", "true")
            setTimeout(this.clearDemo, 2000, this)
            ]]></body>
          </method>
    
        <method name="clearDemo">
          <parameter name="me"/>
          <body><![CDATA[
            me.square.style.backgroundColor = "transparent"
            me.square.style.marginLeft = "0"
            me.button.removeAttribute("disabled")
            ]]></body>
          </method>
    
        </implementation>
    
      <handlers>
        <handler event="click" button="0"><![CDATA[
         if (event.originalTarget == this.button) this.doDemo()
         ]]></handler>
        </handlers>
    
      </binding>
    
    </bindings>
    

    Stwórz nowy plik CSS, bind6.css. Ten arkusz stylów zawiera style do wiązań. Skopiuj i wklej do niego poniższy kod:

    /*** XBL demonstration ***/
    [anonid="square"] {
      width: 20em;
      height: 20em;
      border: 2px inset gray;
      }
    
    [anonid="button"] {
      margin-top: 1em;
      padding: .5em 2em;"
      }
    

    Otwórz dokument w swojej przeglądarce i naciśnij przycisk.

    To wiki nie obsługuje JavaScript-u na stronach, więc nie jest możliwe pokazanie demonstracji. Wygląda to mniej więcej tak jak poniżej, przed i po naciśnięciu przycisku:

    XBL demonstration

    XBL demonstration

    Uwagi dotyczące demonstracji:

    • Dokument HTML posiada odnośniki do arkusza stylów, ale także do pliku JavaScript.
    • Dokument nie posiada żadnego przycisku. Posiada jedynie tekst, który pojawi się na nim. Przycisk jest dodawany przez wiązanie.
    • Arkusz stylów dokumentu posiada odnośnik do wiązania.
    • Wiązanie ma odnośnik do własnego arkusza stylów i własną treść oraz kod JavaScript. Wiązanie zawiera własną zawartość.
    Wyzwanie
    Zmień plik XBL tak, aby obiekt square poszerzał się dwukrotnie, zamiast przeskakiwania w prawo, kiedy zmienia kolor.

    Użyj Inspektora DOM, aby zbadać dokument, analizując dodaną zawartość.

    Co dalej?

    Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

    W tej demonstracji obiekt square oraz przycisk tworzą kompletną kontrolkę, która działa wewnątrz dokumentu HTML.

    Mozilla posiada wyspecjalizowany język znaczników do tworzenia interfejsów użytkownika. Demonstruje to następna strona: XUL-owe interfejsy użytkownika

    Autorzy i etykiety dokumentu

    Etykiety: 
    Contributors to this page: Anonymous, Takenbot, Verruckt, Ptak82, gandalf, teoli, Witia
    Ostatnia aktualizacja: teoli,