OPhone-based Widget online instance Development (2) (1)

Link to OPhone-based Widget online instance Development

2. Add currency selection bar

1) Add a row and three columns to the table in the html file. The Code is as follows:

 
 

  
  
<Tr> <Td Align="Right" > <Select Id=
  
  
"Currency_left" Onchange= "GetLeftOption (this)
  
  
"> <Option Value="CNY">RMB<Option> 
  
  
<Option Value="USD">USD Option>... Omitted...
  
  
<Option Value="EUR">Euro Option>
  
  
 Select>  Td> <Td Width="50" Font-size="0.6em">Redeem Td> 
  
  
<Td Align="Left" >
  
  
<Select Id="Currency_right" Onchange="GetRightOption (this )" > 
  
  
<Option Value="CNY">RMB
  
  
 Option> <Option Value="USD">USD Option> 
  
  
 <Option Value="JPY">Yen Option>... Omitted...<Option Value="EUR">Euro
  
  
 Option>  Select>  Td>  Tr>
 
 

The code above mainly refers to creating a row with three columns, and placing the first and third columns in the currency selection Column

2) Add the corresponding code in css

 
 

  
  
#currency_left,#currency_right { font-size: 0.8em; }    
 
 

Set the font size of the currency selection bar

Then you can save and Run AS to see the effect:

 

3. Add currency amount input Column

1) Add a row and three columns to the table in html.

 
 

  
  
<tr> <td align="right" > 
  
  
<INPUT id="num_left" type="text" value="1" size="8" > 
  
  
 td><td width="50"> 
  
  
<img id="arrowimg" src="images/forward.png"   
  
  
align="center" onclick="calculateCurrency()"> 
  
  
 img>  td> <td align="left" >   
  
  
<INPUT id="num_right" type="text" value="1" size="8" disabled="true">   
  
  
 td>  tr>    
 
 

Create a row and three columns, and place a backward arrow in the second column.

• Android Widget Development Series
• Android Widget development details
• How to Build Activi in Android Widget Development
• Comprehensive Understanding of Web Widget Development
• JIL Widget development tutorial

 

Put the input box in the first and third columns, and set the input box in the third column to prohibit the input. In this way, you can only enter the amount in the direction of the arrow from the left, and the converted amount is displayed on the right.

).

Then you can save and Run AS to see the effect:

 

In this way, the layout of the upper part of the interface is complete. Next we will add corresponding event processing in js.