A swipe slider is a frequently-used control in mobile application.
here is some tips. 
Frist part, we need to create a customized widget.
Step1. Select a JS slider lib. e.g. flexslider
Step2. write handler.js
after that, we get a slider, support html sliding, but we need add composite in slider.
Second part, add control to slider.
Step1. name every slide.
public void addControl(Control control, String thumbUrl) {
if (items == null) {
items = new ArrayList<Map<String, String>>();
}
UIToolkit.setAttribute(control, "name", "slider"+items.size());
//rap.getObject( '", id, "' ).", $el, ".attr( '", attr, "', '", value + "' );
Map<String, String> map = new HashMap<String, String>();
map.put("name", "slider");
map.put("thumb", thumbUrl);
items.add(map);
}
Step2.modify handler.js, find control, move it into slide and fix css
onRender : function() {
rap.off("render", this.onRender);
var i;
for (i in this.setting.items) {
var item = document.createElement("li");
item.setAttribute("data-thumb", this.setting.items[i].thumb);
var slider = $("[name='slider" + i + "']");
slider.css({
"position" : "relative",
"width" : "100%"
});
slider.attr({"name":"appended"});
slider.appendTo(item);
this.ul.appendChild(item);
}
[Updated on: Wed, 27 July 2016 16:43]
Report message to a moderator
] 
Search
Help
Register
Login
Home
