• pages -1 requests
  • 16 pps (62 ms 8.2f)
  • 80b130 xDef

Ullia Web insta-layout

  •  

    Bewertungs-Sterne (Rating)

    mit Pure CSS

    Idee: Radio-Buttons welche die Anzahl der vergebenen Sterne abbilden.

    Diese Radiobuttons werden absteigend [5..1] und hintereinander im HTML plaziert, direkt dahinter kommen die jeweils zugehörenden label (ebenfalls hintereinander absteigend)

    Mit Hilfe von CSS-Klassen (star-five oder star-six) werden die Label-Elemente als Sterne dargestellt.


    distributeCtrlLblInto-b:64@div#ratingstar-container#star-five
    distributeCtrlLblInto-a:72@section#ratingstar-container#star-six

    Dieses Beispiel:

    Die unteren sechseckigen Sterne sind nur anklickbar, wenn in der ersten Stern-Reihe


    (Die fünfeckigen ) mindestens vier Sterne ausgewählt sind.

  • sysForm_showcase-apperance-controls-ratingstars-with-radiolist
    __key_name___type_req_maxlen_custRenderActions_class_persistent_setState_data_clientId_eventHandling_default_familyGroup_authDisabled_custRenderFamGrp
    id_key10T:
    Teaserrichtext-1size_full
    RatingStars-5buttons_like_radioList128distributeCtrlLblInto-*:64@span#ratingstar-container#star-five11[5..1]myRating5onChange-A
    RatingStars-6buttons_like_radioList128distributeCtrlLblInto-a:72@section#ratingstar-container#star-six11[6..1]myRading6onChange-.2ANOT: sysStateKeyVal_RatingStars-5_4 [OR] sysStateKeyVal_RatingStars-5_5
    containerHTML-Content128Aa b
    how-totabDefViewer128size_full fc_onlySELECT sysForm_showcase-apperance-controls-ratingstars-with-radiolist