天天看點

SharePoint之使用Jquery Mobile定制自己的手機頁面

閑話不說了,切入正題。

衆所周知,SharePoint的手機視圖其實是極醜(勉強)也是極簡單并且不友善定制的,總之,基本上不能用,比如SharePoint首頁如下:

SharePoint之使用Jquery Mobile定制自己的手機頁面

這種,我們肯定是要想方設法簡化展示給使用者的,并且根據使用者需要的進行簡化,那我們再來看看SharePoint的手機首頁(位址可以在網站設定頁找到):

SharePoint之使用Jquery Mobile定制自己的手機頁面

其實看起來還過得去,但是差距還是有點大,我想大多數客戶是不能接受的。那麼我們就來定制自己的SharePoint手機首頁吧。先上圖了:

SharePoint之使用Jquery Mobile定制自己的手機頁面

那麼這樣的效果是不是看起來更舒服呢?那麼接下來将會介紹如果定制。

我們可以添加一個WebPart放到需要重定向的頁面(當然也可以在Web.config配置)。首先我們先來看代碼:

檢查是否手機通路的代碼:

經測試,Android、WP、IPhone都沒問題。接下來,我們編寫WebPart的代碼:

這裡,WebPart我添加了一個配置項,是為了靈活考慮的。其實做過可視化WebPart開發的同學都知道,可視化WebPart隻是加載了一個UserControl而已,對于可視化WebPart,如果我們要定制WebPart的配置項,可以這麼來:

SharePoint之使用Jquery Mobile定制自己的手機頁面

如圖所示,我們就可以設定手機網址了。

既然SharePoint的頁面不行,那就自己來吧。如果你發現一個東東不行,那就推翻他自己來,否則痛苦的遲早還是自己。

手機頁面我們需要放在Layouts目錄下,添加好映射,就開始添加自己的頁面了:

SharePoint之使用Jquery Mobile定制自己的手機頁面

我們來看看Home.htm吧:

明眼人一眼就可以看出使用Jquery Mobile開發的,其實我也是第一次使用Jquery Mobile,但感覺上手還是挺簡單的,不過有行代碼别忘了:

<meta name="viewport" content="width=device-width, initial-scale=1">

加上它,才會有自适應效果,哥哥也是走了彎路才發現的。

那麼手機頁面就這麼搞了。再說點題外話,Layouts目錄在VS添加項時,隻能添加應用程式頁,但是如果我想添加ASP.NET頁怎麼辦了,其實很簡單,添加完應用程式頁後,把多餘的東西幹了就好了,粗暴有力才有結果,這樣才不會受限于應用程式頁的母版頁。

幹完這一切,貌似是Over了,但是你會Happy的發現,920 Pass,Note 2 Pass,IPhone 4s Not pass,IPhone 5 Not pass。于是,又要開始蛋疼找原因了。不兜圈子了,解決方案如下:

打開網站根目錄下的App_Browsers,備份好.browser的兩個檔案,然後删除compat.browser就是了。當然你也可以用記事本打開一個個的更改。全删了的後果是,貌似Chrome浏覽器有影響,但是IE正常,如果你要相容其他浏覽器,那就一項項的自己看吧,看慣了配置的人,看這種應該是小Case了。

做SharePoint開發有時候是一件比較痛苦的事情,龐大的架構總是笨重的~~,以至于有時候老外們喜歡把SharePoint成為ShitPoint~~哈哈。在開發的時候,我曾經是這麼認為的:

不是在不斷地等待中重新整理,就是在不斷地重新整理中等待...

相信做過的人應該深有體驗,一個更改,一個測試,都需要漫長的釋出,即使很多時候我都留下了不少後門(别說你沒幹過,如果沒幹過,那隻能說明…),但是很多時候還是不夠用。那麼如果改變這個狀況呢?那就是使用前端技術進行開發。

如果有時間,接下來,我會講述如何打造自己的SharePoint前端開發架構。

自從有了SharePoint前端開發架構後,再也不用擔心改改發發了~~~

繼續閱讀