博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第二十八讲:tapestry与可重复使用的javaScript
阅读量:6995 次
发布时间:2019-06-27

本文共 2626 字,大约阅读时间需要 8 分钟。

hot3.png

tapestry与可重复使用的javaScript,实现方法是给函数传变量,代码如下:

 ReusableJavaScript.java

/**
* 项目名称:TapestryStart
* 开发模式:Maven+Tapestry5.x+Tapestry-hibernate+Mysql
* 网址:
* 版本:1.0
* 编写:飞风
* 时间:2012-02-29
*/
package com.tapestry.app.pages;
 
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.javascript.JavaScriptSupport;
 
@Import(library="context:assets/js/textbox_hint.js")
public class ReusableJavaScript {
@Property
@SuppressWarnings("unused")
private String firstName;
 
@Property
@SuppressWarnings("unused")
private String lastName;
 
@Inject
private JavaScriptSupport javaScriptSupport;
 
public void setupRender() {
 
javaScriptSupport.addScript(String.format("new TextboxHint('%s', '%s', '%s');", "firstName",
"Enter First Name", "#ff6600"));
javaScriptSupport.addScript(String.format("new TextboxHint('%s', '%s', '%s');", "lastName", "Enter Last Name",
"blue"));
}
}
 

ReusableJavaScript.tml

<html t:type="layout" title="tapestryStart Index"  t:sidebarTitle="Framework Version" 
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd" xmlns:p="tapestry:parameter">
<form t:type="form" t:autofocus="false">
<input t:type="TextField" t:id="firstName"/>
<input t:type="TextField" t:id="lastName"/><br/>
</form>
</html>

textbox_hint.js

TextboxHint = Class.create( {
 
initialize : function(textboxId, hintText, hintColor) {
this.textbox = $(textboxId);
this.hintText = hintText;
this.hintColor = hintColor;
this.normalColor = this.textbox.getStyle('color');
 
Event.observe(this.textbox, 'focus', this.doClearHint.bindAsEventListener(this));
Event.observe(this.textbox, 'blur', this.doCheckHint.bindAsEventListener(this));
Event.observe(this.textbox, 'change', this.doCheckHint.bindAsEventListener(this));
Event.observe(this.textbox.form, 'submit', this.doClearHint.bindAsEventListener(this));
 
this.doCheckHint();
},
 
doClearHint : function(e) {
if (this.textbox.value == this.hintText) {
this.textbox.value = "";
}
this.textbox.setStyle({color: this.normalColor});
},
 
doCheckHint : function(e) {
 
// If field is empty, put the hintText in it and set its color to hintColor
 
if (this.textbox.value.length == 0) {
this.textbox.value = this.hintText;
this.textbox.setStyle({color: this.hintColor});
}
 
// Else if field contains hintText, set its color to hintColor
 
else if (this.textbox.value == this.hintText) {
this.textbox.setStyle({color: this.hintColor});
}
 
// Else, set the field's color to its normal color
 
else {
this.textbox.setStyle({color: this.normalColor});
}
 
}
 
} )

转载于:https://my.oschina.net/shootercn/blog/54364

你可能感兴趣的文章
LeetCode OJ - Minimum && Maximum Depth of Binary Tree
查看>>
如何将Linux rm命令删除的文件放入垃圾箱
查看>>
引用MinGW生成的.dll.a后出现的问题
查看>>
51Nod1130斯特林近似
查看>>
dede 调用原图的路径
查看>>
浅析设计模式(四)——建造者模式
查看>>
LeetCode——N-Queens
查看>>
JS中的正则表达式
查看>>
Mysql数据库的基本概念
查看>>
Linux中main是如何执行的
查看>>
Linux,在不使用U盘的情况下使用wubi.exe程序在Win7上安装ubuntu-14.04.3版系统
查看>>
SQLite简单教程
查看>>
网站推广必备的16个营销工具
查看>>
解决sublime text3运行PyQt5代码不能显示窗口的问题
查看>>
csss属性选择器
查看>>
java基础 布局管理器
查看>>
Assetbundle资源单一打包,以及加载方法
查看>>
unity启动第三方软件
查看>>
什么才是程序员的核心竞争力?
查看>>
DOS命令批量重命名文件配合Excel 操作备忘
查看>>