关于Eclipse中Browser中显示html页面的总结.
用Eclipse中的Browser显示html页面,因为"just small thing.. browser in the studio is light browser.. it can not support as many things as other browser"
所以一些看上去很普通的html设置通过Eclipse中的Browser类显示都异常的困难(一些高级的特新都显示不出来).在其中Html中写的CSS和JS也是支持的非常少.
所以解决法基本上就是利用现有Browser类支持的一些html和js来实现本该可以直接用一些属性来实现的效果.
总结几个Eclipse中的Browser类中支持与不支持的事项,以及对应的解决办法.
要做成的目标大体上是这样的:
然后这个画面对应的HTML代码和JS代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--Connect to TalendForge-->
<style type="text/css">
b.rtop, b.rbottom{display:block;background: #F5F5F5}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #b4c401}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.r4{margin: 0 1px}
b.rtop b.r5, b.rbottom b.r5{margin: 0 1px;height: 2px}
.sharp{width:100%;margin:0px auto 0;float:left;margin-right:0%;}
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
.inputContent {border-right:1px solid;border-left:1px solid;overflow:hidden;}
.color2 .b2,.color2 .b3,.color2 .b4,.color2 .b5,.color2 .b6,.color2 .b7,.color2 .inputContent{border-color:#909090;}
.color2 .b1,.color2 .b8{background:#909090;}
.color2 .b2,.color2 .b3,.color2 .b4,.color2 .b5,.color2 .b6,.color2 .b7,.color2 .inputContent{background:#F5F5F5;}
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .inputContent{border-color:#909090;}
.color1 .b1,.color1 .b8{background:#909090;}
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .inputContent{background:white;}
body{
background:white;
}
a:link,a:visited,a:hover{
text-decoration:none;
}
font{
font-family:Arial;
}
.textfield{
width:100%;
align:center;
color:#999999;
font-size:14px;
height:20px;
line-height:20px;
border-style:none 0;
background:white;
border:none 0;
}
.selectField {
width:100%;
align:center;
color:#999999;
font-size:14px;
height:26px;
border-style:none 0;
background:white;
border:none 0;
}
.checkboxclass{
padding-left:145px;
}
.formHeaderClass{
}
.formHeaderClass td{
height: 30px;
}
.formBackgroundClass {
width: 100%;
}
table.formBackgroundClass {
background-color:#F5F5F5;
}
.formTable{
width: 85%;
}
.formClass {
width: 55%;
}
.formClass td{
border:0;
}
.errorInfoClass {
width: 100px;
align:center;
color:red;
}
#container {width: 100%;}
#image {width="30%"}
#text {float: left; width="70%"}
.button {
background:none repeat scroll 0 0 #b4c401;
color: white;
padding:0 0 0 0;
display: inline-block;
font-size: 1.0em;
font-weight: 600;
padding-top: 3px;
padding-bottom: 3px;
vertical-align: center;
width: 100%;
font-family: Arial;
}
.bottomButton {
background:none repeat scroll 0 0 #F5F5F5;
color: gray;
padding:0 0 0 0;
display: inline-block;
font-size: 1.0em;
padding-top: 10px;
padding-bottom: 10px;
vertical-align: center;
width: 100%;
height:18px;
font-family: Arial;
}
.checkBoxStyles {
padding: 8px 0px 0px 0px;
}
.navTopLine {
border-bottom:1px solid #909090;
}
.navRightLine {
border-right:1px solid #909090;
}
#background {
border-style:solid;
background-color: #E1DEDB;
z-index: -100;
width: 95%;
height: 70%;
margin: 10px;
}
input,select{
vertical-align:center;
font-family:Arial;
}
.bottom{
border-left :solid;
border-top :solid;
border-width:1px;
alignment-adjust:auto;
text-align:center;
}
</style>
<script type="text/javascript">
var i18nMsg = [
'<internationalization id="TalendForgeDialog.userNameLabel.tooltip"/>'
,'<internationalization id="TalendForgeDialog.emailLabel.tooltip"/>'
,'<internationalization id="TalendForgeDialog.passwordLabel.tooltip"/>'
,'<internationalization id="TalendForgeDialog.passwordAgainLabel.tooltip"/>'
,'<internationalization id="TalendForgeDialog.form.userName.hint" />'
,'<internationalization id="TalendForgeDialog.form.password.hint" />'
,'<internationalization id="TalendForgeDialog.form.passwordAgain.hint" />'
,'<internationalization id="TalendForgeDialog.form.email.hint" />'
]
var textHintUserName=i18nMsg[4];
var textHintPassword=i18nMsg[5];
var textHintPasswordAgain=i18nMsg[6];
var textHintEmail=i18nMsg[7];
var isCreateAccountUserNameOK = false;
var isCreateAccountPasswordOK = false;
var isCreateAccountPasswordAgainOK = false;
var isCreateAccountEmailOK = false;
var isLoginAccountUserNameOK = false;
var isLoginAccountPasswordOK = false;
function getCreateAccountUrl(){
var urlPartConstant = "http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=CREATE_ACCOUNT&";
var urlPartName = "USER_NAME="+document.getElementById("name1").value+"&";
var urlPartEmail = "EMAIL="+document.getElementById("email").value+"&";
var urlPasswrod = "PASSWORD="+document.getElementById("password1").value+"&";
var urlCountry = "COUNTRY="+document.getElementById("countrylistid").value+"&";
var urlImporve = "IS_HELP_IMPROVE="+document.getElementById("improve").checked;
var url = urlPartConstant+urlPartName+urlPartEmail+urlPasswrod+urlCountry+urlImporve;
return url;
}
function getLoginAccountUrl(){
var urlPartConstant = "http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=USE_EXSITING_ACCOUNT&";
var urlPartName = "USER_NAME="+document.getElementById("name2").value+"&";
var urlPasswrod = "PASSWORD="+document.getElementById("password3").value+"&";
var urlImporve = "IS_HELP_IMPROVE="+document.getElementById("improve2").checked;
var url = urlPartConstant+urlPartName+urlPasswrod+urlImporve;
return url;
}
function switchToView(viewId) {
if (viewId == 'useExsitingAccountDiv') {
document.getElementById('useExsitingAccountDiv').style.display = 'block';
document.getElementById('createAccountDiv').style.display = 'none';
} else {
document.getElementById('useExsitingAccountDiv').style.display = 'none';
document.getElementById('createAccountDiv').style.display = 'block';
}
}
function checkUsername() {
var value = document.getElementById('name1').value;
var isOK = false;
if (value != "") {
if (value.replace(/^\w+$/g, "") == "" ){
isOK = true;
}
}
if (isOK){
document.getElementById('userNameCreateErrorHint').style.display = 'none';
document.getElementById('userNameCreateOKImage').style.display = 'block';
isCreateAccountUserNameOK = true;
} else {
document.getElementById('userNameCreateErrorHint').style.display = 'block';
document.getElementById('userNameCreateOKImage').style.display = 'none';
isCreateAccountUserNameOK = false;
}
refreshCreateAccountButtton();
}
function checkPassword() {
var password = document.getElementById('password1');
var pwd1ErrorHint = document.getElementById('pwd1ErrorHint');
var pwd1OKImage = document.getElementById('pwd1OKImage');
var regex = /^.+$/;
if (regex.test(password.value)){
pwd1ErrorHint.style.display = 'none';
pwd1OKImage.style.display = 'block';
isCreateAccountPasswordOK = true;
} else {
pwd1ErrorHint.style.display = 'block';
pwd1OKImage.style.display = 'none';
isCreateAccountPasswordOK = false;
}
refreshCreateAccountButtton();
}
function checkConfirm() {
var passwordValue = document.getElementById('password1').value;
var confirmValue = document.getElementById('password2').value;
var isOK = false;
if (passwordValue != '') {
if (passwordValue == confirmValue) {
isOK = true;
}
}
if (isOK){
document.getElementById('pwd2OKImage').style.display = 'block';
document.getElementById('pwd2ErrorHint').style.display = 'none';
isCreateAccountPasswordAgainOK = true;
}else{
document.getElementById('pwd2OKImage').style.display = 'none';
document.getElementById('pwd2ErrorHint').style.display = 'block';
isCreateAccountPasswordAgainOK = false;
}
refreshCreateAccountButtton();
}
function checkEmail() {
window.location.href="http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=CHECK_EMAIL&EMAIL=" + document.getElementById('email').value;
}
function checkLoginUsername() {
var value = document.getElementById('name2').value;
var isOK = false;
if (value != "") {
if (value.replace(/^\w+$/g, "") == "" ){
isOK = true;
}
}
if (isOK){
document.getElementById('userNameLoginErrorHint').style.display = 'none';
document.getElementById('userNameLoginOKImage').style.display = 'block';
isLoginAccountUserNameOK = true;
} else {
document.getElementById('userNameLoginErrorHint').style.display = 'block';
document.getElementById('userNameLoginOKImage').style.display = 'none';
isLoginAccountUserNameOK = false;
}
refreshLoginAccountButtton();
}
function checkLoginPassword() {
var password = document.getElementById('password3');
var passwordLoginErrorHint = document.getElementById('passwordLoginErrorHint');
var passwordLoginOKImage = document.getElementById('passwordLoginOKImage');
var regex = /^.+$/;
if (regex.test(password.value)){
passwordLoginErrorHint.style.display='none';
passwordLoginOKImage.style.display='block';
isLoginAccountPasswordOK = true;
} else {
passwordLoginErrorHint.style.display='block';
passwordLoginOKImage.style.display='none';
isLoginAccountPasswordOK = false;
}
refreshLoginAccountButtton();
}
function manageCreatePasswordField(isOnFocus) {
managePasswordField(document.getElementById('password1Text'),document.getElementById('password1'), isOnFocus);
}
function manageCreatePasswordAgainField(isOnFocus) {
managePasswordField(document.getElementById('password2Text'),document.getElementById('password2'), isOnFocus);
}
function manageLoginPasswordField(isOnFocus) {
managePasswordField(document.getElementById('password3Text'),document.getElementById('password3'), isOnFocus);
}
function managePasswordField(textInput, pwdInput, isOnFocus) {
if (pwdInput.style.display == 'block') {
if (isOnFocus == false) {
if(pwdInput.value == '') {
pwdInput.style.display = 'none';
textInput.style.display = 'block';
}
}
} else if (textInput.style.display == 'block') {
pwdInput.style.display = 'block';
textInput.style.display = 'none';
pwdInput.focus();
}
}
function refreshCreateAccountButtton() {
if (isCreateAccountInfoOK()) {
document.getElementById('createAccountButton').disabled=false;
} else {
document.getElementById('createAccountButton').disabled=true;
}
}
function isCreateAccountInfoOK() {
if (document.getElementById('agree').checked == false) {
return false;
}
if (isCreateAccountUserNameOK == false) {
return false;
}
if (isCreateAccountPasswordOK == false) {
return false;
}
if (isCreateAccountPasswordAgainOK == false) {
return false;
}
if (isCreateAccountEmailOK == false) {
return false;
}
return true;
}
function refreshLoginAccountButtton() {
if (isLoginAccountInfoOK()) {
document.getElementById('loginAcccountButton').disabled = false;
} else {
document.getElementById('loginAcccountButton').disabled = true;
}
}
function isLoginAccountInfoOK() {
if (isLoginAccountUserNameOK == false) {
return false;
}
if (isLoginAccountPasswordOK == false) {
return false;
}
return true;
}
</script>
</head>
<body>
<form method="post" action="">
<table align="center"><tbody>
<tr>
<td colspan="2"><font style="font-size:20px;"><span><internationalization id="TalendForgeDialog.labelTitle.Ver1" /> <b><internationalization id="TalendForgeDialog.labelTitle.Ver2" /></b></span></font></td>
</tr>
<tr>
<td>
<ul>
<li style="font-size:12px;font-family:Arial"><internationalization id="TalendForgeDialog.labelMessageOnePart1" /><b><internationalization id="TalendForgeDialog.labelMessageOnePart2" /></b><internationalization id="TalendForgeDialog.labelMessageOnePart3" /></li>
<br/><br/>
<li style="font-size:12px;font-family:Arial"><internationalization id="TalendForgeDialog.labelMessageTwo1" /> <b><internationalization id="TalendForgeDialog.labelMessageTwo2" /></b> <internationalization id="TalendForgeDialog.labelMessageTwo3" /></li>
<br/><br/>
<li style="font-size:12px;font-family:Arial"><internationalization id="TalendForgeDialog.labelMessageThreeVer1" /> <b><internationalization id="TalendForgeDialog.labelMessageThreeVer2" /></b></li>
<br/>
</ul>
</td>
<td>
<contentProvider id="TALEND_FORGE_IMAGE" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</td>
</tr>
<tr>
<td colspan="2" style="align:center;">
<table class="formTable" align="center"><tbody><tr><td>
<div class="sharp color2" >
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<table align="center" id="createAccountDiv" border="0" cellspacing="0" cellpadding="0" class="formBackgroundClass" style="display:block;"><tbody>
<tr><td colspan="2" class="navTopLine">
<table align="center" class="formClass">
<tbody>
<tr class="formHeaderClass"><td colspan="3" ></td></tr>
<tr><td class="errorInfoClass"></td><td width="100%">
<div class="sharp color1">
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<input class="textfield" style="font-family:Arial" type="text" name="Username" id="name1" alt="" onfocus="if(this.value==textHintUserName){this.value='';}" onkeyup="checkUsername();" onblur="if(this.value==''){this.value=textHintUserName;}" value="Username"/>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div>
</td><td class="errorInfoClass">
<div id="userNameCreateErrorHint" style="display:block">*</div>
<div id="userNameCreateOKImage" style="display:none">
<contentProvider id="OK_HINT_IMAGE" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</div>
</td></tr>
<tr><td></td><td>
<div class="sharp color1">
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<input class="textfield" style="font-family:Arial" type="text" id="email" name="Email" onkeyup="checkEmail();" onfocus="if(this.value==textHintEmail){this.value='';}" onblur="if(this.value==''){this.value=textHintEmail;}" value="Email"/>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div>
</td><td class="errorInfoClass">
<div>
<div id="emailErrorHint" style="display:block">*</div>
<div id="emailOKImage" style="display:none">
<contentProvider id="OK_HINT_IMAGE" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</div>
</div>
</td></tr>
<tr><td></td><td>
<div class="sharp color1">
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<input class="textfield" id="password1Text" onfocus="manageCreatePasswordField(true)" style="display:block;font-family:Arial" type="text" value="Password"/>
<input class="textfield" id="password1" onblur="manageCreatePasswordField(false)" name="Password" onkeyup="checkPassword();checkConfirm();" style="display:none;font-family:Arial" type="password"/>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div></td>
<td class="errorInfoClass">
<div>
<div id="pwd1ErrorHint" style="display:block">*</div>
<div id="pwd1OKImage" style="display:none">
<contentProvider id="OK_HINT_IMAGE" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</div>
</div>
</td></tr>
<tr><td></td><td>
<div class="sharp color1">
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<input class="textfield" id="password2Text" onfocus="manageCreatePasswordAgainField(true)" style="display:block;font-family:Arial;" type="text" value="Password again"/>
<input class="textfield" id="password2" onblur="manageCreatePasswordAgainField(false)" name="Password" onkeyup="checkConfirm();" style="display:none;font-family:Arial;" type="password"/>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div>
</td><td class="errorInfoClass">
<div>
<div id="pwd2ErrorHint" style="display:block">*</div>
<div id="pwd2OKImage" style="display:none">
<contentProvider id="OK_HINT_IMAGE" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</div>
</div>
</td></tr>
<tr><td></td><td>
<div class="sharp color1">
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<select class="selectField" id="countrylistid" style="width:100%;margin:-2px -18px -2px -2px;" name="select" >
<contentProvider id="INSERT_DATA" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</select>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div>
</td><td></td></tr>
<tr><td></td><td colspan="2" class="checkBoxStyles">
<input type="checkbox" class="checkbox" name="checkbox1" id="agree" onclick="refreshCreateAccountButtton();" ><font style="font-size:12px;"><internationalization id="TalendForgeDialog.agreeButtonVer1" /><a href="http://www.talendforge.org/Talend_Contributor_Agreement.txt" target="_blank"><internationalization id="TalendForgeDialog.agreeButtonVer2" /></a></font></input>
</td></tr>
<tr><td></td><td colspan="2">
<input type="checkbox" class="checkbox" name="checkbox2" id="improve" checked="checked" /><font style="font-size:12px;"><internationalization id="TalendForgeDialog.improveButton" /></font>
</td></tr>
<tr><td class="errorInfoClass"></td><td style="width:100%">
<div style="width:100%">
<b class="rtop">
<b class="r1"> </b>
<b class="r2"> </b>
<b class="r3"> </b>
<b class="r4"> </b>
<b class="r5"> </b>
</b>
<a id="createAccountButton" class="button" style="text-align:center;width:350px;" onClick="window.location.href=getCreateAccountUrl()" disabled="disabled" href="#"><internationalization id="TalendForgeDialog.createAccountButton.v1" /></a>
<b class="rbottom">
<b class="r5"> </b>
<b class="r4"> </b>
<b class="r3"> </b>
<b class="r2"> </b>
<b class="r1"> </b>
</b>
</div>
</td><td class="errorInfoClass"></td></tr>
</tbody>
</table>
</td></tr>
<tr><td width="50%" class="navRightLine">
<a style="text-align:center;" href="#" class="bottomButton" onClick="switchToView('useExsitingAccountDiv')"><internationalization id="TalendForgeDialog.ConnectExistingButton" /></a>
</td>
<td widht="50%">
<a style="text-align:center;" class="bottomButton" href="http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=SKIP"><internationalization id="TalendForgeDialog.skipButton.version1" /></a>
</td>
</tr>
</tbody>
</table>
<table id="useExsitingAccountDiv" border="0" cellspacing="0" cellpadding="0" align="center" class="formBackgroundClass" style="display:none;" ><tbody>
<tr class="formHeaderClass"><td colspan="2" ></td></tr>
<tr><td colspan="2" class="navTopLine">
<table align="center" class="formClass">
<tbody>
<tr><td class="errorInfoClass"></td>
<td style="width:100%">
<div class="sharp color1">
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<input class="textfield" style="font-family:Arial" type="text" name="Username" id="name2" onfocus="if(this.value==textHintUserName){this.value='';}" onkeyup="checkLoginUsername();" onblur="if(this.value==''){this.value=textHintUserName;}" value="Username"/>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div>
</td>
<td class="errorInfoClass">
<div id="userNameLoginErrorHint" style="display:block">*</div>
<div id="userNameLoginOKImage" style="display:none">
<contentProvider id="OK_HINT_IMAGE" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</div>
</td>
</tr>
<tr>
<td></td><td>
<div class="sharp color1">
<b class="atop">
<b class="b1"> </b>
<b class="b2"> </b>
<b class="b3"> </b>
<b class="b4"> </b>
</b>
<div class="inputContent">
<input class="textfield" id="password3Text" onfocus="manageLoginPasswordField(true)" style="display:block;font-family:Arial" type="text" value="Password"/>
<input class="textfield" id="password3" onblur="manageLoginPasswordField(false)" name="Password" onkeyup="checkLoginPassword();" style="display:none;font-family:Arial" type="password"/>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div>
</td>
<td class="errorInfoClass">
<div id="passwordLoginErrorHint" style="display:block">*</div>
<div id="passwordLoginOKImage" style="display:none">
<contentProvider id="OK_HINT_IMAGE" class="org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeProvider" pluginId="org.talend.registration"></contentProvider>
</div>
</td>
</tr>
<tr>
<td></td><td colspan="2" class="checkBoxStyles">
<input type="checkbox" id="improve2" class="checkbox" name="checkbox1" checked="checked" /><font style="font-size:12px;"><internationalization id="TalendForgeDialog.improveButton" /></font>
</td>
</tr>
<tr><td class="errorInfoClass"></td>
<td style="width:100%">
<div style="width:100%">
<b class="rtop">
<b class="r1"> </b>
<b class="r2"> </b>
<b class="r3"> </b>
<b class="r4"> </b>
<b class="r5"> </b>
</b>
<a id="loginAcccountButton" class="button" style="text-align:center;width: 325px;" disabled="disabled" onClick="window.location.href=getLoginAccountUrl()" href="#"><internationalization id="TalendForgeDialog.connectButton.v1" /></a>
<b class="rbottom">
<b class="r5"> </b>
<b class="r4"> </b>
<b class="r3"> </b>
<b class="r2"> </b>
<b class="r1"> </b>
</b>
</div>
</td><td class="errorInfoClass"></td>
</tr>
</tbody>
</table></td></tr>
<tr>
<td width="50%" class="navRightLine">
<a style="text-align:center;" href="#" class="bottomButton" onClick="switchToView('createAccountDiv')"><internationalization id="TalendForgeDialog.CreateNewButton" /></a>
</td>
<td width="50%">
<a style="text-align:center;" class="bottomButton" href="http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=SKIP"><internationalization id="TalendForgeDialog.skipButton.version1" /></a>
</td>
</tr>
</tbody></table>
</div>
<b class="abottom">
<b class="b4"> </b>
<b class="b3"> </b>
<b class="b2"> </b>
<b class="b1"> </b>
</b>
</div>
</td></tr></tbody></table>
</td>
</tr></tbody>
</table>
</form>
<script type="text/javascript">
document.getElementById('userNameCreateErrorHint').setAttribute('title', i18nMsg[0]);
document.getElementById('emailErrorHint').setAttribute('title', i18nMsg[1]);
document.getElementById('pwd1ErrorHint').setAttribute('title', i18nMsg[2]);
document.getElementById('pwd2ErrorHint').setAttribute('title', i18nMsg[3]);
document.getElementById('userNameLoginErrorHint').setAttribute('title', i18nMsg[0]);
document.getElementById('passwordLoginErrorHint').setAttribute('title', i18nMsg[2]);
document.getElementById('name1').value=textHintUserName;
document.getElementById('name2').value=textHintUserName;
document.getElementById('password1Text').value=textHintPassword;
document.getElementById('password3Text').value=textHintPassword;
document.getElementById('password2Text').value=textHintPasswordAgain;
document.getElementById('email').value=textHintEmail;
</script>
</body>
</html>
一.Browser类中不支持<span>标签.只支持<div>标签.
在浏览器中<span>标签和<div>标签的区别:
简单的说<span>和<div>标签就是一个区别.两个<div>标签在一起会自动换行.但是两个<span>在一起就是文字内容有多宽，就占用多宽距离，使用<span>标签和不使用一样效果。
大体上是<span>+<br>=<div>这种效果.
所以在HTML页面上本 应该用<span>标签的地方都用了<div>标签.刚开始进行布局设置的时候我没有想到Browser类是那么的弱,用了挺多的<span>标签.加上按照经验,form表单中使用<table>可能会整个table加载完才在网页中显示(我记得当时老师是这么说过,但是在网上没有在找到这种说法)....总之开始没有用<table>进行布局.
造成了布局上的很多混乱,后来还是用到了<table>才整的十分的规整.对网页设计布局不清楚还是建议用<table>标签.
在其中用到了<tbody>标签.其实这个<tbody>标签不用也是可以的,而且<tbody>标签和<thead>和<tfoot>标签经常一起使用.
下面是带有 thead、tbody 以及 tfoot 元素的 HTML 表格：
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
<tbody> 标签仅得到所有主流浏览器的部分支持。
定义和用法
<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
tbody 元素应该与 thead 和 tfoot 元素结合起来使用。
thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。
详细描述
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
提示和注释：
注释：<thead> 内部必须拥有 <tr> 标签！
注释：<thead>、<tbody> 以及 <tfoot> 很少被使用，这是因为糟糕的浏览器支持。
2.关于HTML中的专一字符:
| No. | 文字表記 | 10進表記 | 16進表記 | 文字 | Comment | |
|---|---|---|---|---|---|---|
| 001 | " | " | " | """ | quotation mark = APL quote | |
| 002 | & | & | & | "&" | ampersand | |
| 003 | < | < | < | "<" | less-than sign | |
| 004 | > | > | > | ">" | greater-than sign | |
| 005 | | " " | no-break space = non-breaking space |
<p><a href=http://localhost/output3.asp?name=例子&sex=男>显示的字符串1</a></p>
这里面的&是什么意思?
"&"就是'&' 因为&是转义符号,没有什么特别的意思.
& = &
在HTML中的&用&来表示.比如你要得到' '的字符串,而不是空格,那就用&nbsp
二.
Browser类对JS的支持.
在HTML中内嵌了一些常规的JS对表单的校验,但是实在是太弱了,连一些基本的对DOM的操作都有很多不支持.
我们利用仅仅支持的几个JS动作完成了对表单的校验.(这确实是唯一能够利用的方法.)
三.
RCP中对对特定的方法的访问方法:
这个地方我再特例总结了一个博客关于location.href几个方法的使用方法:
详见博客:
http://www.cnblogs.com/DreamDrive/p/4390842.html
window.location.href="http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=CHECK_EMAIL&EMAIL=" + document.getElementById('email').value;
和
var urlPartConstant = "http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=CREATE_ACCOUNT&";
以前从没有想到过http:这种超文本传输协议中会这么写....
以往的一个form表单用get的方式提交之后,对应的的url地址大都是这样的
file:///C:/Users/kongxiaohan/Desktop/biaodan/link/success.html?gender=male&interest=on&interest=on&interest=on
http://org.eclipse.ui.intro/runAction?pluginId=org.talend.registration&class=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&id=org.talend.registration.wizards.register.ui.htmlcontent.TalendForgeRegistAction&type=CREATE_ACCOUNT&
关于Eclipse中Browser中显示html页面的总结.的更多相关文章
- Nodejs：npm run build之后，dist\index.html页面在火狐中可以正常显示登录页面并登录成功，在Chrome中可以正常显示登录页面，登录失败
问题描述:Nodejs:npm run build之后,dist\index.html页面在火狐中可以正常显示登录页面并登录成功,在Chrome中可以正常显示登录页面,登录失败 解决方法:将打包后的d ...
- [转]在Eclipse中Debug 为什么显示source not found
在Eclipse中Debug 为什么显示source not found http://zhidao.baidu.com/link?url=-jna2HB_k2FW72GPbT--5Qg2AWi3Ip ...
- 用Seam实现：图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中
上传图片并保存到数据库 seam给我们提供了 s:fileUpload 标签以完成文件上传功能．使用该标签时,要在web.xml中声明一个Seam的过滤器: <filter> <fi ...
- Android : 如何在WebView显示的页面中查找内容
Android : 如何在WebView显示的页面中查找内容 Author : Aoyousatuo Zhao http://blog.sina.com.cn/aoyousatuo WebView是A ...
- vue中使用axios post上传头像/图片并实时显示到页面
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto ...
- cocos2dx --- 在游戏中显示HTML页面
前文介绍了简单的富文本组件RichText,如今我们来了解下由freeType库做出来的第三方组件.可以直接显示html页面,而且可以实现超链接.和触摸事情. 步骤: 1.在github中 下载 ...
- uni-app中当uni.navigateTo传的参数为object时，通过传递的不同参数，在显示单页面内通过v-if判断显示出对应的内容（可实现多页面效果）
通过uni-app中当uni.navigateTo传的参数为object时,通过传递的不同参数,在显示单页面内通过v-if判断显示出对应的内容(可实现多页面效果) 起始页跳转到对应页面,并传递参数(o ...
- eclipse neon配置tomcat8无法显示默认页面解决方法
下载对应tomcat8版本到本地后,在eclipse中添加tomcat8的对应目录,输入http://localhost:8080时无法显示tomcat的index.jsp页面(会显示404页面).原 ...
- Tomcat:解决Tomcat可以在eclipse启动，却无法显示默认页面的操作
解决Tomcat可以在eclipse启动,却无法显示默认页面的操作 今天在eclipse中配置好tomcat后访问不到它的主页,但是能运行自己的项目,一直找不到原因,百度之后最后解决了这个问题,总结如 ...
随机推荐
- LightOJ 1074 Extended Traffic （最短路spfa+标记负环点）
Extended Traffic 题目链接: http://acm.hust.edu.cn/vjudge/contest/122685#problem/O Description Dhaka city ...
- maven系列（2）-第一个maven的项目
上一篇简单了介绍了maven和maven的安装,这篇介绍如何用maven创建项目. 1. 命令行创建maven项目 maven创建项目很简单,直接调用mvn archetype:generate命令即 ...
- 一个word合并项目的分布式架构设计
一个word合并项目的分布式架构设计 项目背景与问题起源 我们要给一个客户做word生成报告以及报告合并的工作,要合并的报告非常多,而且每个报告也比较大,一个多的报告大概有200页以上.我们用c#操作 ...
- memcached全面剖析–3. memcached的删除机制和发展方向
memcached在数据删除方面有效利用资源 数据不会真正从memcached中消失 上次介绍过, memcached不会释放已分配的内存.记录超时后,客户端就无法再看见该记录(invisible,透 ...
- jquery.loadmask.js
Quick Start 下载之后的目录结构如下图所示: 使用此插件非常简单,如下步骤所示: 1. 引用jquery,1.2.3以上版本 <script type="text/java ...
- 转载LINQ系列OrderBy(), ThenBy()简介
前言 前面两篇分别介绍了 Where() 与 Select() ,这篇则是要介绍 OrderBy() 与 ThenBy() ,这几个东西看起来最像 SQL 上会用到的语法,但切记一点,这边介绍的是 L ...
- Serializable 序列化使用限制
序列化不能跨语言 如果单纯为了传数据,完全可以被json代替.
- 电脑蓝屏分析教程，附工具WinDbg(x86 x64)6.12.0002.633下载
我们常常在使用电脑中,有时会碰到电脑蓝屏,我们经常束手无策,不知道为什么会蓝屏?有些蓝屏后自动重启能正常进入系统,那么我们就可以借助工具进行分析.而有些可能需要进入到安全模式或者pe系统才会正常,那么 ...
- TV
https://github.com/Xs4allWebTV/androidhttps://github.com/mode89/video-feedhttp://www.javaapk.com/sou ...
- .Net枚举类型小结
1.枚举类型的要点: (1)类型声明语法: enum 枚举名 (2)枚举体语法: a.成员名称 = 整数值,其他成员名称,或者其他成员与整数的表达式 b.成员之间需要用逗号隔开 (3)枚举可以继承的 ...