j-Display

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Komponenten mäter en skärmstorlek enligt det aktuella elementet. den använder WIDTH()-metoden och lägger till en CSS-klass i formuläret jc-DISPLAY_SIZE:

jc-xs extra liten skärm (mobiltelefon)
jc-sm liten skärm (tablett)
jc-md medium display (laptop)
jc-lg storskärm (skrivbordsdatorn)

Konfigurera:

delay {Number} en försening för att få storlek (default: 100 ms)
NEW: xs {Number} en maximal bredd för extra liten skärm (default: 768)
NEW: sm {Number} en maximal bredd för den lilla skärmen (default: 992)
NEW: md {Number} en maximal bredd för median (default: 1200)

Komponenten beräknar intervallet mellan skärmarna automatiskt. standardtypen är lg.

Använd den med <ui-component name="display">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

example.html

<div style="width:500px;padding:10px;border:1px solid #E0E0E0">
	<ui-component name="display" path="common.xs">
		<ui-bind path="common.xs" config="text" class="block"></ui-bind>
	</ui-component>
</div>
<br />
<div style="width:800px;padding:10px;border:1px solid #E0E0E0">
	<ui-component name="display" path="common.sm">
		<ui-bind path="common.sm" config="text" class="block"></ui-bind>
	</ui-component>
</div>
<br />
<div style="width:1080px;padding:10px;border:1px solid #E0E0E0">
	<ui-component name="display" path="common.md">
		<ui-bind path="common.md" config="text" class="block"></ui-bind>
	</ui-component>
</div>
<br />
<div style="width:1380px;padding:10px;border:1px solid #E0E0E0">
	<ui-component name="display" path="common.lg">
		<ui-bind path="common.lg" config="text" class="block"></ui-bind>
	</ui-component>
</div>
<br />