Buy me a coffee :)

Wicket - jQuery UI

jQuery UI integration in Wicket 6.x, Wicket 7.x , Wicket 8.x & Wicket 9.x

Effect Behavior: dynamic

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Components / Samples

Description

This sample shows how to dynamically use a JQueryEffectBehavior.

Unlike the effect behavior sample, where the behavior is run directly, the effect behavior here is run after an event occurs (the button's click event). The behavior's javascript statement is added to the AjaxRequestTarget.

Sources

package com.googlecode.wicket.jquery.ui.samples.jqueryui.effect;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.form.Form;

import com.googlecode.wicket.jquery.core.JQueryBehavior;
import com.googlecode.wicket.jquery.ui.JQueryUIBehavior;
import com.googlecode.wicket.jquery.ui.effect.Effect;
import com.googlecode.wicket.jquery.ui.effect.JQueryEffectBehavior;
import com.googlecode.wicket.jquery.ui.form.button.AjaxButton;

public class DynamicEffectPage extends AbstractEffectPage
{
	private static final long serialVersionUID = 1L;

	public DynamicEffectPage()
	{
		this.add(new JQueryUIBehavior("#tabs", "tabs"));

		Form<Void> form = new Form<Void>("form");
		this.add(form);

		form.add(new AjaxButton("button") {

			private static final long serialVersionUID = 1L;

			@Override
			protected void onSubmit(AjaxRequestTarget target)
			{
				// run effect with default speed //
				target.appendJavaScript(JQueryEffectBehavior.toString("#tabs", Effect.Explode));

				// re-display the panel //
				JQueryBehavior behavior = new JQueryUIBehavior("#tabs", "fadeIn");
				target.appendJavaScript(behavior.toString());
			}
		});
	}
}
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket jQuery UI: dynamic effect</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<div id="tabs">
		<ul>
			<li><a href="#tab1">Tab 1</a></li>
		</ul>
		<div id="tab1">
			Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
			Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
			condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
			Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum
			a velit eu ante scelerisque vulputate.
		</div>
	</div>
	<br/>
	<form wicket:id="form">
		<button wicket:id="button">Play effect</button>
	</form>
</wicket:extend>
</body>
</html>