JQUERY MOBILE 的 基本理解

1 概念理解 

data-role = 控件类型

id = 空间ID

data-theme = 控件属性

data-icon = 控件属性

2 控件/界面布局 

<div data-role = '' data-theme='' id=''>

</div>

3  程序对GUI元素的控制

<script>

var obj = $( '#id' ); 

//把控件ID和程序对象绑定  --- 通过JAVASCRIPT，+ JQUERY 的语法， 可以把任何一个HTML的元素，作为对象，

//操作 类似于 Dialog dlg = GetDlgItem(ID);

       obj.show();

4 GUI 控制实现-实例 

function hideProgress()

{

obj.hide();

}

5 为界面添加 事件 

buttonAddCategoryVar.click(function()   //为控件 添加事件 响应函数

    {
      showSelect();
      return false;      
    });

</script>

6 程序部分语法（GUI语法为HTML） 

var abc; 声明变量; Javascript 语法

$(#id); 选取HTML元素       JQUERY    的语法

7 GUI 控制实现-实例2 

跨 Page 的GUI切换：

在一个PAGE之中，通过 show control 和 hide control 来切换GUI。

跨PAGE的切换（#ID），点击BUTTON后，GUI会先刷新，然后再切换

8 GUI / 数据 交互实例。多线程

异步调用，后台ALAX去网络取数据，取完数据，然后将取下来的数据，交给handler （callback）函数处理：

//通过另外一个线程，AJAX，请求/获取网络资源。当数据下来后，handler 会被alax 去callback 调用。
function getNews(varCat,handler)
{ 

           //拼接 数据源
  var varURI = NEWS_URI + varCat; 

           //另开线程，取数据； 然后把handler交给ALAX, 让ALAX 去调用 处理函数
  $.ajax({type: GET, dataType: XML, url: varURI, success: handler}); 
  return false; 
}

//处理取下来的，XML 内容
function restoreNews(xml)
{ 
  populateSingleNews(xml); 
  restore(); 
}

9 GUI 控制实现-实例

9.1 放一个空的LISTVIEW控件于PAGE之中

    <div data-role="content" id="contentCategories"> 

        <ul data-role="listview" data-split-icon="delete" data-split-theme="d"  id="currentNews"></ul> 
    </div> 

9.2 根据实际数据填充控件

 //取 数据 -- 解析XML元素，很简单
 var tmpTxt = $(xml).find(CATEGORY).first().text();  
 var desc = $(xml).find(DESCR).first().text();  

         

          //更新 GUI， 通过动态添加HTML内容
 $(HTML_FRG1 + categoryLi + HTML_FRG2 + categoryA + HTML_FRG3 + desc + HTML_FRG4 + category + HTML_FRG5 + 
      categoryDel + HTML_FRG6).prependTo(currentNewsVar);

9.3 为　LISTVIEW，添加响应事件

           //为LISTVIEW中的ITEM，添加 响应动作
  var newDeleteItem = document.getElementById(categoryDel); 
  $(newDeleteItem).click(function() { 
    $.doTimeout( categoryLi, false ); 
    var newListItem = document.getElementById(categoryLi); 
    $(newListItem).remove(); 
    storeCurrentNews(); 
  });