跳转到内容

XForms/本地语言动态标签

Add links
来自维基教科书，自由的教科书

动机

[编辑 | 编辑源代码]

有时您可能希望在不加载表单的情况下动态地将标签从一种语言更改为另一种语言。在给定的示例中，您可以从 select1 控件选项中选择语言。

屏幕图像

[编辑 | 编辑源代码]

示例程序

[编辑 | 编辑源代码]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
	<title>e-District - Regd Form</title>
	<!--<link href="edistrict.css" rel="stylesheet"/>-->
	  <style type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
 BODY 
 { 
   font-family: Times New Roman,Times,serif;
   font-size: 12pt;
   font-style: normal;
   font-weight:normal;
   font-variant: normal;
   text-align: left;
   word-spacing: normal;
   letter-spacing: normal;
   /*background-color: transparent;*/
   background-image: url(Desktop/tour_xforms/NIC_Logo.gif); background-repeat: no-repeat;
   background-position: right top;
   line-height:20pt;
 }	
 
 
   xf|input, xf|secret {
      display: table-row;
   }
 
   xf|value {
      text-align: left;
   }
 
div.content div.tab-box {
   position: absolute;
   width: 120px;
}
 
div{line-height:20pt;}
h3 {text-align: center;}
h4 {color:maroon;text-decoration:underline;}

div.formbody
     {
	margin-left:2in;
	margin-right:0.5in; 
	width:8.5in;	
     }

xf|input {display: table-row;text-align:left;}
xf|input > xf|label {display: table-cell;  width:160pt; font-weight:bold;text-align:left;}
xf|input .xf-value  {width: 100pt;font-size:10pt;}

xf|secret { display: table-row;text-align:left;}
xf|secret > xf|label { display: table-cell;  width:160pt; font-weight:bold;text-align:left;}
xf|secret .xf-value {width: 100pt;font-size:10pt;}

xf|output { display: table-row;text-align:left;}
xf|output > xf|label { display: table-cell;  width:160pt; font-weight:bold;text-align:left;}
xf|output .xf-value  {width: 100pt;font-size:11pt;font-weight:bold;color:blue;text-align:left;}

xf|select1 { display: table-row;text-align:left;}
xf|select1 > xf|label { display: table-cell;  width:160pt; font-weight:bold;text-align:left;}
xf|select1 .xf-value {max-width: 100pt;font-size:10pt;}
	</style>
	<xf:model id="model1">
		
		<xf:instance id="Regd_Form" xmlns="">
			<form CAN="" xmlns="">
				<name></name>
				<DOB></DOB>
				<address></address>
				<loginId></loginId>
				<mobile></mobile>
				<phone></phone>
				<email></email>
				<password></password>
				<repeat_pass></repeat_pass>
				
			</form>
		</xf:instance>
		<xf:instance id="slanguage1" xmlns="">
			<language xmlns="">
				<lang>English</lang>
				<lang_list><item>English</item></lang_list>
				<lang_list><item>தமிழ்</item></lang_list>
				<lang_list><item>हिन्दी</item></lang_list>
			</language>
		</xf:instance>
		<xf:instance id="slanguage" xmlns="">
		<language xmlns="">
			<lang name="English" rname="Registration Form" smessage="Registration Completed Successfully" 
			emessage="Error Occurred .. Pls Check the Entered Details" sbutton="Save" cbutton="Reset" e1msg="Wrong Password!Please Re-enter">
				<name>Applicant Name</name>
				<DOB>Date of Birth</DOB>
				<address>Address</address>
				<loginId>Desired Login ID</loginId>
				<mobile>Mobile No</mobile>
				<phone>Phone No</phone>
				<email>E-mail ID</email>
				<password>Password</password>
				<repeat_pass>Re-Enter Password</repeat_pass>
			</lang>
			<lang name="தமிழ்" rname="பதிவு படிவம்" smessage="பதிவு சேமிக்கப்பட்டது" 
			emessage="தவறு! விபரங்களை சரிப்பார்க்கவும்" sbutton="சேமி" cbutton="மீளமை" e1msg="கடவுச்சொல் தவறு!மீண்டும் உறுதிப்படுத்துக">
				<name>விண்ணப்பதாரர் பெயர்</name>
				<DOB>பிறந்த தேதி</DOB>
				<address>முகவரி</address>
				<loginId>விருப்பப்படும் நுழைவு பெயர்</loginId>
				<mobile>கைத் தொலைபேசி எண் </mobile>
				<phone>தொலைபேசி எண்</phone>
				<email>மின்னஞ்சல் முகவரி</email>
				<password>கடவுச்சொல்</password>
				<repeat_pass>கடவுச்சொல் உறுதிப் படுத்து</repeat_pass>
			</lang>
			<lang name="हिन्दी" rname="पंजीकरण फार्म" smessage="पंजीकरण सफलतापूर्वक पूरा" 
			emessage="त्रुटि हुई .. Pls दर्ज विवरण की जाँच करें" sbutton="Save" cbutton="Reset" e1msg="पासवर्ड गलत! फिर से दर्ज करें">
				<name>आवेदक का नाम</name>
				<DOB>जन्म तिथि</DOB>
				<address>पता</address>
				<loginId>वांछित लॉगिन आईडी</loginId>
				<mobile>मोबाइल नंo</mobile>
				<phone>फोन नंo</phone>
				<email>ई - मेल आईडी</email>
				<password>पासवर्ड</password>
				<repeat_pass>पुनः पासवर्ड दर्ज करिए</repeat_pass>
			</lang>			
		</language>
		</xf:instance>
		
		<xf:action ev:event="xforms-ready">
 			<xf:setvalue ref="DOB" value="substring(now(),1,10)"/>
		</xf:action>
		<xf:bind nodeset="instance('Regd_Form')/DOB" type="xs:date" required="true()"/>
		

		<xf:submission id="submit" method="put" action="result.xml">
			<xf:action ev:event="xforms-submit-done">
		
			<xf:message level="modal"><xf:output ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@smessage"></xf:output> ...</xf:message>
			</xf:action>
			<xf:message level="modal" ev:event="xforms-submit-error"><xf:output ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@emessage"></xf:output></xf:message>
		</xf:submission>
	</xf:model>
</head>
<body bgcolor="#ACBCD8">

	<div id="img">
		<img src="img.png" width="1027" />
	</div><br/>
	<div id="formbody"  style="width:10.7in;">
 <div class="content">
 
     
      </div> 
	<center>
	<xf:select1 ref="instance('slanguage1')/lang">
		<xf:label>Select Language</xf:label>
		<xf:itemset nodeset="instance('slanguage1')/lang_list">
			<xf:label ref="item"/>
			<xf:value ref="item"/>
		</xf:itemset>
	</xf:select1><br/>
 <fieldset style="width: 700px;border:solid 1pt black" >
         
	<h3><xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@rname"></xf:label></h3><br/>
		<xf:input ref="instance('Regd_Form')/name">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/name">:</xf:label>
		</xf:input>
		<xf:input ref="instance('Regd_Form')/DOB">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/DOB">:</xf:label>
		</xf:input>
		<xf:input ref="instance('Regd_Form')/address">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/address"> :</xf:label>
		</xf:input>
		<xf:input ref="instance('Regd_Form')/loginId">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/loginId"> :</xf:label>
		</xf:input>
		<xf:input ref="instance('Regd_Form')/mobile">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/mobile">:</xf:label>
		</xf:input>
		<xf:input ref="instance('Regd_Form')/phone">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/phone"> :</xf:label>
		</xf:input>
		<xf:input ref="instance('Regd_Form')/email">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/email"> :</xf:label>
		</xf:input>
		<xf:secret ref="instance('Regd_Form')/password">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/password"> :</xf:label>
			<!--<xf:alert level="modal">கடவுச்சொல் 3 முதல் 7 எழுத்து மட்டுமே</xf:alert>-->
		</xf:secret>
		<xf:secret ref="instance('Regd_Form')/repeat_pass">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/repeat_pass"> :</xf:label>
			<xf:action ev:event="DOMFocusOut" if="instance('Regd_Form')/repeat_pass != instance('Regd_Form')/password">
				<xf:setvalue ref="instance('Regd_Form')/repeat_pass" value="''"/>
				<xf:message level="modal">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@e1msg"></xf:label></xf:message>
				
			</xf:action>
		</xf:secret><br/>
		<xf:submit submission="submit">
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@sbutton"></xf:label>
			
			
		</xf:submit>
		<xf:trigger>
			<xf:label ref="instance('slanguage')/lang[@name=instance('slanguage1')/lang]/@cbutton"></xf:label>
			<xf:reset ev:event="DOMActivate" target="model1"/>
		</xf:trigger>
 </fieldset>
	</center><br/>



</div>
</body>
</html>

致谢

[编辑 | 编辑源代码]

本示例最初灵感来自 Kurt Cagle。

检索自 "https://wikibooks.cn/w/index.php?title=XForms/Dynamic_Labels_in_Local_language&oldid=3678399"
华夏公益教科书