jQuery Mobile 入門案例－研討活動資訊頁（上）

jQuery Mobile 技術文件系列


jQuery Mobile 入門案例－研討活動資訊頁（上｜中｜下）

工作室於 2013/3/23 舉辦的免費高雄軟體科技園區【HTML5 技術講座】活動，為了方便參與學員透過手機查詢，因此套用 jQuery Mobile 製作了簡單的活動資訊頁，接下來利用幾篇文章，說明此網頁的製作過程。

jQuery Mobile 是一單純的 UI 框架，只要遵守其語法規則，不需 JavaScript 就可以很方便的讓開發人員建立具質感的 Mobile 型態網頁，這一組網頁，我們需要三項功能如下：
  • 首頁：活動海報頁
  • 議程：研討會議內容
  • 地點：研討會議舉辦地點與交通資訊
完成後的功能畫面如下：


最後一項，由於要提供三組不同的資訊內容，包含一張地圖，因此分成三個區塊，並提供縮合介面方便使用者操作。

jQuery Mobile 以單一文件模擬多頁介面，此案例只需要一個 .html 檔案就夠了，後續的文章我們逐一討論其中的內容。

jQuery Mobile 入門案例－研討活動資訊頁（上｜中｜下）

jQuery Mobile 技術文件系列



於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

熱門點閱

  • jQuery 事件觸發-trigger()
    jQuery/jQuery Mobile 技術文件　》 方法 trigger() 支援透過程式化的方式觸發某個特定事件，考慮以下的程式碼： $( '#msg' ).trigger( 'click' ); 其中針對 id="msg...
  • 圖書《商業級 ASP.NET MVC 樣式與架構實務》
    商業級 ASP.NET MVC 樣式與架構實務 ISBN：978-986-93475-1-8(平裝) 出版日期：2019/05/30 定價：550 頁數：320 庫存量 < 15 本 範例下載 延伸閱讀 天瓏購買 ｜ 蝦皮 - 益大資訊 ｜ 高雄 三...
  • jQuery 存取元素內容文字的方法
    jQuery/jQuery Mobile 技術文件　》 jQuery 提供了text() 方法，它回傳元素的文字節點，例如以下的配置： < p id ="msg">HTML5 從零開始 </ p > 現在調用 t...
  • 【ASP.NET 商業級資料庫網站開發實務-與ADO.NET共舞】贈書活動
    為了感謝讀者對我們工作室的支持，即將在2008年一月發行的新書，【ASP.NET 商業級資料庫網站開發實務-與ADO.NET共舞】，舉辦贈書活動，辦法如下： 於活動期間，回應此活動公告留下識別名稱， 同時寄一封信至活動信箱 ，即可參加抽獎，活動日期截止時，我們將抽出中獎名單，公佈...
  • 淺談 Entity Framework 與 ADO.NET 差異
    Entity Framework 是ASP.NET MVC 串接底層資料來源最重要的技術之一，由於ASP.NET MVC的彈性相當大，事實上你並不一定要使用 Entity Framework 就能利用 ASP.NET MVC 開網站，直接使用傳統 ASP.NET 開發人員熟悉的 ...
  • 從一個簡單的加法運算功能開發建立 HTML+JavaScript+CSS 概念（上）
    （上） ｜ （中） ｜ （下） Web 前端技術由 HTML+JavaScript+CSS 三項主要的元素所構成，它們之間的關係，這裏用一個簡單的加法運算功能網頁說明。 用來示範的這支加法運算器程式，外觀看起來像這個樣子： 其中兩個方塊，可以讓使用者輸入要...
  • C# 基本輸出與輸入
    資料的輸出與輸入處理，永遠是應用程式最重要的課題，在「 第一支 C# 程式內容架構 」示範的範例程式中，執行結果於主控台輸出一段訊息文字，這是最簡單的資料輸出行為，除此之外還可以輸入指定的資料給應用程式作處理。 class Program { static void...
  • JavaScript 利用 FileReader 讀取文字檔
    過去於瀏覽器介面上，你只能透過 file 型態的 <input > 標籤，提供使用者選取檔案的功能，而現在，利用 HTML5 支援的 API 讀取檔案非常容易，這一篇來看相關的實作。考慮以下的畫面： 按一下選取要讀取的文字檔案，開啟之後的畫面如下： 畫面的...
  • INPUT標籤的 autofocus 屬性
    <input> 導入了新的 autofocus 屬性，讓網頁設計者可以指定網頁載入時預設的焦點控制項，使用者不需要再移動滑鼠點選，即能在預設控制項直接輸入，提供良好的網頁操作體驗，而這個屬性同時適用其它幾種輸入控制項，包含 textarea 以及 button 與 s...
  • JavaScript 的 typeof() 與型別判斷
    你可以透過 typeof 檢視資料型別，例如 typeof(100) 將回傳 number ，以下的程式碼分別測試數種不同型別的資料： < script >     var n0 = typeof (101);     var n1 = typeof (1...