Source :
1. Buat file CSS : scriptcss.css
\
/*****Panel Customize*****/
.z-panel-tl {
height: 4px;
}
.z-panel-hl .z-panel-header {
padding: 2px 3px 5px;
}
.z-caption-l {
padding-left: 10px;
font-weight: bold;
}
.z-panel-cl {
padding-left: 1px;
}
.z-panel-cr {
padding-right: 1px;
}
.z-panel-noborder .z-panel-btm div.footer {
padding: 2px 0;
border-left: 0 none;
border-right: 0 none;
}
.z-panel .z-panel-cl .z-panel-children-noborder {
padding-left: 5px;
padding-right: 3px;
background-color: #F1F9FF;
}
/*****Text Style*****/
span.name {
font-size: 12px;
display: block;
width: 50px;
text-align: right;
font-weight: bold;
}
.attachBtn .z-toolbarbutton-cnt {
font-weight: bold;
color: #F25D45;
}
.newFile {
padding-left: 10px;
}
/*****Attach Field*****/
.z-toolbar {
background: none;
}
.z-toolbar .fileList a{
border: 0 none;
text-decoration: underline;
background: none;
}
/*****Input Field*****/
.input-area {
margin: 0 3px;
border-top: 1px solid #ECECEC;
}
.input-area .z-textbox {
border: 0 none;
}
/*****UPMSample1*****/
.UPMSample1 .msg span {
height: 15px;
padding-left:10px;
font-size:12px;
}
.UPMSample1 .z-progressmeter {
width: 100px;
height: 10px;
}
/*****UPMSample2*****/
.UPMSample2 {
background:#F4F8FF;
border-top: 1px solid #99AABD;
border-bottom: 1px solid #99AABD;
font-family: tahoma,helvetica,arial,sans-serif;
font-size: 11px;
padding: 3px;
width: 542px;
color: #0F3B82;
}
.UPMSample2 a {
color: #0366AC;
font-weight: bold;
cursor: pointer;
}
.UPMSample2 .float-left {
float: left;
}
.UPMSample2 .float-right {
float: right;
}
.UPMSample2 .clear {
clear: both;
}
2. Buat File javascript : filescript.js
zk.afterMount(function() {
//Upload Progress Monitor Sample 1
zk.UPMSample1 = zk.$extends(zk.Object, {
updated : null,
$init : function(uplder, filenm) {
this._uplder = uplder;
var id = uplder.id;
//Add message and progressmeter
zk.Widget.$(jq("$flist")).appendChild(
new zul.box.Hlayout({
id: id + "_layout",
spacing: "6px",
sclass: "UPMSample1",
children: [
new zul.wgt.Html({
content: ['
‘, filenm,’
‘].join(“”) }), new zul.wgt.Progressmeter({ id: id + “_pgs” })] }) ); }, update : function(sent, total) { zk.Widget.$(jq(‘$’ + this._uplder.id + ‘_pgs’)).setValue(sent); }, destroy : function() { var layout = jq(‘$’ + this._uplder.id + “_layout”); if (zk.ie) { zk.Widget.$(layout).detach(); } else { layout.animate({ width: 1}, 500, function() { zk.Widget.$(layout).detach(); }); } } }); //Upload Progress Monitor Sample 2 zk.UPMSample2 = zk.$extends(zk.Object, { updated : null, $init : function(uplder, filenm) { this._uplder = uplder; var id = uplder.id, uri = ‘../widgets/effects/upload_effect/img/upload-loader.gif’, html = [‘
‘, ”, ‘
FileName: ‘, filenm , ‘
‘, ‘
‘, msgzk.FILE_SIZE, ‘0 of ‘, ‘0‘, ‘ (0%)‘, ‘
‘].join(“”); jq(“$footer”).append(html); this.viewer = jq(‘#’ + id)[0]; }, update : function(sent, total) { jq(‘#’ + this._uplder.id + ‘-sent’).html(Math.round((total / 1024) * sent / 100) + msgzk.KBYTES); if (!this.updated) { this.updated = true; jq(‘#’ + this._uplder.id + ‘-total’).html(Math.round(total / 1024) + msgzk.KBYTES); } jq(‘#’ + this._uplder.id + ‘-percent’).html(” (” +sent + “%” + “)”); }, destroy : function() { jq(this.viewer).slideUp(1000); } }); });
3. Buat File : index.zul
<zk xmlns:c="client">
<zscript><![CDATA[
String dir = "/widgets/effects/upload_effect";
]]></zscript>
<style src="WEB-INF/scriptcss.css" />
<panel width="550px" framable="true">
<caption label="ZK Mail Sender">
<button label="Send" onClick='alert("Send!")' />
<button label="Draft" />
<button label="Discard" />
</caption>
<toolbar>
<vlayout spacing="6px">
<hlayout><label sclass="name" value="To : " /><textbox value="info@zkoss.org" width="480px" /></hlayout>
<hlayout><label sclass="name" value="CC : " /><textbox value="myDearBoss@yourCompany.com" width="480px" /></hlayout>
<hlayout><label sclass="name" value="Subject : " /><textbox value="Kindly View The Attachment" width="400px" />
<button id="attachBtn" sclass="attachBtn" src="/img/Centigrade-Widget-Icons/PaperClip-16x16.png"
upload="true,maxsize=10240" label="Attach" onUpload="addItem()"/></hlayout>
<vlayout id="flist" width="400px" sclass="fileList" />
</vlayout>
</toolbar>
<panelchildren>
<div sclass="input-area">
<textbox multiline="true" rows="10" width="99%" >
<attribute name="value"><![CDATA[
Hi,
I am writing to confirm you about the budget of annual meeting.
Please view the detail as attachment below.
BR]]></attribute>
</textbox>
</div>
</panelchildren>
<toolbar sclass="footer">
<div id="footer"></div>
</toolbar>
</panel>
<zscript><![CDATA[
void addItem() {
org.zkoss.util.media.Media media = event.getMedia();
Hlayout hl = new Hlayout();
hl.setSpacing("6px");
hl.setClass("newFile");
hl.appendChild(new Label(media.getName()));
A rm = new A("remove");
rm.addEventListener(Events.ON_CLICK,new org.zkoss.zk.ui.event.EventListener(){
public void onEvent(Event event) throws Exception {
hl.detach();
}
});
hl.appendChild(rm);
flist.appendChild(hl);
}
]]></zscript>
<script type="text/javascript" src="$WEB-INF/filescript.js" />
<script type="text/javascript"><![CDATA[
function testUpload(viewer) {
for (var i = 0 ; i < 5; i ++ ) {
(function() {
var fakeLoader = { id: 'tmp' + new Date().getTime() + i},
muv = viewer == 1 ?
new zk.UPMSample1(fakeLoader, "TempFile" + parseInt((Math.random() + 1)*10) ):
new zk.UPMSample2(fakeLoader, "TempFile" + parseInt((Math.random() + 1)*10) ),
fsize = 12345678*Math.random() + 1;
muv.pct = 0;
var pgs = setInterval(function() {
muv.pct += parseInt(Math.random()*19);
if (muv.pct >= 100) {
clearInterval(pgs);
muv.pct = 100;
}
muv.update(muv.pct, fsize);
if (muv.pct == 100)
muv.destroy();
}, 678);
})();
}
}
]]></script>
<groupbox sclass="z-demo-config" closable="false">
<caption label="Display Upload Progress Monitor" />
<hlayout>
Sample 1 :
<button label="Show" c:onClick='testUpload(1)' />
</hlayout>
<hlayout>
Sample 2 :
<button label="Show" c:onClick='testUpload(2)' />
</hlayout>
</groupbox>
<separator height="15px"/>
<groupbox sclass="z-demo-config" closable="false">
<caption label="Apply to File Uploader" />
<radiogroup id="selectViewer">
<attribute name="onCheck"><![CDATA[
attachBtn.setUpload(self.getSelectedItem().getValue());
]]></attribute>
<vlayout>
<radio label="Default Style" value="true,maxsize=10240" checked="true" />
<radio label="Sample 1" value="zk.UPMSample1,maxsize=10240" />
<radio label="Sample 2" value="zk.UPMSample2,maxsize=10240" />
<label style="font-weight:bold" value='Upload files by "Attach" button' />
</vlayout>
</radiogroup>
</groupbox>
</zk>
Hasil :
