设计JQueryMobile视觉化元件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Custom </a>
❖B加u入ttodantsa-role="button“
❖ 來指定圖示
data-icon
❖ 可指定圖示位置
data-iconpos
❖ 最小化Button寬度
data-inline=“true”
❖ 群組化按鈕
<div data-role="controlgroup" datatype="horizontal">
NavBar
❖ 使用data-role=“navbar”來指定
<div data-role="navbar">
❖ 內置<ul>或<ol>清單標籤
<ul>
<li><a href="#Page2" >Test
Header</a></li>
<li><a
href="#Page3">Test Footer</a></li>
使用Grid排版內容
❖ 可將預排版內容放置於<div> ❖ 在class內指定格式化方式
ui-grid-[a,b,c,d] 兩列,三列,四列,五列
❖ 被排版內容必須使用class指定放置格數
ui-block-[a,b,c,d,e] 指定第一,二,三,四,五格
Collapsible
❖ 使用<div>來群組化內容
</ul>
❖ 可使用class=“ui-btn-active”來指定選取對象
Heawk.baidu.comer Bars
❖ 可放置群組化內容
❖ 按鈕以超連結標籤呈現 ❖ 可使用data-icon來指定圖示 ❖ class=“ui-btn-right”可指定為右定位
Footer Bars
❖ 亦可群組化
❖ 使用data-role=“controlgroup”標籤, ❖ 預設每個按鈕為分離,合併可使用
data-type="horizontal“
Tool Bars 按鈕自訂圖示
❖ 加入CSS標籤,並指定ID #email .ui-icon { background: url(glyphish-icons/18-
envelope.png) 50% 50% no-repeat; }
❖ data-icon指定為"custom” ❖ Id對應至CSS的ID Selector <a href="#" id="email“ data-icon="custom">
指定data-role="collapsible“ 預設會辨認第一組<h [1-6]>標籤作為折疊後
標題
其餘內容則放置於折疊區
❖ 可巢狀配置
❖ 可將多組折疊內容在群組化
使用另一組<div> 搭配data-role="collapsible-set"
❖B加u入ttodantsa-role="button“
❖ 來指定圖示
data-icon
❖ 可指定圖示位置
data-iconpos
❖ 最小化Button寬度
data-inline=“true”
❖ 群組化按鈕
<div data-role="controlgroup" datatype="horizontal">
NavBar
❖ 使用data-role=“navbar”來指定
<div data-role="navbar">
❖ 內置<ul>或<ol>清單標籤
<ul>
<li><a href="#Page2" >Test
Header</a></li>
<li><a
href="#Page3">Test Footer</a></li>
使用Grid排版內容
❖ 可將預排版內容放置於<div> ❖ 在class內指定格式化方式
ui-grid-[a,b,c,d] 兩列,三列,四列,五列
❖ 被排版內容必須使用class指定放置格數
ui-block-[a,b,c,d,e] 指定第一,二,三,四,五格
Collapsible
❖ 使用<div>來群組化內容
</ul>
❖ 可使用class=“ui-btn-active”來指定選取對象
Heawk.baidu.comer Bars
❖ 可放置群組化內容
❖ 按鈕以超連結標籤呈現 ❖ 可使用data-icon來指定圖示 ❖ class=“ui-btn-right”可指定為右定位
Footer Bars
❖ 亦可群組化
❖ 使用data-role=“controlgroup”標籤, ❖ 預設每個按鈕為分離,合併可使用
data-type="horizontal“
Tool Bars 按鈕自訂圖示
❖ 加入CSS標籤,並指定ID #email .ui-icon { background: url(glyphish-icons/18-
envelope.png) 50% 50% no-repeat; }
❖ data-icon指定為"custom” ❖ Id對應至CSS的ID Selector <a href="#" id="email“ data-icon="custom">
指定data-role="collapsible“ 預設會辨認第一組<h [1-6]>標籤作為折疊後
標題
其餘內容則放置於折疊區
❖ 可巢狀配置
❖ 可將多組折疊內容在群組化
使用另一組<div> 搭配data-role="collapsible-set"