Zk 积分 lightbox.js
Zk integrating lightbox.js
仅当我硬编码图像 URL 时,我才能使用 lightbox.js 在 ZK 框架中查看图像。我需要一种从 ViewModel 设置 URL 的方法,但我无法实现。这是我到目前为止所做的:
<zk apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.shahukhalroshan.vm.TestVM')" xmlns:h="native">
<style src="lightbox.css" />
<div>
<h:a class="example-image-link" href="http://www.quicksprout.com/images/foggygoldengatebridge.jpg" data-lightbox="example-1">
<image id="imgUrl" sclass="example-image" src="http://www.quicksprout.com/images/foggygoldengatebridge.jpg" width="100px" height="100px" />
</h:a>
</div>
<script src="lightbox-plus-jquery.js"></script>
</zk>
按如下方式替换 src 不起作用:
<h:a class="example-image-link" href="@load(vm.imageUrl)" data-lightbox="example-1">
<image id="imgUrl" sclass="example-image" src="@load(vm.imageUrl)" width="100px" height="100px" />
</h:a>
提前致谢!
要事第一。
您不能在zk
标签中声明视图模型。
将 zk
标签更改为 window
时,我可以访问视图模型,但当然仍然不正确。
所以我在 getter 中添加了一些 JQuery 来修复它。
祖尔:
<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('pkg$.TestVM')" xmlns:h="native">
<div>
<h:a id="anchor" class="example-image-link" data-lightbox="example-1">
<image id="imgUrl" sclass="example-image" src="@load(vm.url)" width="100px" height="100px"/>
</h:a>
</div>
</window>
TestVM.java:
private String url = "http://www.quicksprout.com/images/foggygoldengatebridge.jpg";
public String getUrl() {
Clients.evalJavaScript("jq('#anchor')[0].href='" + url + "';");
return url;
}
仅当我硬编码图像 URL 时,我才能使用 lightbox.js 在 ZK 框架中查看图像。我需要一种从 ViewModel 设置 URL 的方法,但我无法实现。这是我到目前为止所做的:
<zk apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.shahukhalroshan.vm.TestVM')" xmlns:h="native">
<style src="lightbox.css" />
<div>
<h:a class="example-image-link" href="http://www.quicksprout.com/images/foggygoldengatebridge.jpg" data-lightbox="example-1">
<image id="imgUrl" sclass="example-image" src="http://www.quicksprout.com/images/foggygoldengatebridge.jpg" width="100px" height="100px" />
</h:a>
</div>
<script src="lightbox-plus-jquery.js"></script>
</zk>
按如下方式替换 src 不起作用:
<h:a class="example-image-link" href="@load(vm.imageUrl)" data-lightbox="example-1">
<image id="imgUrl" sclass="example-image" src="@load(vm.imageUrl)" width="100px" height="100px" />
</h:a>
提前致谢!
要事第一。
您不能在zk
标签中声明视图模型。
将 zk
标签更改为 window
时,我可以访问视图模型,但当然仍然不正确。
所以我在 getter 中添加了一些 JQuery 来修复它。
祖尔:
<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('pkg$.TestVM')" xmlns:h="native">
<div>
<h:a id="anchor" class="example-image-link" data-lightbox="example-1">
<image id="imgUrl" sclass="example-image" src="@load(vm.url)" width="100px" height="100px"/>
</h:a>
</div>
</window>
TestVM.java:
private String url = "http://www.quicksprout.com/images/foggygoldengatebridge.jpg";
public String getUrl() {
Clients.evalJavaScript("jq('#anchor')[0].href='" + url + "';");
return url;
}