blog.Ring.idv.tw

iPhone

jQuery Mobile - Adding a swipe to delete button to a listview component

最近試著研究了一下jQuery Mobile,發覺它目前(Beta1)沒有針對listview元件提供Swipe to Delete的效果,還好jQuery Mobile所支援的Touch Event已經包含了Swipe Event,如此~ 雖然官方尚未正式支援該效果,不過我們可以自行手動撰寫出這樣的效果!

下述程式已在iOS和Android行動裝置測試過:

實際測試範例

部分程式

function delItem(e)
{
        $(e).remove();
}
$(function()
{
        $('div').live('pageshow',function(event, ui)
        {
                if ( event.target.id.indexOf('swipedelete') >= 0)
                {
                        $('.aDeleteBtn').remove();
                        $('ul li.t').bind('swipeleft', function(e)
                        {
                                $('.aDeleteBtn').remove();
                        });
                        $('ul li.t').bind('swiperight', function(e)
                        {
                                var $li = $(this);
                                $('.aDeleteBtn').remove();
                                var id = $li.attr('id');
                                var $aDeleteBtn = $("<a href=\'javascript:delItem("+id+")\'>Delete</a>").attr({'class': 'aDeleteBtn ui-btn-up-r'});
                                $li.prepend($aDeleteBtn);
                        });
                }
        });
})

至於Touch-Event有沒有正式規格呢?其實是有的,可以參考W3C - Touch Events Specification,而且iOS 2.0以後早就均支援這些Touch Event(Safari Web Content Guide: Handling Events)

厭倦了針對任一行動平台就需要撰寫特定的程式碼了嗎?如果是的話~ 可以試試jQuery Mobile

參考資源

Adding iPhone style swipe to delete button to a listview component in jQuery Mobile

2011-07-19 15:55:40 | Add Comment

Accelerometer in iPhone

(圖片來源:UIAcceleration Class Reference)

上圖是iPhone所俱備三維空間的加速度感應器,在App Store有許多的小遊戲都是用它來控制的,使用的方法很簡單,不過筆者不太喜歡用Interface Builder來學習iPhone上的開發技巧,所以此範例都是純手工。

主要程式

UIAccelerometer *acc = [UIAccelerometer sharedAccelerometer];
acc.updateInterval = 1.0f/20.0f;
acc.delegate = self;

由於UIAccelerometer class是一個Singleton pattern,所以需要透過「[UIAccelerometer sharedAccelerometer]」的方式來取得,在Java上就是一些「getInstance()」的方法。

這裡需要設置兩個property,它們分別為:updateInterval、delegate

updateInterval:代表加速度感應器更新的頻率。

delegate:用來註冊哪一個class有實作「UIAccelerometerDelegate」Protocol

UIAccelerometerDelegate

- (void)accelerometer:(UIAccelerometer*)accelerometer didAccelerate:(UIAcceleration*)acceleration 
{
	xx.text = [NSString stringWithFormat:@"%f",acceleration.x];
	yy.text = [NSString stringWithFormat:@"%f",acceleration.y];
	zz.text = [NSString stringWithFormat:@"%f",acceleration.z];
}

此範例純粹將X, Y, Z三個軸的值顯示出來。

範例下載

2010-06-18 14:57:02 | Add Comment

Next Posts
Copyright (C) Ching-Shen Chen. All rights reserved.

::: 搜尋 :::

::: 分類 :::

::: Ads :::

::: 最新文章 :::

::: 最新回應 :::

::: 訂閱 :::

Atom feed
Atom Comment