Template Examples - Toggle Switch"

From Documentation
(Created page with "{{Template:Smalltalk_Author| |author=Robert Wenzel, Engineer, Potix Corporation |date=May 2017 |version=ZK 8.0 }} = Introduction = The web is full of html5/css based layout exa...")
 
Line 10: Line 10:
 
e.g. this: http://callmenick.com/post/css-toggle-switch-examples
 
e.g. this: http://callmenick.com/post/css-toggle-switch-examples
  
−
= Using the original markup =
+
= Using the original markup and styles =
 +
 
 +
A very basic way to integrate a 3rd party layout is to simply re-use the markup with xhtml components.
 +
 
 +
<source lang="html">
 +
<head>
 +
<link href="css/base.css" rel="stylesheet">
 +
<link href="css/style.css" rel="stylesheet">
 +
...
 +
<head>
 +
<body>
 +
...
 +
<div>
 +
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
 +
<label for="cmn-toggle-1"></label>
 +
</div>
 +
...
 +
</body>
 +
</source>
 +
 
 +
 
 +
ZK's xhtml component set can be combined with ZUL components - using the xhtml namespace '''LINKME'''.
 +
 
 +
<source lang="xml">
 +
<?style src="css/cmn-toggle-original.css"?>
 +
<?style src="css/cmn-toggle-custom.css"?>
 +
 
 +
<zk xmlns:x="xhtml">
 +
<div><!-- zk div -->
 +
<x:div><!-- xhtml div -->
 +
<x:input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox"/>
 +
<x:label for="cmn-toggle-1"/>
 +
</x:div>
 +
...
 +
</div>
 +
</zk>
 +
</source>
  
 
= Streamlining with <template> =
 
= Streamlining with <template> =

Revision as of 07:12, 18 May 2017

DocumentationSmall Talks2017JuneTemplate Examples - Toggle Switch
Template Examples - Toggle Switch
Author
Robert Wenzel, Engineer, Potix Corporation
Date
May 2017
Version
ZK 8.0

Introduction

The web is full of html5/css based layout examples ... e.g. this: http://callmenick.com/post/css-toggle-switch-examples

Using the original markup and styles

A very basic way to integrate a 3rd party layout is to simply re-use the markup with xhtml components. 

<head>
	<link href="css/base.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
...
<head>
<body>
...
	<div>
		<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
		<label for="cmn-toggle-1"></label>
	</div>
...
</body>


ZK's xhtml component set can be combined with ZUL components - using the xhtml namespace LINKME. 

<?style src="css/cmn-toggle-original.css"?>
<?style src="css/cmn-toggle-custom.css"?>

<zk xmlns:x="xhtml">
	<div><!-- zk div -->
		<x:div><!-- xhtml div -->
			<x:input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox"/>
			<x:label for="cmn-toggle-1"/>
		</x:div>
...
	</div>
</zk>

Streamlining with <template>

Customize ZK's <checkbox> component

Summary

Example Sources

The code examples are available on github in the zk-template-examples repository

zul files: https://github.com/zkoss-demo/zk-template-examples/tree/master/src/main/webapp/css-toggle-switch
java classes: https://github.com/zkoss-demo/zk-template-examples/tree/master/src/main/java/zk/example/template/stepbar

Running the Example

Clone the repo 

   git clone [email protected]:zkoss-demo/zk-template-examples.git

The example war file can be built using the gradle-wrapper (on windows simply omit the prefix './'): 

   ./gradlew war

Execute using jetty: 

   ./gradlew appRun

Then access the example http://localhost:8080/zk-template-examples/css-toggle-switch/


Comments



Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.
Retrieved from "https://www.zkoss.org/_w/index.php?title=Small_Talks/2017/June/Template_Examples_-_Toggle_Switch&oldid=45791"