This article recommends 10 commonly used native controls, hoping to help mobile application developers. 1. The label label of the
text control is different from HTML. The text content in Ai Ma Ge must be included in the label label. Although simple, it is the most commonly used. At the same time, simple HTML can be embedded in the label tag to achieve the effect of mixing images and texts. Example of use:
<label> <![CDATA[[url=http://baike.baidu.com/view/1168245.htm]Mobile Internet[/url], It is to combine mobile communication and the Internet into one. <img src="emoticon_ye.png"/><br/> In recent years, <font color="red">Mobile Communications and the Internet</font> It has become the two fastest growing businesses with the greatest market potential and the most attractive prospects in the world today. Their growth rates are both <font color="#ABABAB"><i>Anything the forecaster didn't expect</i></font>, So <font color="green">[u]Mobile Internet[/u]</font> It is foreseeable what kind of economic myth will be created. <img src="emoticon_geili.png"/>]]> </label>
Rendering:
2. The icon control icon
icon displays resource pictures or mobile phone local pictures (Note: Icon is only used to display resource pictures, and Image controls are used to display network pictures.)
Example of use:
<icon src="icon_tv.png" style="width:100;height:50"/>
3. The title bar control title
title control has only three controls: left, center, and right.
Example of use:
<title style="background:purple;tint-color:green">
<left>
<button role="back">返回</button>
</left>
<center>
<label>Set button color</label>
</center>
<right>
<button>按钮</button>
</right>
</title>
Rendering:
4. Page content control Almost all the controls used in the content of the page of the content App are placed in the content control Example of use:
<content draggable="true"> <button style="width:120">按钮</button> </content>
5. List layout control The sub-label of the list
List control is item, and the sub-control of item is the col
list. There are four types of plain, group, transparent, and toolbar.
where plain is the default flat style list and group is a grouped list.
transparent is a list of transparent styles. Lists of plain and group types have default borders and backgrounds, while transparent removes these borders and backgrounds, so that a new background can be set on the transparent list.
The toolbar type list is mainly used to customize the toolbar. The toolbar type list is also transparent. The difference between toolbar and transparent is that the transparent list has a default margin, while the toolbar list removes the default margin and padding in the item.
Example of use:
<list type="group"> <item accessory="indicator" style="col-width:*,100;"> <col> <row> <label>Title</label> </row> <row> <label style="color:gray">副标题</label> </row> </col> <col> <row> <label style="color:blue;align:right;font-size:14">2012-05-01</label> </row> </col> </item> </list>
*
Reuse list Resue list (resue list) is another list that is different from ordinary list. The use of reuse list is to optimize performance. In the case of large data (thousands of items), it is avoided due to excessive memory usage. cause the system to crash. This is because a view (view) in a mobile application is an object that consumes a lot of system resources. Too many views (several thousands, and the memory size of the view depends on the area of the view) may cause insufficient memory and crash. It also takes a long time to load so many views.
The corresponding solution to this is to use the reuse list. The principle of the reuse list is to only create a view object displayed on one screen. When the view is scrolled beyond the screen, it will be used for reuse, so it will only occupy the memory of one screen view. , which effectively solves the problem of crashes caused by insufficient memory, and has a fast loading speed because the number of views actually created is small.
Example of use:
<?xml version="1.0" encoding="utf-8"?>
<imag>
<script>
<![CDATA[
function initList() {
var listJson = {items: []};
for (var i = 0; i < 1000; i++) {
var itemJson = {
template:0,
onclick:'alert("item' + i + '")',
widgets:{
title:{text:'title' + i},
subtitle:{text: 'subtitle' + i}
}
}
listJson.items.push(itemJson);
}
$('resuelist').update(listJson);
}
$page.onload = function() {
initList();
}
]]>
</script>
<page>
<title>
<center>
<label>reuse list</label>
</center>
</title>
<content>
<list id="resuelist" reuse="true">
<item accessory="indicator">
<label reusekey="title"></label>
<label style="color:gray" reusekey="subtitle"></label>
</item>
</list>
</content>
</page>
</imag>
6. Example of using tabs control tabs :
<tabs>
<tab label="微信" icon="tab_home_normal.png,tab_home_selected.png" style="label-color:#999999,#46c01b">
<title>
<center>
<label>微信</label>
</center>
</title>
<content draggable="true">
<list type="group">
<item>
<label>微信</label>
</item>
</list>
</content>
</tab>
<tab label="通信录" icon="tab_category_normal.png,tab_category_selected.png" style="label-color:#999999,#46c01b">
<title>
<center>
<label>Address Book</label>
</center>
</title>
<content draggable="true">
<list type="group">
<item>
<label>Address Book</label>
</item>
</list>
</content>
</tab>
<tab label="发现" icon="tab_service_normal.png,tab_service_selected.png" style="label-color:#999999,#46c01b">
<title>
<center>
<label>Discovered</label>
</center>
</title>
<content draggable="true">
<list type="group">
<item>
<label>Discovered</label>
</item>
</list>
</content>
</tab>
<tab label="我" icon="tab_mine_normal.png,tab_mine_selected.png" style="label-color:#999999,#46c01b">
<title>
<center>
<label>我</label>
</center>
</title>
<content draggable="true">
<list type="group">
<item>
<label>我</label>
</item>
</list>
</content>
</tab>
</tabs>
Rendering:
7. Grid layout control grid
usage example:
<grid> <item icon="tab_weixin_normal.png"><label>微信</label></item> <item icon="tab_address_normal.png"><label>通信录</label></item> <item icon="tab_find_frd_normal.png"><label>找朋友</label></item> <item icon="tab_settings_normal.png"><label>设置</label></item> </grid>
Rendering:
8. Popup menu control PopupMenu
popupmenu is similar to the content control, you can add other controls such as list, grid, screens, etc., but it is hidden at the beginning, to be displayed by the open() method, the popup menu can be displayed in multiple different positions.
Example of use:
<?xml version="1.0" encoding="utf-8"?>
<imag>
<script>
<![CDATA[
function openPopupMenu() {
$('test_popupmenu').open();
}
]]>
</script>
<page>
<title>
<center>
<label>Popup menu centered</label>
</center>
</title>
<popupmenu id="test_popupmenu" position="center" onclose="hint('onclose');">
<list>
<item onclick="$('test_popupmenu').close();hint('复制')">
<label>Copy</label>
</item>
<item onclick="$('test_popupmenu').close();hint('收藏')">
<label>Favorites</label>
</item>
<item onclick="$('test_popupmenu').close();hint('翻译')">
<label>Translation</label>
</item>
<item onclick="$('test_popupmenu').close();hint('举报')">
<label>Report</label>
</item>
</list>
</popupmenu>
<content>
<button onclick="openPopupMenu();">Popup menu</button>
</content>
</page>
</imag>
Effect picture:
9. Button control button
use example:
<button style="background:#3E86D7,#2873C2;padding:10;corner-radius:8;width:120;color:white;font-size:14" onclick="hint('self-drawn button')"> Self-drawn button</button>
Renderings:
10. Side sliding menu bar SlidingMenu
SlidingMenu is used to display the side sliding menu. SlidingMenu includes two items, the first item is the menu item on the left, and the second item is the content on the right.
The menu item on the left is initially hidden and can be opened by calling the open() method.
Example of use:
<slidingmenu id="slidingmenu">
<item>
<content style="background:#666666">
<list>
<item style="background:#333333">
<label style="color:white">头条</label>
</item>
<item style="background:#333333">
<label style="color:white">体育</label>
</item>
<item style="background:#333333">
<label style="color:white">娱乐</label>
</item>
<item style="background:#333333">
<label style="color:white">财经</label>
</item>
<item style="background:#333333">
<label style="color:white">科技</label>
</item>
</list>
</content>
</item>
<item>
<title>
<left>
<button onclick="$('slidingmenu').open()">打开</button>
</left>
<center>
<label>SlidingMenu</label>
</center>
</title>
<content style="background:white">
<label>内容</label>
</content>
</item>
</slidingmenu>