RSS
 

Posts Tagged ‘Javascript’

jQuery 筆記 – 同步兩個 option buttons 的值

25 Feb

情境 :
在一連串 table 的網頁介面. 如果把 option button 部分設計在最下方. 那當table資料很多的時候就要一直捲動捲到最下方. 小不方便. 所以還要在多設計一個 option button 在網頁的最上方. 但是在同一個 form 如果裡面變數名稱命名不一樣的名稱到 option button 上. 那代表要在 php 裡面去處理那個兩個變數名稱. 也要處理使用者是按了上面的 action button 還是下面的 action button. 看起來有點麻煩.

解法 :
為了簡化這個問題, 我使用 jquery 幫忙同步兩個option buttons 的值. 下列是html部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<form method="POST" action="#">
      <h3>Available actions
      <select id="paction" name="paction">
        <option value="on">Power On</option>
 
        <option value="off">Power Off</option>
        <option value="soft">Graceful Shutdown</option>
        <option value="reset">Reset System (warm boot)</option>
        <option value="cycle">Power Cycle System (cold boot)</option>
      </select>
      <input type="submit" name="submit" value="Perform action"></h3>
omit......
      <h3>Available actions
      <select id="paction2" name="paction">
        <option value="on">Power On</option>
 
        <option value="off">Power Off</option>
        <option value="soft">Graceful Shutdown</option>
        <option value="reset">Reset System (warm boot)</option>
        <option value="cycle">Power Cycle System (cold boot)</option>
      </select>
      <input type="submit" name="submit" value="Perform action"></h3>
</form>

命名了兩個 option buttons 的 id 名稱. 但那兩個 option button 的 name 是一樣的. 然後再使用下列 jquery 語法. 就可以將這兩個不同的 option buttons 同步.

1
2
3
4
5
6
7

    $("#paction").change(function() {
        $("#paction2").val($("#paction").val());
    });
 
    $("#paction2").change(function() {
        $("#paction").val($("#paction2").val());
    });

其實只要把下面的值同步成真正要處理的值就可以了. 因為網頁 submit 後. 同名稱變數(paction)的話是看最後一個值. 但是為了要求完美. 所以我在把下面的 option button 同步回去第一個 option button

最後看一下 DEMO

 
No Comments

Posted in Javascript, Programming

 

jQuery 筆記 – 找出每個特定字串開頭的div進行處理

24 Feb

情境 :
我想列出一連串 servers 開關機狀態. 還有電流大小. 當然我可以直接顯示在網頁上. 但是顯示那樣的網頁可能會花 15~20秒才有辦法把每一台 servers 的狀態讀回來. 在等待的過程.網頁是白色的畫面. 這樣看起來好像網頁當掉了. 所以想說先把html table layout 顯示出來. 在透過 jquery 顯示後面比較花時間的資料. 所以必須要針對不同的 servers 進行狀態查詢. 這樣的顯示方式看起來比較不像是當掉. XD

解法 :
假設我有下列 html 然後想針對每個 foo_ 開頭的 div 進行處理.

1
2
3
4
5

<div id="foo_1"></div>
<div id="foo_2"></div>
<div id="foo_3"></div>
<div id="foo_4"></div>
<div id="foo_5"></div>

當然可以先用 php 把個別的變數輸出到 javascrpit 內的某個變數. 然後再個別去處理. 但是這樣太肉腳了.所以用下列 jquery 方式處理.

1
2
3

    $("div[id^='foo_']").each(function() {
      $(this).text("我的div名稱是 " + $(this).attr('id') + ".");
    });

這樣就會列出下列結果

我的div名稱是 foo_1.
我的div名稱是 foo_2.
我的div名稱是 foo_3.
我的div名稱是 foo_4.
我的div名稱是 foo_5.

這樣你應該有感覺了吧? 再來就可以在 function 內處理..看是要針對 1 2 3 4 5 不同的名稱給予不同的處理. 例如用 .post 去取得不同的值顯示. servers 的狀態.

 
No Comments

Posted in Javascript, Programming

 

html5 video tag 簡單示範

11 Nov

再說明 html5 video tag 之前要先了解一下哪些瀏覽器有支援html5 tag及播放格式.

紅色代表不支援. 綠色代表支援. 圖表來源 : “When can I use…”

目前而言 safari 5 和 ie 不支援 Ogg/Theora/Vorbis 格式. opera 10.6 和 firefox 3.6 不支援 MPEG-4/H.264/AAC 格式. chrome 兩者都支援.

所以對網頁設計者來說多種瀏覽器支援與不支援是很擾民. 如果用以前的觀念去寫的確很麻煩如下 :

1
2
3
4
5
6
7
8
9

<video id="theVideo" src="http://liho.tw/movie_file.ogg"  width="480" height="320" controls="controls">
Your browser does not support the video tag.
</video>
 
<script type="text/javascript">
if (navigator.appVersion.indexOf("Safari") != -1) {
    document.getElementById('theVideo').src="http://liho.tw/movie_file.mov";
}
</script>

上列範例, 只要遇到 瀏覽器有 “Safari” 字眼. 就使用mp4格式播放. 因為 ogg safari 不支援. 不過上面的示範是比較不妥當的示範.

請看一下 html5 比較正規的寫法

1
2
3
4
5

<video width="480" height="320" controls="controls">
    <source src="http://liho.tw/movie_file.ogg" type="video/ogg" />
    <source src="http://liho.tw/movie_file.mov" type="video/mp4" />
Your browser does not support the video tag.
</video>

這樣瀏覽器就會找到適當的檔案播放. 也不用去判斷使用者使用怎樣的瀏覽器. 省了很多瑣碎的時間.

 
No Comments

Posted in Programming

 

My fone – 台灣大哥大節費程式測試

29 Mar


程式名稱為My fone


載入畫面


操作畫面.

請台灣大哥大的朋友幫忙到 http://liho.tw/fone/測試.
我認為應該有很多錯誤. 因為我不熟台灣大哥大的規則.
如果您知道有計算上的錯誤請您告訴我.謝謝.

有點小累, 先這樣.晚點再補齊.

 
No Comments

Posted in Javascript, Macintosh, Programming

 

如何在 Dashcode 使用 jQuery?

11 Jun

HOWTO use jQuery in Dashcode?

在main.html內需要引入jquery-x.x.x.min.js檔案. 我是把jquery 當按放在 scripts 目錄內.所以main.html程式如下 :

1

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js" charset="utf-8"></script>

然後假設你在front panel裡面有個somebutton的按鈕. 按了一下之後使用 jquery 處理那個事件, 在 main.js 的程式碼如下(寫在檔案最後面) :

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
    $("#somebutton").click(function(){
        $.get("http://www.samtseng.liho.tw/~samtz/blog/",
        function(txt){
            // processing txt;
            // 在這裡處理 jQuery get 回來的結果 (txt).
        });
    });
});

大致上這應就可以在 Dashcode 裡面使用 jQuery. :)

 
No Comments

Posted in Javascript, Macintosh

 

用 jQuery 控制 button 的 enabled/disabled demo

03 Jun

程式目的 : 當使用者了按 checkbox 後, 才讓 delete button 啟用. 當使用者取消 checkbox 後, 將 delete button 停用.

html 程式碼如下 :

1
2
3
4
5
6
7

(omit)...
<input type="submit" id="delete" name="action" value="Delete users" disabled>
(omit)...
<input type="checkbox" name="uid[]" value="samtseng" onclick="enableAction();">
(omit)...
<input type="checkbox" name="uid[]" value="harrytseng" onclick="enableAction();">
(omit)...

用 jQuery 檢查每個 checkbox 是否被選取. 然後設定 button enabled/disabled. :)
javascript 程式碼如下 :

1
2
3
4
5
6
7
8
9
10
11
12
13

  function enableAction() {
    flag = false;
    $("input[type=checkbox][checked]").each(
      function() {
        flag = true;
      }
    );
    if (flag) {
      $("#delete").attr("disabled", false);
    } else {
      $("#delete").attr("disabled", true);
    }
  } // end function enableAction()

按這裡看DEMO.

 
No Comments

Posted in Javascript, Programming

 

jQuery flickr demo

12 May

這個demo是使用 jQuery 呼叫 flickr api 顯示有關 貓 的 tags.

jQuery 程式部份如下 :

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
  $(document).ready(function() {
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
    function(data){
      $.each(data.items, function(i,item){
        $("<img/>").attr("src", item.media.m).attr("border", 0).appendTo("#images") 
         .wrap("<a href='" + item.link + "'></a>");
        // if ( i == 3 ) return false;
      });
    });
  });
</script>

cssl 部份如下 :

1
2
3
4
5
6

<style type="text/css">
img {
    height: 200px;
    float: left;
}
</style>

html 部份如下 :

1

<div id="images"></div>

請看 DEMO

 
1 Comment

Posted in Javascript

 

jQuery POST 練習 – 簡單範例

07 May

這個主要是練習使用 jQuery 做 ajax POST 的動作.然後把結果塞回網頁上面.

先簡單寫個 helloworld 的 php. 限定它只接收 POST method.

1
2
3
4
5
6
7

<?
if (isset($_POST["name"])) {
    echo “aloha “.$_POST["name"];
} else {
    echo “get out!”;
}
?>

在html內弄個區塊顯示回傳值:

1

<div class=”message”></div>

jQuery 部份只要寫下面給行 codes就可以達成 :

1
2
3
4
5
6
7
8
9

<script type=”text/javascript”>
    $(document).ready(function() {
        $.post(’helloworld.php’,{
            name: “sam”
        }, function(txt){
            $(’div.message’).html(txt);
        });
    });
</script>

這樣就完成了簡單的 jQuery 使用 ajax 呼叫POST method. 看一下 DEMO

 
No Comments

Posted in Javascript, php

 

使用 jQuery 粉飾 table

06 May

直接看 DEMO.

我是直接使用 Google 的 jQuery.

1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

然後你要定義 table 的 css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<style type="text/css">
    body {
        background: #ffffff;
    }
    table {
        border-collapse: collapse;
        width: 70%;
        font: 12px Verdana, Arial, Helvetica, sans-serif;
        text-align: center;
    }
    th {
        background: #3e83c9;
        color: #ffffff;
        font-weight: bold;
        padding: 2px 11px;
        border-right: 1px solid #ffffff;
    }
    td {
        padding: 6px 11px;
        border-bottom: 1px solid #95bce2;
        vertical-align: top;
    }
    td * {
        padding: 6px 11px;
    }
    tr.alt td {
        background: #ecf6fc;
    }
    tr.over td {
        background: #bcd4ec;
    }
</style>

設定 table 的一些屬性 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<table class="listview" border="0" align="center">
  <thead>
    <tr>
      <th>Name</th>
      <th>Height</th>
      <th>Weight</th>
      <th>Vegetarian</th>
      <th>Taiwanese</th>
      <th>English</th>
      <th>Japanese</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="22%">Sam</td>
      <td width="13%">183 cm</td>
      <td width="13%">82 kg</td>
      <td width="13%">V</td>
      <td width="13%">V</td>
      <td width="13%">V</td>
      <td width="13%">V</td>
    </tr>
  </tbody>
<table>

在用 jquery 加入 css 設定 :

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
  $(document).ready(function() {
    $(".listview tr").mouseover(function() {
        $(this).addClass("over");
      }).mouseout(function() {
        $(this).removeClass("over");
      });
    $(".listview tr:even").addClass("alt");
  });
</script>
 
No Comments

Posted in Javascript

 

javascript 螢幕解析度偵測 – Screen Resolution Detection

25 Mar

用 screen.width 還有 screen.height 可以知道使用者螢幕的解析度. 在 javascript 內可以判別不同解析度導入不同頁面.

1
2
3
4
5

if ((screen.width >= 1024) && (screen.height >= 768)) {
    alert("High Resolution");
} else {
    alert("Low Resolution");
}
 
No Comments

Posted in Javascript

 
« Older Entries