生活記事簿: 10月 2015

2015年10月24日星期六

自製jQuery的PlugIn(twinkle演示範例)

JQuery提供外掛(Plug-In)能力，可以讓使用者設計自己所需的功能，跟自己做一個客製化類別(Class)不一樣，外掛就相當於是jQuery物件能夠使用的功能，能夠用selector的方式直接得到jQuery物件然然後使用，就像顯示物件是 $("selector").show();一樣，我們也可以自己寫一個外掛來用，例如$("selector").myPlugInFun();

以下為在寫JQuery的Plug-In時，常使用的其中一種寫法(只是舉例，寫法因人而異)：

(function($){

    //這裡可設制function或變數

    $.fn.extend({

           //這裡可設制function或變數

           myPlugInFun1 : function(options){

                                         //這裡可設制function或變數，跟Java或C很不一樣的是，

                                         //JavaScript的function也算一種Object，所以可以在function裡設

                                         //function屬性

                                         var defaultOptions1 = {

                                               option1 : "option1" ,

                                               option2 : "option2"

                                         };

                                          return this.each(function(){

                                              $.extend(defaultOptions,options);

                                              //..........Do something

                                          });

                                      } ,

           myPlugInFun2 : function(options){

                                            ...以此類推

                                      }

    });

})(jQuery);

下面我們來寫一個簡單的jQuery Plug-In，叫做twinkle()，其作用是讓選取的jQuery物件可以依自訂(當然也可以預設)的次數及間隔時間閃爍，且也可以設定執行完後的callback function及擁有串接的特性，相關的說明註解都在程式碼中，直接看程式碼：

2015年10月13日星期二

在xml中儲存tag類型符號，使用

在XML中，任何Tag型式的東西都會被當成正規的XML結構節點，例如

<message><someText>myText</someText></message>

但是如果我們想要儲存在XML中的內容有Tag型式的東西，但又不希望被XML當成節點呢？例如我們想把一個網頁的html儲起來，內容像這樣：

<html>

<head></head>

<body><p>someText</p></body>

</html>

如果把上述的html直接寫進XML中就會出問題，這時我們需要用<![CDATA[...]]>標籤來告訴XML其包住的內容不要用XML的方式解析，像如下這樣：

<message>

      <someHtml>

      <![CDATA[<html><head></head><body><p>someText</p></body></html>]]>

      </someHtml>

</message>

下面是一些注意事項：

CDATA 區段的內容必須在 XML 內容所允許的字元範圍內；不能用這種方式逸出控制字元和相容性字元。此外，CDATA 區段內不能出現序列 ]]>，因為這個序列會發出區段結束訊號。這意味 CDATA 區段不可以是巢狀。這個序列也出現在部分指令碼中。在指令碼內，通常可使用 ] ]> 替代 ]]>。

from CDATA 區段 [XML 標準]

參考資料：

2015年10月11日星期日

CSS3的動畫

這裡紀錄一下利用CSS做簡單動畫的方法:
在CSS裡，可以利用animation-name屬性來指定動畫，並且利用@keyframes檢設定動畫

下面是一個簡單的例子，設定動畫為一秒，使用myAnim的自訂影格，影格內容分三個時間點(0%，50%和100%)，動畫為左移動：
html:

<div class="animClass">我在移動</div>

css:

.animClass {

      animation-name: myAnim;   

      animation-duration: 1s;     

    

    }



@keyframes myAnim {

  0% {

      padding-left: 100%;

  }

  50% {

      padding-left: 0%;

  }

  100% {

      padding-left: 100%;

  }

}

線上實例演示：
http://jsfiddle.net/rd0zsy78/1/

CSS的動畫使用方法就跟平常使用CSS定義的一樣，用CSS選擇器來為選擇的元素定義動畫，包括了動畫名稱(animation-name)、持續時間(animation-duration)、重覆幾次(animation-iteration-count)等屬性可以設定。

接著就要自已定義對應影片名的關鍵影格，設定不同時間點(用百分比算)的CSS變化。

下面的參考資料就有詳細的各種參數資料可查詢。

參考資料

2015年10月2日星期五

使用SvnAnt來在Ant中以程式化方式執行SVN行為

今天來紀錄一下如何在Ant中使用SvnAnt來執行SVN的行為動作。

首先，要先去下載SvnAnt，選擇合適的版本下載解壓縮後，把lib資料夾裡的jar檔全部丟掉Ant的lib中，把path還境變數設好，就可以開始撰寫操作SVN的Ant程式碼了。

以下就展示一個簡單的範例：
作用為向SVN export資料出來。

build.xml：

<?xml version="1.0" ?>
<project name="test" default="svnTestTask">
        <!-- 參數設置 -->
 <property name="dir" value="D:\testSvnDir" />
 <property name="svn_User" value="USER_NAME" />
 <property name="svn_Password" value="PASSWORD" />
        <property name="svn_url" value="SVN_URL" />

        <!-- 主要的Target -->
 <target name="svnTestTask">
  <delete dir="${dir}" />            
  
  <taskdef name="svn" classname="org.tigris.subversion.svnant.SvnTask" />
  <svn javahl="true" username="${svn_User}" password="${svn_Password}" >
   <export srcUrl="${svn_url}" destPath="${dir}" />
                </svn>
 </target>
</project>

把build.xml放在要執行的資料夾，並且用DOS指令到資料夾中用ant指令即可執行，當然你也可以寫一個bat檔來執行：

test_svnant.bat：

cd d:
ant

在官網中，有蠻詳細的指令使用說明可以參考：
http://subclipse.tigris.org/svnant/svntask.html#update

參考資料：

訂閱：文章 ( Atom )

2015年10月24日 星期六