jquery.zSlide.js-基于CSS3/HTML5演示文档jQuery插件
一、賣(mài)的什么葫蘆藥？
jquery.zSlide.js是我最近折騰的一個(gè)jQuery插件，借助于CSS3和HTML5的一些新特性，在瀏覽器中實(shí)現(xiàn)類(lèi)似于powerpoint幻燈片展示。
如果你看到這段文字，說(shuō)明您正使用RSS閱讀或轉(zhuǎn)自《一棵樹(shù)-博客園》，原文地址：http://www.cnblogs.com/atree/archive/2012/02/17/jquery-zSlide-js-CSS3-HTML5.html二、為何需要？
無(wú)論是在公司內(nèi)部，還是在一些技術(shù)會(huì)議上，我們做分享的時(shí)候，用的最多的想必是powerpoint。但是，powerpoint這個(gè)東西本身就是缺乏“自由”與“分享”精神的，因?yàn)槠淠壳盁o(wú)法在線共享。要學(xué)習(xí)某技術(shù)會(huì)議上大牛分享的東西，多半要去找資源→download→整理或解壓或打開(kāi)之類(lèi)，資源不好還要清理等等。
oh, my! 像我這樣懶得抽筋的人，決不愿意專(zhuān)門(mén)去做這種“燒水洗腳”的事情的！此時(shí)，我總不禁慨嘆，要是可以直接在瀏覽器中查看該多好啊——飯來(lái)張口，衣來(lái)伸手。
其實(shí)呢，是有專(zhuān)門(mén)的網(wǎng)站做這樣的事情的。例如國(guó)內(nèi)的豆丁，風(fēng)波的百度文庫(kù)，國(guó)外知名的slideshare，但是，考慮到產(chǎn)品兼容性，這些站點(diǎn)的文檔演示媒介都是flash，其實(shí)也沒(méi)什么不好啦，就是巧克力里面的堅(jiān)果外面還包了一層殼，有點(diǎn)讓人不爽氣！
顯然，如果可以使用HTML+JS實(shí)現(xiàn)類(lèi)似powerpoint演示文檔的頁(yè)面效果，即方便資源共享和技術(shù)的傳播，同時(shí)，又具有簡(jiǎn)潔高效持久性。這就是zSlide誕生的意義所在。//zxx:以后一些分享我會(huì)附上zSlide幻燈片版本。
三、主要使用人群
zSlide插件下的演示文檔頁(yè)面的制作雖然簡(jiǎn)單，但是，還是需要一定的CSS與HTML技術(shù)基礎(chǔ)的，因此，zSlide插件的主要使用人群就是web開(kāi)發(fā)者了，尤其是web前端開(kāi)發(fā)er們。
四、demo體驗(yàn)與示例下載
demo
您可能狠狠地點(diǎn)擊這里：演示文檔jQuery插件zSlide demo
下載
您可以狠狠地點(diǎn)擊這里：上面示例demo源文件打包下載
插件本身用到的資源有：
jquery.zSlide.css,
jquery.js (官方最新)
jquery.zSlide.js
一個(gè)字符集字體以及一些HTML
沒(méi)有使用任何圖片
五、關(guān)于瀏覽
瀏覽方式有兩種：
其一為快捷鍵，PageUp鍵和PageDown，分別指往前和往后；
其二為按鈕（見(jiàn)右下角工具欄），有回到起始頁(yè)，前進(jìn)，后退以及快速索引。如下圖：
zSlide插件下如果你要跨界瀏覽時(shí)，頁(yè)面會(huì)提示“前面沒(méi)有”或是“已經(jīng)播放結(jié)束”，如下截圖：
您可能注意到了，zSlide插件含有鼠標(biāo)隱藏功能，即鼠標(biāo)如果在上demo頁(yè)面主體區(qū)域保持不動(dòng)超過(guò)3秒，鼠標(biāo)就會(huì)隱藏，移動(dòng)的時(shí)候又會(huì)出現(xiàn)。這是為了瀏覽的時(shí)候更好的體驗(yàn)，類(lèi)似視頻瀏覽~~
六、關(guān)于瀏覽器支持
因?yàn)槭褂昧瞬簧貱SS3和HTML5的技術(shù)，以及ES5的些東西。因此，支持的瀏覽器為IE9+，最近版本的FireFox, Opera以及Chrome瀏覽器。綜合來(lái)看，Chrome瀏覽器下的交互效果最好。
順帶一提，本插件不少idea和做法借鑒了jQuery Mobile.
七、關(guān)于界面
1.頂部
頂部為進(jìn)度條，最右邊的數(shù)字是總頁(yè)面，會(huì)變的那個(gè)數(shù)字指當(dāng)前所在頁(yè)數(shù)。
2. 主體
主體就是主體了，沒(méi)什么好說(shuō)的。
3. 底部
底部左側(cè)為版權(quán)信息，請(qǐng)保留。右側(cè)為工具欄，包含一些交互和自定義的功能。
提示：頂部進(jìn)度條以及底部的工具條可以通過(guò)雙擊頁(yè)面的空白區(qū)域進(jìn)行隱藏與顯示的切換顯示。
八、關(guān)于底部工具條
底部工具欄上幾個(gè)關(guān)于瀏覽的按鈕上面已經(jīng)展示了，不再贅述，現(xiàn)在著重講講其他兩個(gè)重要的交互按鈕。
1. 定時(shí)提醒功能
右下角鐘一樣的圖標(biāo)代表的就是定時(shí)提醒功能。平時(shí)我們做文檔演示應(yīng)該都是有時(shí)間限制的，例如45分鐘演講，15分鐘提問(wèn)。可能我們講得過(guò)于投入一下子忘了時(shí)間久不太好了，這時(shí)如果演示文檔可以賣(mài)萌般地提下醒，那就很有意思地啦！
點(diǎn)擊后會(huì)有類(lèi)似下圖的彈框：
其中總時(shí)間是必填的，小于720分鐘，也就是12小時(shí)，該時(shí)間是一定會(huì)提醒的。結(jié)束前多少時(shí)間提醒可以輸入多個(gè)以非數(shù)值分隔的時(shí)間值，插件會(huì)自動(dòng)篩選其中合適的時(shí)間值（應(yīng)小于總時(shí)間），點(diǎn)擊確定按鈕后進(jìn)入定時(shí)提醒。
定時(shí)提醒功能使用了HTML5 localStorage存儲(chǔ)就是，也就是當(dāng)你不小于關(guān)閉了該頁(yè)面，再次打開(kāi)該頁(yè)面的時(shí)候，如果檢測(cè)到您本地有未過(guò)期的提醒時(shí)間，會(huì)提醒你是否使用該時(shí)間，如下截圖：
zSlide插件走的是賣(mài)萌路線，其所有的提示都是“主人，~”開(kāi)頭，那時(shí)間提醒舉例，根據(jù)距離的時(shí)間不同，其賣(mài)萌的提示也會(huì)有所差異，其中就是一個(gè)：
?
2. 自定義背景功能
zSlide插件下的默認(rèn)背景是我個(gè)人網(wǎng)站配色的深色基色#34538b加上一個(gè)徑向高亮漸變。您可以根據(jù)自己的喜好對(duì)其進(jìn)行修改。
點(diǎn)擊如下所示圖標(biāo)按鈕：
在打開(kāi)的彈框中您可以設(shè)置自己喜歡的背景色（建議使用深色背景，例如#123456），或是自己喜歡的在線圖片地址，或者直接從本地選擇您喜歡的一張圖片（HTML5 File文件Ajax上傳本地預(yù)覽）。
所有背景的修改都是即時(shí)預(yù)覽的，且100%自適應(yīng)于瀏覽器窗體，當(dāng)您點(diǎn)擊取消按鈕關(guān)閉的時(shí)候背景會(huì)從預(yù)覽狀態(tài)還原。
現(xiàn)在我們從本地隨便選取一張圖片（需小于500K），然后頁(yè)面背景就會(huì)：
如果點(diǎn)擊確定按鈕的時(shí)候“記住我的選擇”處于勾選狀態(tài)，則下次打開(kāi)這個(gè)頁(yè)面的時(shí)候就會(huì)使用該背景圖，否則，瀏覽器一旦關(guān)閉，背景還是舊的。
3. 使用幫助
這就是個(gè)鏈接了，就是最右邊的那個(gè)圖標(biāo)按鈕，就是指向本文的。該功能不可自定義。
關(guān)于工具按鈕自定義
實(shí)際上，右下角的工具欄選項(xiàng)是可以自定義的。完整的工具欄選項(xiàng)如下：
再初始化的之前，您可以通過(guò)改變?cè)摂?shù)組選項(xiàng)決定哪些工具欄項(xiàng)顯示，例如，我們現(xiàn)在把“回到初始頁(yè)”這個(gè)選項(xiàng)去掉，則如下代碼：
$(function() {$.zSlide.arrayTool = ["Time", "Background", "Prev", "Index", "Next"];$.zSlide.init(); });九、關(guān)于代碼部分的使用
CSS部分
如下：
因?yàn)榛脽羝瑑?nèi)容千差萬(wàn)別，因此，一般來(lái)講，每個(gè)幻燈片都對(duì)應(yīng)一個(gè)特別的內(nèi)容相關(guān)的CSS文件，對(duì)應(yīng)上面的yourSlide.css。例如demo頁(yè)面中的demo.css，對(duì)動(dòng)態(tài)載入的圖片進(jìn)行了一些特殊的樣式設(shè)置。
提示：jquery.zSlide.css只對(duì)body標(biāo)簽reset了一個(gè)margin屬性和微軟雅黑字體，然后a標(biāo)簽的顏色和點(diǎn)擊樣式，pre標(biāo)簽的樣式，其他所有的標(biāo)簽都沒(méi)有reset。
JS部分
如下：
與CSS類(lèi)似，幻燈片中可能會(huì)有一些特殊的交互。例如demo頁(yè)面中為提高性能，對(duì)圖片所做的的動(dòng)態(tài)延時(shí)加載。
提示：zSlide插件采用的是字面量的書(shū)寫(xiě)風(fēng)格，其中所有的參數(shù)，方法都是可以全局訪問(wèn)的，然而，除了上面提到的arrayTool參數(shù)，其他屬性或方法不建議也沒(méi)有必要去修改。另外zSlide插件中還內(nèi)置了一個(gè)針對(duì)這類(lèi)無(wú)滾動(dòng)頁(yè)面的彈出框插件zDialog，這個(gè)后面會(huì)進(jìn)一步介紹。
HTML部分
HTML部分的頭部和尾部是固定不變的，請(qǐng)勿有任何修改。如下：
主體部分是有著特定格式的列表。正如前面提到的，本插件借助了一些jQuery Mobile的做法，例如并沒(méi)有采用HTML5的新標(biāo)簽，標(biāo)簽類(lèi)似使用自定義屬性data-標(biāo)示，且這個(gè)標(biāo)示關(guān)系到交互行為，是必不可少的。
拿demo頁(yè)面中第一個(gè)很簡(jiǎn)單的slide頁(yè)面舉例，如下HTML代碼：
<div id="slide1" class="zsl_slide slide" data-role="slide"><h1 class="zsl_title">Fade列表測(cè)試</h1><div class="zsl_section"><p class="zsl_fade fade" data-role="fade">這是data-role為fade的第1行元素</p><p class="zsl_fade fade" data-role="fade">這是data-role為fade的第2行元素</p></div> </div>首先，每個(gè)slide頁(yè)面需要包含在一個(gè)data-role="slide"的div標(biāo)簽中，其中類(lèi)名zsl_slide用做間距美化，slide為webkit核心瀏覽器下頁(yè)面切換動(dòng)畫(huà)效果所必須，id是必須且唯一的（可以沒(méi)有規(guī)律，當(dāng)然有序的id便于識(shí)別）。
如果slide頁(yè)面中有需要逐步呈現(xiàn)的元素，需要給這些元素設(shè)置data-role="fade"，同時(shí)應(yīng)用這兩個(gè)類(lèi)名zsl_fade和fade。
一般來(lái)講，zsl_title和zsl_section的結(jié)構(gòu)使固定不變的。
在使用的時(shí)候，我們需要改動(dòng)的就是<div class="zsl_section">之間的主體內(nèi)容。且建議使用語(yǔ)義化的標(biāo)簽（div標(biāo)簽避免使用）。
特定的HTML，然后，其他所有的交互都交給zSlide完成，從使用上來(lái)講不可不謂簡(jiǎn)單。只是，在制作演示文檔的時(shí)候要花點(diǎn)功夫，因?yàn)闊o(wú)法像powerpoint一樣可以拖動(dòng)等可視化操作，但是，對(duì)于我們這類(lèi)經(jīng)常與瀏覽器打交道的前端開(kāi)發(fā)者而言，這些都是小菜了，因此，zSlide可以說(shuō)是專(zhuān)門(mén)針對(duì)前端開(kāi)發(fā)人員使用的演示文檔jQuery插件！
事件
add on 2012-01-04 內(nèi)容太多，這個(gè)給忘了，補(bǔ)上。
您可以在data-role="slide"的元素上綁定一個(gè)slideload事件，當(dāng)這個(gè)slide頁(yè)面載入的時(shí)候就會(huì)執(zhí)行該方法。例如demo頁(yè)面中的圖片的動(dòng)態(tài)載入，其相關(guān)代碼就是：
$("#slide3").bind("slideload", function() {var that = $(this);//為了清楚看到延時(shí)加載的效果，這里設(shè)置了一個(gè)1秒的定時(shí)器//... });相信該事件API會(huì)很有用的。
頁(yè)面間跳轉(zhuǎn)
add on 2012-01-04
您可以在頁(yè)面上使用a標(biāo)簽做自定義的slide頁(yè)面間的跳轉(zhuǎn)，例如：
<a href="#slide3">跳跳跳</a>點(diǎn)擊這個(gè)“跳跳跳”鏈接后，整個(gè)演示文檔就會(huì)指向id為slide3的slide頁(yè)面，實(shí)現(xiàn)了無(wú)刷新跳轉(zhuǎn)。如果這個(gè)id指向的元素不存在或是不是data-role="slide"，則演示文檔會(huì)跳轉(zhuǎn)到第一頁(yè)，這個(gè)是需要注意的。
十、內(nèi)置zDialog插件介紹
zSlide插件中還內(nèi)置了一個(gè)zDialog插件，用來(lái)顯示一些提示文字或是工具欄的交互操作等。該插件可以全局訪問(wèn)，您可以隨意使用，現(xiàn)在簡(jiǎn)單介紹下。
zDialog概述
zDialog插件是個(gè)有針對(duì)性（專(zhuān)門(mén)針對(duì)這種無(wú)滾動(dòng)頁(yè)面設(shè)計(jì)的）的插件，其UI應(yīng)用了很多CSS3屬性，定位借助CSS完成（JS亦可調(diào)整，只在某些情況下），一次只能打開(kāi)一個(gè)彈框，彈框關(guān)閉，里面所有的元素都會(huì)被remove，因此不能直接load當(dāng)前頁(yè)面上已經(jīng)存在的元素，否則一次性玩完。
參數(shù)
與zSlide不同，zDialog提供了不少參數(shù)API，如下表：
| url | ajax頁(yè)面地址，文字或HTML字符串 | "" |
| ajax | 布爾型 是否是ajax加載。如果是true,則url參數(shù)就當(dāng)作ajax請(qǐng)求地址處理 | true |
| ajaxData | 對(duì)象 ajax發(fā)送附帶參數(shù) | {} |
| overlay | 布爾型 是否顯示黑色淺透明遮罩層。默認(rèn)是顯示 | true |
| closable | 布爾型 是否顯示關(guān)閉按鈕。默認(rèn)為不顯示 | false |
| title | 字符串 彈框的標(biāo)題。有則顯示，無(wú)則不顯示 | “” |
| pageContainer | jQuery元素對(duì)象 加載彈框HTML的容器 | $("body") |
| onShow | 函數(shù) 彈框顯示時(shí)調(diào)用的方法 | $.noop |
| onClose | 函數(shù) 彈框完全關(guān)閉時(shí)調(diào)用的方法 | $.noop |
基本使用如下：
$.zDialog.open({url: 'ajax.php',title: '測(cè)試',closable: true,onShow: function() {alert('加載成功咯~~');} });一些內(nèi)置的API方法有：
1. $.zDialog.alert(message, callback, options);
例如上面這張圖的效果就是如下一行代碼搞定的：
callback參數(shù)為點(diǎn)擊確定按鈕時(shí)候執(zhí)行的回調(diào)，options參數(shù)一般都是打醬油的。
2. $.zDialog.confirm(message, sureCall, cancelCall, options);
確認(rèn)提示框，例如下面這個(gè)效果即使使用的這個(gè)方法：
各個(gè)參數(shù)的含義一目了然，我就不啰嗦了。options參數(shù)同樣一般都是打醬油的。
3. $.zDialog.remind(message, options);
直接提示框，沒(méi)有關(guān)閉按鈕，例如：
4. $.zDialog.loading(options);
“加載中”效果提示框，例如ajax load頁(yè)面的時(shí)候，插件會(huì)自動(dòng)調(diào)用該方法。
5. $.zDialog.position();
彈框的JS重定位。該方法用在彈框內(nèi)容寬度超過(guò)最小寬度很多或是高度超過(guò)最小高度很多的時(shí)候使用，例如zSlide插件中的自定義背景效果的彈框——
6. $.zDialog.close();
彈框關(guān)閉方法，調(diào)用該方法會(huì)觸發(fā)onClose回調(diào)，且Chrome等瀏覽器下會(huì)有pop動(dòng)畫(huà)效果。
7. $.zDialog.remove();
彈框移出方法，調(diào)用該方法不會(huì)觸發(fā)onClose回調(diào)，也沒(méi)有任何動(dòng)畫(huà)效果，元素直接從頁(yè)面上bye bye.
?
轉(zhuǎn)自：http://www.zhangxinxu.com/wordpress/?p=2136
總結(jié)
以上是生活随笔為你收集整理的jquery.zSlide.js-基于CSS3/HTML5演示文档jQuery插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： HDU-2688 Rotate
- 下一篇： ruby 安装和管理