Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi guys,
I am looking for a solution that allows me to smoothly slide between multiple child components when I click a button.
E.g. I have a Window component. In this window, I have 1 div component. When I click a button, I want this div to "slide" out to the left and a new div to slide in (from the right).
I know that jQuery has this animation effect build-in but what's best practice to implement this with ZK?
Thanks for the hint but that slides the component from top to bottom.
But I want a right-to-left slide animation.
(Will also need left-to-right later).
Hi valmar,
Please refer to the sample below:
<zk>
<script type="text/javascript"><![CDATA[
function slide (first, dir) {
var $firstDiv = jq('#'+first),
left = parseInt($firstDiv.css('left'),10),
toSlide = (dir == 'left')? left > -300 : left < 0;
if (toSlide) {
for (var c = $firstDiv[0]; c; c = c.nextSibling) {
var $c = jq(c),
$cLeft = parseInt($c.css('left'),10);
$c.animate({
left: dir == 'left' ? $cLeft - 150 : $cLeft + 150
}, 400);
}
}
}
]]></script>
<window id="win" border="normal" title="window" height="300px" width="150px" style="position: relative; overflow: hidden;">
<div height="250px" width="130px" style="position: absolute; background-color: #009900; margin-left: 10px; left: 0px;" />
<div height="250px" width="130px" style="position: absolute; background-color: #000099; margin-left: 10px; left: 150px;" />
<div height="250px" width="130px" style="position: absolute; background-color: #009999; margin-left: 10px; left: 300px;" />
</window>
<button label="slide left">
<attribute name="onClick">
Clients.evalJavaScript("slide ('"+win.getFirstChild().getUuid()+"', 'left');");
</attribute>
</button>
<button label="slide right">
<attribute name="onClick">
Clients.evalJavaScript("slide ('"+win.getFirstChild().getUuid()+"', 'right');");
</attribute>
</button>
</zk>
For more information, please refer to
JQuery animate
Slide Elements in Different Directions
Regards,
ben
Uh, that's very cool. Thanks a lot, benbai.
In the meantime, I created a different, own implementation though:
<?page title="Auto Generated index.zul"?>
<window title="Hello World!!" border="normal" width="1024" height="768px">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
function slide(){
$(".box1").hide("slide", { direction: "left" }, 500);
$(".box2").show("slide", { direction: "right" }, 500);
}
</script>
<hbox>
<div id="box3" class="box3" width="250px" height="200px" style="background-color: orange;" visible="true" />
<div>
<div id="box1" class="box1" width="250px" height="200px" style="position: absolute; background-color: red;" visible="true" />
<div id="box2" class="box2" width="250px" height="200px" style="position: absolute; background-color: green" visible="true" />
</div>
</hbox>
<button label="slide" xmlns:w="http://www.zkoss.org/2005/zk/client" w:onClick="slide()" />
</window>I downloaded an existing implementation called Easy Slider. It is easily configurable, has and looks pretty nice. To get started, once you have downloaded it, copy and paste the .js and .css files and images into your project's web content.
Then in your zul:
<zk xmlns:c="client">
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
zk.afterMount(function() {
jq("$slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>
<style src="css/screen.css" />
<div id="slider">
<n:ul xmlns:n="native">
<n:li><image src="images/slider/01.jpg"/></n:li>
<n:li><image src="images/slider/02.jpg"/></n:li>
<n:li><image src="images/slider/03.jpg"/></n:li>
<n:li><image src="images/slider/04.jpg"/></n:li>
<n:li><image src="images/slider/05.jpg"/></n:li>
</n:ul>
</div>
</zk>One thing I noticed is that the listitem width and height get messed up (probably a conflict with ZK's javascript), so I changed the easySlider1.7.js file at line 64 and 65 to make the list items have a fixed width and height, like so:
var w = 696;//$("li", obj).width();
var h = 241;//$("li", obj).height();Hope this helps,
Richard
Interesting example Richard thanks for sharing!
I was struggling with the same thing some weeks ago and the width/height was also my main problem! I've tried your snippet without the hardcoded width/height and it's not that bad: the width is working fine with a 100% of the space, height is not.
Anyway: i quote Valmar 100%: this container would be really really nice to have!
Giovanni
Hi everybody,
I've tried this valmar code
<?page title="Auto Generated index.zul"?>
<window title="Hello World!!" border="normal" width="1024" height="768px">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
function slide(){
$(".box1").hide("slide", { direction: "left" }, 500);
$(".box2").show("slide", { direction: "right" }, 500);
}
</script>
<hbox>
<div id="box3" class="box3" width="250px" height="200px" style="background-color: orange;" visible="true" />
<div>
<div id="box1" class="box1" width="250px" height="200px" style="position: absolute; background-color: red;" visible="true" />
<div id="box2" class="box2" width="250px" height="200px" style="position: absolute; background-color: green" visible="true" />
</div>
</hbox>
<button label="slide" xmlns:w="http://www.zkoss.org/2005/zk/client" w:onClick="slide()" />
</window>You could use a Timer component to call the slide function or use the easySlider third party js (see above).By the way, jquery is already included in zk so you don't need the script for that.
Asked: 2012-01-19 17:17:35 +0800
Seen: 644 times
Last updated: May 30 '15