顯示具有 jQuery Mobile與ASP.NET實戰開發 標籤的文章。 顯示所有文章
顯示具有 jQuery Mobile與ASP.NET實戰開發 標籤的文章。 顯示所有文章

2013年12月5日 星期四

jQuery Mobile - 關於 changeHash

Tool:Visual Studio 2012 Ultimate
OS:Windows 8
.NET Framework : 4.5

jQuery Mobile的$.mobile.changePage()方法有一個changeHash選項可以設定。changeHash預設為true,用來指定是否更新瀏覽歷程(history),若設為true會更新歷程(history),增加一筆歷史記錄,若設為false,新載入的頁面會取代目前瀏覽器歷程(browser history),因此未來不能用back按鈕回到此頁。

例如以下範例HTML有兩個Page:Page1與Page2,Page1包含一個<a>利用程式叫用changePage()方法跳到Page2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="Content/jquery.mobile-1.2.0.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.8.3.min.js"></script>
    <script src="Scripts/jquery.mobile-1.2.0.min.js"></script>
    <script>
        $(function () {
            $("#goPage2").click(
                function () {
                    $.mobile.changePage("#Page2", {
                        changeHash: false
                    });
                });
        });
    </script>
</head>
<body>
    <div data-role="page" id="Page1">
        <div data-role="content">
            <p>
                <a id="goPage2" data-role="button">跳到Page2</a>
            </p>
        </div>
    </div>
    <div data-role="page" id="Page2">
        <div data-role="content">
            Page2
        </div>
    </div>
</body>
</html>

changeHash設為false時執行:

image

跳到Page2,則回上一頁的按鈕是disable的,不能點選:

image

將changeHash改為true,執行,則可以點選回上一頁的按鈕:

image

2013年8月9日 星期五

NuGet Local Package

經常使用的NuGet Package可以將之下載下來,放在本機,這樣在網路不通時,也能夠使用一些套件。在瀏覽器使用以下URL

https://www.nuget.org/api/v2/package/套件名稱/版本

便可下載到本機,如下載jQuery 1.8.3版,可以在瀏覽器輸入:

https://www.nuget.org/api/v2/package/jquery/1.8.3

便可下載jquery.1.8.3.nupkg檔案(chrome與firefox),ie10會下載成附檔名為jquery.1.8.3.zip的檔,需自行將附檔名改為nupkg。

將下載下來的nupkg檔案放在本機目錄,如c:\pkg

在Visual Studio 2012 > Tools->Options,新增一個package source,指向此目錄

image

在Visual Studio 2012 安裝Package時就可以選本機的套件

image

2013年7月17日 星期三

jQuery Mobile 好用的日期選擇plugin - DateBox

提供許多種日期、時間的UI介面,有支援中文。

官網在http://dev.jtsage.com/jQM-DateBox/

下載URL:http://dev.jtsage.com/jQM-DateBox/demos/install.html

在jQuery Mobile的網頁中,在Input中直接設定data-role與mode:

<input type="date" data-role="datebox" data-options='{"mode": "calbox"}'>

執行時,只要點選文字方塊後方的圖示,就會顯示月曆

image

 

範例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="Content/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
</head>
<body>
    <div data-role="page" id="Page1">
        <div data-role="header" data-position="fixed">
            <h1>jQuery Mobile</h1>
        </div>
        <!-- /header -->
        <div data-role="content">
            <input type="date" data-role="datebox" data-options='{"mode": "calbox"}'>
        </div>
        <!-- /content -->
        <div data-role="footer" data-position="fixed">
            <h4>©Copyright 2012 Tony & Vivid </h4>
        </div>
        <!-- /footer -->
    </div>

    <script src="Scripts/jquery-2.0.2.js"></script>
    <script>
    </script>
    <script src="Scripts/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.zh-TW.utf8.js"></script>
    <script>
    </script>
</body>
</html>

2013年7月16日 星期二

自訂jQuery Mobile網頁按鈕圖示

若不想要使用內建的jQuery Mobile的按鈕圖示,也不想要自己設計,可以到此網站下載更多現成的圖示

http://www.andymatthews.net/code/jquery-mobile-icon-pack/

預設有兩套圖示可使用:Font Awesome Icons與Origonal Icons,使用方式差不多,以下以Font Awesome Icons為例:

http://www.andymatthews.net/code/jQuery-Mobile-Icon-Pack/font-awesome/

點選畫面上的 "Download the Icon Pack"下載zip檔案

image

跳到此頁面,選擇"download it”

image

解壓縮下載的zip檔案,將font、Images目錄,以及jqm-icon-pack-fa.css加入自己的jQuery Mobile網站

image

 

在jQuery Mobile網頁,引用jqm-icon-pack-fa.css,每一個button設定自己喜歡的data-icon attribute

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="Content/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
   <link href="Content/jqm-icon-pack-fa.css" rel="stylesheet" />
    <script src="Scripts/jquery-2.0.2.js"></script>
    <script src="Scripts/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
    <div data-role="page" id="Page1">
        <div data-role="header" data-position="fixed">
            <h1>jQuery Mobile</h1>
        </div>
        <!-- /header -->
        <div data-role="content">
        </div>
        <!-- /content -->
        <div data-role="footer" data-theme="d" class="ui-bar">
            <div>
                <a data-role="button" data-icon="hand-left">新增</a>
                <a data-role="button" data-icon="hand-right">移除</a>
                <a data-role="button" data-icon="hand-up">上一筆</a>
                <a data-role="button" data-icon="hand-down">上一筆</a>
            </div>
        </div>
        <!-- /footer -->
    </div>
 
</body>
</html>

執行的效果:

image

 

您也可以挑選喜歡的圖示,打包後下載:http://jqmiconpack.andymatthews.net/#/

image

2013年5月16日 星期四

將資料放到SQL Azure

本文為給<jQuery Mobile與ASP.NET實戰開發>一書讀者的參考資料。

將第十一章,範例網站的資料庫,移轉至SQL Azure資料庫,專案名稱為Ch11_CodeFirst.sln。若非本書讀者,可以自己找一個使用Entity Framework Code First 技術的程式來測試。

您需要先有一個Windows Azure帳號,免費試用三個月請到此網站伸請:http://www.windowsazure.com/

image

  • 自定義創建

image

  • 設定資料庫伺服器名稱

image

  • 設定登入SQL Server帳號與密碼

image

  • 建立完成之後,點選新建的MyDB

image

  • 管理IP

image

  • 設定可以存取DB的IP,以下把目前電腦的IP加到允許清單,記的按"保存"

image

  • 顯示connection string

image

  • copy ADO.NET區塊的連線字串

image

  • 修改你的應用程式之連接字串
<connectionStrings>   
    <add name="MyDBContext" connectionString="貼上上一步驟copy來的字串,並設定密碼;"
      providerName="System.Data.SqlClient" />
  </connectionStrings>
  • 修改MyDbInitializer 類別繼承DropCreateDatabaseAlways。此類別為Entity Framework用來初始化DB資料的類別
public class MyDbInitializer : DropCreateDatabaseAlways<MyDBContext> {
  • 按CTRL+F5執行你的程式

image

image

  • 新增查詢

image

  • 查詢Employees資料表內容

image

2013年4月17日 星期三

Q&A:Publish ASP.NET Web API to IIS8

Q&A:web api 可用visual studio 2012發佈到IIS上嗎 ?
A:

以<jQuery Mobile與ASP.NET實戰開發>一書ch12章MyWebAPI範例試著發行Web API到本機IIS8
1.
image
2.Publish
image
3.New 一個profile
image
4.設定名稱
image
5.設定發行資訊
image
6.適當修改叫用到WebAPI時的位置,如index.cshtml:
image
7.publish now
image
8.publish完成會啟動瀏覽器,程式可正確執行:
image

2013年3月8日 星期五

jQuery Mobile與ASP.NET實戰開發-錯誤訂正


P10,第八行

錯誤的程式碼:
<script src="scripts/jquery-1.8.3.vividd.js"></script>
正確的程式碼:
<script src="scripts/jquery-1.8.3.min.js"></script>

P73

 


P122

Page Event Logger Bookmarklet已不存在此URL位置
http://code.jquery.com/mobile/latest/demos/tools/log-page-events.html
可以參考以下URL
https://c9.io/privkey/client/workspace/lib/jquerymobile/tools/log-page-events.html

P168

22_checkbox.htm範例,在更新jQuery 2.0.2與jQuery Mobile 1.3.1 版本後,就不work,更新code為


P169

23_TextEdit.htm範例,在更新jQuery 2.0.2與jQuery Mobile 1.3.1 版本後,就不work,更新code,加入以下反白程式


P181

28_passData.htm傳查詢字串的範例使用到的jqm.page.params.js函式庫和jQuery Mobile 1.3.1版不相容。

2013年2月27日 星期三

書終於上架 - jQuery Mobile與ASP.NET實戰開發


書終於上架了!!

 jQuery Mobile與ASP.NET實戰開發:跨平台行動介面與網頁應用程式設計





以下網站都可查到書訊息:

2012年12月24日 星期一

jQuery Mobile與ASP.NET實戰開發

jQuery Mobile與ASP.NET實戰開發


新書進入Review與排版階段, 預計明年2月問市。
作者:周季賢、許薰尹




第0章   導讀

jQuery Mobile是一個輕量級的JavaScript函式庫,能夠統一市面上常見行動裝置的使用者介面,讓各種不同行動裝置的使用者在瀏覽網站時,能夠以適合該裝置的畫面排版來檢視,並能夠使用接近一般原生應用程式的經驗來操作(Ex: 觸碰或滑動)。甚至能夠搭配PhoneGap來升級成各行動裝置(ex:Windows PhoneiPhoneAndroid)的原生應用程式(Native App)
jQuery Mobile的技術是用來強化網站用戶端(Client)能力,所以開發時勢必要搭配伺服器端(Server)的能力才能夠提供強大的資源(Ex:資料庫或複雜演算法計算)jQuery MobilejQueryjQuery UI為基礎,具有簡單容易使用的特性,內建佈景主題,可以與網站伺服端的程式緊密地整合,例如ASP.NET

內容概覽

本書分為兩篇:第一篇jQuery Mobile練功篇旨在介紹如何使用jQuery Mobile搭配部分HTML5標準來開發跨行動式裝置用網站的介面練功篇,並使用jQueryjQuery Mobile來開發用戶端功能(AJAX、特效、動態生成畫面)與事件(如滑動、碰觸)
第二篇《伺服端整合》則強調jQuery Mobile與伺服端應用程式的整合,搭配ASP.NET 4.5 Web FormsMVC 4設計網站應用程式,以及透過jQuery叫用服務導向類型的程式碼,像是Web ServiceWCF (Windows Communication Foundation)服務,以及.NET Framework 4.5版的ASP.NET Web API架構來設計RESTful網站應用程式。

 

第一篇:jQuery Mobile練功篇

 

第一章:認識jQuery Mobile

了解如何下載、安裝jQuery Mobile,並了解如何使用WebMatrix 2Visual Studio 2012開發工具來設計一個jQuery Mobile網頁,以及使用各式手機模擬器測試網頁。

第二章:網頁設計與導向

如何在一個HTML網頁中設計jQuery Mobile Page,並介紹如何以AJAX技術載入網頁導向其它網頁。透過網頁預先載入功能減少使用者等待網頁載入時間、使用對話盒顯示提示,讓使用者有更好的使用體驗。

第三章:jQuery Mobile工具列

設計適用於行動裝置上的網頁表頭、表尾工具列,以及瀏覽工具列讓使用者更容易瀏覽到其它網頁,或進行一些動作。透過jQuery Mobile內建的佈景主題系統來設定按鈕的樣式。

第四章:使用jQuery Mobile API開發

利用事件機制來攔截jQuery Mobile網頁的執行,或進行Page初始化動作。我們也可以攔截使用者操作行動裝置而觸發的事件,像是螢幕方向變更、長按按鈕、觸碰、滑動等等事件。

第五章:表單項目與Page資料傳遞

了解HTML Form表單項目,以及用來設計使用者介面的ButtonTextPasswordTextAreaRadio ButtonCheckboxSelect等欄位。此外利用HTML5新增的emailurltelsearchnumbercolorrange欄位設計更適用於行動裝置瀏覽器顯示的網頁。

第六章:使用ListView呈現大量資料

ListView可以呈現有序列表(ordered list)與無序列表(unordered list),適合一次顯示多筆資料。本章將介紹ListView基本功能,如何進行客製化,使用Split Button List、巢狀式ListView摺疊式列表,以及簡單的搜尋功能。

第七章:ListView進階開發

客製化ListView搜尋的篩選功能,自訂資料篩選的邏輯。利用jQuery動態建立ListView、以及ListView中的列表項目。

第二篇:伺服端整合實戰篇

 

第八章:整合ASP.NET Web Forms開發jQuery Mobile網站

ASP.NET 4.5 Web Forms可以應用在網站的設計,提供伺服器控制項來設計使用者介面,但並非所有控制項都適合搭配jQuery Mobile使用。本章探討如何在ASP.NET 4.5 Web Forms網站挑選適當的控制項來開發jQuery Mobile網頁,並整合主版頁面技術、佈景主題、探討多國語言網頁的設計,使用Session傳遞資料,以及ASP.NET 4.5新功能—JavaScript打包與壓縮功能。

第九章:整合ASP.NET Web Forms開發資料庫程式

探討如何在jQuery Mobile網頁透過ASP.NET以及.NET Framework函式庫取得伺服端資料庫的資料,此章分別使用ASP.NET資料來源模型、ADO.NET函式庫,以及ADO.NET實體資料模型(5.0)版來設計資料異動程式碼。較前版不同的是:ADO.NET實體資料模型(5.0)版使用T4樣版來產生Entity類別。

第十章:使用MVC 4開發jQuery Mobile網站應用程式

MVC開發架構讓程式設計師可遵循模型-檢視-控制器設計模式(Model-View-Controller Design Pattern)來建立網站應用程式,避免開發階段許多已知的問題。本章將介紹MVC 4基本觀念,了解Visual Studio 2012 MVC4專案中的目錄結構,並探討如何設計一個網頁,同時兼具行動版與桌面版,同時適用於行動裝置與一般電腦的瀏覽器來顯示,讓使用者可以自行切換想要使用的版本。本章最後以MVC架構來設計網站購物車範例做結尾。

第十一章:開發ASP.NET MVC4資料庫程式

撰寫符合MVC模式的資料庫存取程式,本章分別利用ADO.NET函式庫與ADO.NET實體資料模型來設計資料異動程式碼,進行資料的新增、刪除、修改、查詢作業。本章將使用ADO.NET實體資料模型5.0版的Code First新功能來建立資料存取程式碼,先手動建立Entity類別,再自動根據類別的定義來產生資料庫結構描述資訊和資料。

第十二章:使用服務導向程式

微軟在2002.NET Framework第一個版本問市時,提供ASP.NET Web服務;在2006年推出了新一代的服務導向程式—WCF服務。於.NET Framework 4.5版推出時,針對REST開發風格以及資料的存取推出ASP.NET Web API,本章將要探討這三種服務導向程式技術和jQuery Mobile之間的整合。

附錄

  • 附錄一:將mdf檔案附加到LocalDb
  • 附錄二:使用伺服器總管將mdf資料庫附加到LocalDb
  • 附錄三:Visual Studio 2012新功能(for jQuery Mobile)
         HTML5智慧感知功能、程式碼片段、縮排等功能。
         內容摺疊功能、色彩選擇器、CSS語法片段功能。
         JavaScript增強的排版能力XML註解移至定義功能。
         網頁開發與除錯的新功能、Page Inspector
  • 附錄四:密技與範例集
         密技1:基本Mobile網頁範例
         密技2:動態套用CSS範例
         密技3:整合HTML5播放影片
         密技4:整合Google地圖的jQuery Mobile網頁
         密技5:拼圖程式範例
         密技6:偵測用戶端瀏覽器
  • 附錄五:PhoneGap

隨書光碟jQuery Mobile教學影片(Visual Studio 2010)

1.      初探JQueryMobile
2.      Jquery Moibile開發須知
3.      認識JQuery Moibile網頁
4.      JQuery Moibile網頁導向
5.      設計JQuery Moibile視覺化元件
6.      設計JQuery Moibile List View
7.      設計JQuery Moibile表單成員
8.      設計JQuery Moibile事件
9.      實作演練-使用JQuery Moibile呼叫Web Service並動態產生List View
10.  實作演練-使用ASP.NET Web FormJQuery Moibile設計驗證網頁
11.  使用ASP.NET MVC 4開發JQuery Moibile行動式裝置網頁



總網頁瀏覽量