搜尋此網誌

2013年5月9日 星期四

[JQuery] 簡易似jquery BlockUI onOverlayClick 事件

小緋最近功能上的需求，
再一個擬pop div的視窗進行overlay click event

小弟以blockUI demo 製作一個示意圖:

以blockUI Demo 為例，但呈現方式並不像blockUI使用的是同層級的處理，
主要overlay的部份為 parent 視窗，而內容頁面為children頁面

因為父子皆為同層，所以無法直接透過 parent click event 進行處理，因為點選 children 區塊， parent click event 還是會觸發。

所以需要進行區分 overlay 與 content 相異判斷，後來找到了答案，就是 hover，以子層 hover 來決定要不要進行處理，所以最後 code 如下:

$('parent').click(function(){
    if(!$('children').is(':hover')){
        //do something
    }
})

透過這種方式，就可以清楚判定滑鼠點擊的是 overlay 還是 content，那自然可以在裡面加上移除html code 或 hidden 的處理，在使用上就可以類似 unBlockUI處理了。
張貼者： 於 沒有留言:
標籤： ,

2013年5月8日 星期三

[JQuery Masonry] 輕鬆佈置瀑布流

JQuery Masonry : http://masonry.desandro.com/
這是一個可以幫您快速建置瀑布流呈現的套件

以 pinterest 為例

瀑布流佈景可分為佈景主框跟項目

佈置方式就如以下code:
<div id='container'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    ...
</div>

然後載入masonry js套件，使用jquery 1.6 之後的版本

在 item css 設定上需要設定 float 的設定

如:
<style>
.item {
    float: left;
}
</style>

然後於js 呼叫 masonry function

$('#container').masonry({
    itemSelector : '.item' < 項目選擇主要針對你設定的 class name 進行選擇
})

這樣即可製作出瀑布流佈景

如要在已有佈景內加入新項目，可以透過 masonry 的 appended 方法

var $obj = (jquery 物件)
$('#container').append( $obj ).masonry( 'appended', $obj );

如要在已有佈景，重新排版，可以透過 masonry 的 reload 方法

$('#container').masonry('reload')


想知道更詳細的教學可以至 masonry 官網相關資訊




張貼者： 於 沒有留言:
標籤： ,

2012年9月3日 星期一

[HTML] 影音播放處理

Html 影音處理
在 html 裡要嵌入影音播放的功能的話，絕大部分都採用 embed 標籤。
(It is an HTML5 tag, invalid in HTML 4, but works in all browsers)

syntax:
    <embed src="file path"> </embed>

attribute:
  • autostart : ture, false, 1, 0 | 自動播放
  • autoplay : ture, false, 1, 0 | 自動播放
  • loop : ture, false | 循環播放，預設為不循環
  • controller : ture, false | 播放控制器的顯示，預設為顯示
mini type:
Mini Type 主要為定義影片播放要採用那種播放軟體，如果瀏覽器偵測無該播放外掛，就會提醒下載。
  • wma        application/x-mplayer2
  • wmv        application/x-mplayer2
  • wav         audio/x-wav
  • asf          video/x-ms-asf
  • rm          audio/x-pn-realaudio
  • ra           audio/x-pn-realaudio
  • ram        audio/x-pn-realaudio
  • avi          video/x-msvideo
  • mov        video/quicktime
  • mpg        video/mpeg
  • mpeg      video/mpeg
  • mp3        audio/mpeg
  • mid         audio/mid
syntax:
    <embed src="file path" type="mini type"> </embed>

如想知道更詳細內容可以瀏覽以下連結：
限定支援Html5
目前html5 能直接支援的影音格式有 mp3, mp4, webm, ogg

audio
audio tag 為html5支援播放音訊檔案的標籤

syntax:
<audio>
<source src="file path" type="mini type" />
</audio>

audio attribute:
  • controls : 顯示播放控制器，如不顯示就不要添加此屬性
  • autoplay : 自動播放， 如不顯示就不要添加此屬性
  • loop : 循環播放， 如不顯示就不要添加此屬性
  • preload : auto, metadata, none | 預先載入音訊
audio tag 支援多層處理，如果遇到無法載入時，會選擇下一個音訊處理

syntax :
<audio>
<source src="file1" type="type1" />
<source src="file2" type="type2" />
<source src="file3" type="type3" />
錯誤訊息，如果以上檔案都無法支援，則會顯示此錯誤訊息。
</audio>


video
video
videotag 為html5支援播放影音檔案的標籤

syntax:
< video >
<source src="file path" type="mini type" />
</ video >

video attribute:
  • controls : 顯示播放控制器，如不顯示就不要添加此屬性
  • autoplay : 自動播放， 如不顯示就不要添加此屬性
  • loop : 循環播放， 如不顯示就不要添加此屬性
  • preload :  auto, metadata, none | 預先載入影音
  • poster : 給予影片播放前顯示的圖片
  • width : 寬度
  • height : 高度
video tag 支援多層處理，如果遇到無法載入時，會選擇下一個影片處理

syntax :
< video >
<source src="file1" type="type1" />
<source src="file2" type="type2" />
<source src="file3" type="type3" />
錯誤訊息，如果以上檔案都無法支援，則會顯示此錯誤訊息。
</ video >


張貼者： 於 沒有留言:
標籤： ,

2012年7月3日 星期二

Levenshtein Distance(編輯距離算法)

小緋好久沒上來po文了，實在是因為工作太忙了XD

最近在研究比對功能，有找到一個蠻好玩的演算法，

雖然是沒辦法幫助到我，不過還是來分享給大家

這個演算法叫 Levenshtein Distance(編輯距離算法)

是由俄羅斯科學家 Vladimir Levenshtein 在1965年提出這個概念的。

主要算法過程：(以下為轉貼內容)






如果想了解詳細資訊的話，可以參考此連結：






張貼者： 於 沒有留言:
標籤：

2012年5月25日 星期五

[JQuery Editor] - cleditor HTML 編輯器

前陣子小緋剛好有這類的需求，最快的解決方式當然是趕快線上找一個

然後同事有推薦一款，ckeditor，雖然功能齊全，但是有點重就是了

所以後來久在網路上找著找著，發現了這此要講的編輯器 "CLEditor"

它的好處呢：

除了基本功能齊全外、外加它夠輕

安裝上也不會很難唷！

顯示畫面














如何安裝：
官方的範例：


<html>
  <head>
    <link rel="stylesheet" type="text/css" href="jquery.cleditor.css" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.cleditor.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#input").cleditor();
      });
    </script>
  </head>
  <body>
    <textarea id="input" name="input"></textarea>
  </body>
</html>
只要在js中，把textarea_id設定至cleditor，就能搞定了！


參考連結：http://premiumsoftware.net/cleditor/
張貼者： 於 沒有留言:
標籤： , , ,

2012年4月29日 星期日

[Google Guava] ImmutableMap 使用

這是小緋這陣子使用實際使用的套件

 因為這陣子常使用暫存集合，且常用於純屬唯獨的狀況
所以因考量後，決定採用不可變集合

 目前採用的為 ImmutableMap

 ImmutableMap 的實例有兩種方式：
  1. of - 透過 static of() 可以直接實例 ImmutableMap，並有支援 0 ~ 5組(K,V)的實例方法，適用於存放量不多的時候，且比較迅速實例的方法
  2. builder - 預先暫存於 Builder 空間，可透過 builer.put(K,V)方法儲存資料，最後再透過 build()方法實例ImmutableMap
透過 Builder 實例作法：

//宣告 Builder 來儲存集合
ImmutableMap.Builder<K,V> builder = ImmutableMap.builder();

---------------------------------------------------------------------------------
使用 Builder put 儲存想要的資料
builder.put(K,V);

---------------------------------------------------------------------------------
最後透過 Builder build 方法實例 ImmutableMap
ImmutableMap iMap = builder.build();

這樣就可以實例一個 ImmutableMap


張貼者： 於 沒有留言:
標籤： ,

2012年4月17日 星期二

[Google Gson] 從json格式轉型成自定義宣告

這是小緋近幾天來的研究

主要是因為針對資料庫欄位，不適合接受多方的參數命名來定義資料庫欄位
畢竟一家公司就有一個參數命名，那 N 家公司就有 N 個，如果想針對每家都加一個欄位，這是吃力不討好的事情

本來是透過字串切割的方式來處理此事情，後來在友人的建議下更改為使用Json格式，說穿了Json就很類似 Map物件

今天要針對json格式字串轉譯成自定義宣告


1.首先，你要定義一個想寫回的型別

import java.lang.reflect.Type;
import com.google.gson.reflect.TypeToken;

Type type = new TypeToken<自定義型別, Map, List .....>( ) { }.getType( );


2.再來進行寫回動作

import com.google.gson.Gson;

自定義型別 變數 = Gson.fromJson( "Json格式字串" , type);

透過這種方式，就可以將json物件轉型成自己想要的宣告，當然前提格式要剛好能符合，才能成功的轉型

官方範例：
Type listType = new TypeToken>() {}.getType();
List target = new LinkedList();
target.add("blah");

Gson gson = new Gson();
String json = gson.toJson(target, listType);
List target2 = gson.fromJson(json, listType);


參考連結:http://google-gson.googlecode.com/svn/tags/1.2.3/docs/javadocs/com/google/gson/Gson.html


張貼者： 於 沒有留言:
標籤： , ,
訂閱： 文章 (Atom)