PHP:oci_free_descriptor()的用法_Oracle函數
701
2023-12-12
本文實例講述了jquery-mobile基礎屬性與用法。分享給大家供大家參考，具體如下：
寫在前面
本文是根據w3c 學習軌跡，自己研習過程中記錄下的筆記，只供自己學習軌跡記錄之用，不喜勿噴。
0. 引入庫
引入對應的文件：
<link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
一、頁面結構說明
頁面的三要素：
頁面 data-role="page" //注意這個屬性必須有 且為最外層div 否則事件注冊的時候 會自動注冊倆次
頁頭 data-role="header" //頁面頭部標題 或菜單區
內容 data-role="content" //頁面內容
頁尾 data-role="footer" //頁尾標題 或菜單區
<div data-role="page" id="pageone"> <div data-role="header"> <h1>在此處寫入標題</h1> </div> <div data-role="content"> <p>在此處寫入正文</p> </div> <div data-role="footer"> <h1>在此處寫入頁腳文本</h1> </div> </div>
【1.頁面全屏】
需要當前頁面的頭部和尾部留在最上和最下的時候 可以在 header 和 footer 的div 中 加上屬性
data-position="fixed" data-fullscreen="true"
注意倆個必須同時加，否則將無任何效果
【2.頁面標題居中】
必須在 header 或 footer的 div的下一級加上 h1 標簽 其他標簽無效
<div data-role="footer"> <h1>標題文字</h1> </div>
二、在HTML中創建多個頁面
【頁面內之間切換】
默認顯示第一個頁面
其他頁面隱藏
<div data-role="page" id="pageone">
<div data-role="content">
<a >轉到頁面二</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a >轉到頁面一</a>
</div>
</div>
【對話框】
如果頁面中只用倆個page 默認第一個page 為主體頁面
不會因為第二個標簽a的data-rel 屬性改變第一個頁面成為對話框
當然如果有多個page，其他的也是可以更改的，但是第一個page 不會更改
<div data-role="page" id="pageone">
<div data-role="content">
<a data-rel="dialog">轉到對話框二</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>我是一個對話框！</h1>
</div>
<div data-role="content">
<p>對話框與普通頁面不同，它顯示在當前頁面的頂端。它不會橫跨整個頁面寬度。對話框頁眉中的圖標 “X” 可關閉對話框。</p>
<a >轉到頁面一</a>
</div>
<div data-role="footer">
<h1>頁腳文本</h1>
</div>
</div>
三、多個頁面之間的過渡效果
在a標簽中添加屬性
data-transition="slide"
當然可以添加滑動的反方向動作
data-direction="reverse"
fade 默認。淡入淡出到下一頁。
flip 從后向前翻動到下一頁。
flow 拋出當前頁面，引入下一頁。
pop 像彈出窗口那樣轉到下一頁。
slide 從右向左滑動到下一頁。
slidefade 從右向左滑動并淡入到下一頁。
slideup 從下到上滑動到下一頁。
slidedown 從上到下滑動到下一頁。
turn 轉向下一頁。
none 無過渡效果。
四、按鈕的使用
生成按鈕的三種方式
<button>
<input type="submit/reset/button"/>
<a data-role="button"> (推薦)
【導航按鈕】
data-role="button"
【行內按鈕】
默認一個按鈕占據一行，如果不想占據一行可以使用內聯屬性
data-inline="true"
【組合按鈕】
data-role="controlgroup" data-type="horizontal/vertical"
<div data-role="controlgroup" data-type="horizontal"> <p>水平分組：</p> <a data-role="button">按鈕 1</a> <a data-role="button">按鈕 2</a> <a data-role="button">按鈕 3</a> </div> <div data-role="controlgroup" data-type="vertical"> <p>垂直分組（默認）：</p> <a data-role="button">按鈕 1</a> <a data-role="button">按鈕 2</a> <a data-role="button">按鈕 3</a> </div>
【后退按鈕】（會自動忽略 href屬性）
data-rel="back"
data-corners true | false
規定按鈕是否有圓角。默認true
data-mini true | false
規定是否是小型按鈕。默認false
data-shadow true | false
規定按鈕是否有陰影。默認true
五、圖標的使用
為按鈕添加圖標 只要加上如下屬性 即可
data-icon="search"
data-icon="arrow-l" 左箭頭
data-icon="arrow-r" 右箭頭
data-icon="delete" 刪除
data-icon="info" 信息
data-icon="home" 首頁
data-icon="back" 返回
data-icon="search" 搜索
data-icon="grid" 網格
圖標定位
data-iconpos="top/left/right/bottom" 默認left
只要圖標的話：
將上述屬性設置為 notext
data-iconpos="notext"
六、工具欄的使用
【頁眉】
向文字的左右倆測各加一個按鈕
<div data-role="page"> <div data-role="header"> <a data-role="button" data-icon="home">首頁</a> <h1>歡迎訪問我的主頁</h1> <a data-role="button" data-icon="search">搜索</a> </div> </div>
[單個按鈕居右]（默認居左）
如果只加一個按鈕，不管是加在h1的前面還是后面都會默認放在左側，如果想放在右側，需在按鈕上添加
如下屬性
class="ui-btn-right"
[注意]：頁眉只可以包含一到倆個按鈕，頁腳無限制
【頁腳】
頁腳和頁眉不同，他省去了一些內聯樣式 且不會居中
如果需要居中，則可以在footer上添加
class="ui-btn" (并且只能在footer上添加)
當然也可以選擇水平或垂直的組合方式
<div data-role="footer" class="ui-btn" > <div data-role="controlgroup" data-type="horizontal"> <a data-role="button" data-icon="plus">轉播到新浪微博</a> <a data-role="button" data-icon="plus">轉播到騰訊微博</a> <a data-role="button" data-icon="plus">轉播到QQ空間</a> </div> </div>
【頁眉和頁腳的定位】
[inline] 默認
頁眉頁腳與頁面內容平行 即內容多高 頁眉和頁腳隨內容的高度增加
data-position="inline"
[fixed]
根據滾動條的位置 分別顯示 或 隱藏頁眉或頁腳
data-position="fixed"
[fullscreen]
需要同時定義倆個屬性 會同時顯示隱藏 頁眉或頁腳
data-position="fixed" data-fullscreen="true"
七、導航欄的使用
【導航欄】
使用 navbar 定義導航欄
data-role="navbar"
注意：navbar下面的a標簽 可以免去
data-role="button" 自動會添加類似屬性
<div data-role="header">
<h1>標題 可不要</h1>
<div data-role="navbar">
<ul>
<li><a >首頁</a></li>
<li><a >導航</a></li>
<li><a >搜索</a></li>
</ul>
</div>
</div>
【選中按鈕】
在不點擊的情況下 激活選中
class="ui-btn-active"
點擊后激活選中（這個預先放入按鈕 屬性中 點擊時會被激活）
class="ui-state-persist"
[注意]：
導航按鈕可以放在 footer content header中
需要使用的時候：
必須按照
div:data-role="footer">div:data-role="navbar">ul>li>a 的層級來展示
八、可折疊的使用
【單個可折疊】
data-role="collapsible"
格式：
<div data-role="collapsible"> <h1>標題</h1> <p>內容</p> </div>
折疊默認是關閉的，需要默認打開 可添加屬性
data-collapsed="false"
【嵌套的可折疊】
此格式 可以去掉內容 保留標題，制作無限極菜單
<div data-role="collapsible"> <h1>點擊我 - 我可以折疊！</h1> <p>我是被展開的內容。</p> <div data-role="collapsible"> <h1>點擊我 - 我是嵌套的可折疊塊！</h1> <p>我是嵌套的可折疊塊中被展開的內容。</p> </div> </div>
【集合可折疊】
父：data-role="collapsible-set"
子：data-role="collapsible"
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>點擊我 - 我可以折疊！</h3>
<p>我是可折疊的內容。</p>
</div>
<div data-role="collapsible">
<h3>點擊我 - 我可以折疊！</h3>
<p>我是可折疊的內容。</p>
</div>
<div data-role="collapsible">
<h3>點擊我 - 我可以折疊！</h3>
<p>我是可折疊的內容。</p>
</div>
<div data-role="collapsible">
<h3>點擊我 - 我可以折疊！</h3>
<p>我是可折疊的內容。</p>
</div>
</div>
【去掉標題圓角】
data-inset="false"
【小化按鈕】
data-mini="true"
【改變圖標】
data-expanded-icon
九、網格布局
【四種網格布局】
網格類 列 列寬度
對應 實例
ui-grid-a 2 50% / 50% ui-block-a|b
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e
父類 行row
ui-grid-a 倆列
ui-block-a
ui-block-b
注意子類每一個新的類 ui-block-a 都會另起一行
十、列表視圖
在ul或ol上增加 屬性
data-role="listview"
【特定列分割】
li列表中增加分隔符 手動分割
data-role="list-divider"
【按字母自動分割】
ul/ol 增加屬性
data-autodividers="true"
【圓角】
data-inset="true"
【搜索與過濾】
data-role="listview" 列表屬性
data-autodividers="true" 按字母自動分組屬性
data-inset="true" 圓角屬性
data-filter="true" 數據過濾屬性
data-filter-placeholder="搜索姓名 ..." 過濾文本框默認文字屬性
<ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true" data-filter-placeholder="搜索姓名 ..."> <li><a >Adele</a></li> <li><a >Agnes</a></li> <li><a >Albert</a></li> <li><a >Billy</a></li> <li><a >Bob</a></li> <li><a >Calvin</a></li> <li><a >Cameron</a></li> <li><a >Chloe</a></li> <li><a >Christina</a></li> <li><a >Diana</a></li> <li><a >Gabriel</a></li> <li><a >Glen</a></li> <li><a >Ralph</a></li> <li><a >Valarie</a></li> </ul>
【只讀屬性】
去掉 li里的a標簽 保留文字即可
【列表內容】
1. 包含縮略圖的列表
<ul data-role="listview" data-inset="true">
<li>
<a >
<img src="http://www.gimoo.net/i/chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
<li>
<a >
<img src="http://www.gimoo.net/i/firefox.png">
<h2>Mozilla Firefox</h2>
<p>Firefox is a web browser from Mozilla. Released in 2004.</p>
</a>
</li>
</ul>
2. 列表圖標
如果是16*16的 圖標 加上
class="ui-li-icon"
<li> <a > <img src="http://www.gimoo.net/t/1811/us.png" alt="USA" class="ui-li-icon"> USA </a> </li>
不是 就同上。
3. 拆分按鈕
<ul data-role="listview"> <li> <a ><img src="http://www.gimoo.net/t/1811/chrome.png"></a> <a data-rel="dialog">下載瀏覽器</a> </li> </ul>
4. 計數泡沫
a標簽 里的sapn加上類名
class="ui-li-count"
<ul data-role="listview"> <li><a >Inbox<span class="ui-li-count">335</span></a></li> <li><a >Sent<span class="ui-li-count">123</span></a></li> <li><a >Trash<span class="ui-li-count">7</span></a></li> </ul>
5. 更改默認圖標
li 里添加屬性
data-icon="minus"
6. 日歷事件
列表>分隔列表
>列表內容
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">星期三, 1 月 2 日, 2013 <span class="ui-li-count">2</span></li>
<li><a >
<h2>醫生</h2>
<p><b>To Peter Griffin</b></p>
<p>Well, Mr. Griffin, I've looked into physical results.</p>
<p>Ah, Mr. Griffin, I'm not quite sure how to say this. Kim Bassinger? Bass singer? Bassinger?</p>
<p>But now, onto the cancer</p>
<p>You are a Cancer, right? You were born in July? Now onto these test results.</p>
<p class="ui-li-aside">Re: Appointment</p></a>
</li>
<li><a >
<h2>Glen Quagmire</h2>
<p>Remember me this weekend!</p>
<br>
<p>- giggity giggity goo</p>
<p class="ui-li-aside">Re: Camping</p></a>
</li>
</ul>
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》、《jQuery切換特效與技巧總結》、《jQuery遍歷算法與技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
