小 縮小字型大小。 中 重設字型大小。 大 放大字型大小。

標籤: 網頁設計

jQuery 在表格新增一列

Posted on By 日落 在〈jQuery 在表格新增一列〉中有 6 則留言

學 javascript 沒多久，剛開始只是很簡單的置換文字、為元素加上類別，短短幾行沒什麼感覺。到了開始動態新增表格資料時，javascript 程式碼裡面參雜 HTML 就越看越噁心。

function addRow( data ){
   $('#user-list > tbody ').append(
         '<tr> ' + 
            '<td>' + id + '</td>' +
            '<td>' + username + '</td>' +
            '<td>' + email + '</td>' +
         '</tr>'
      );
}

這樣的寫法除了可讀性很低以外，之後若修改表格結構以及 CSS 樣式時，必須同時修改樣板以及 javascript 內容，不容易維護。

今天翻了翻 jQuery docs，發現幾個方法拿出來用可以把 HTML 和 javascript 切割的頗乾淨。

先定義一列當作表格樣板，可以在 CSS 將這一列隱藏：

<table border="1">
  <tbody>
    <tr id="template" style="display: none;">
      <td class="id some-other-class"> </td>
      <td class="username"> </td>
      <td class="email"> </td>
    </tr>
  </tbody>
</table>

新增一列時，將 template 複製一份出來，再依照 class 名稱將資料填入不同欄位：

function addRow(){
  $('tr:last').after( $('#template').clone().removeAttr('id') );
  $('tr:last > td.id').text( id );
  $('tr:last > td.username').text( username );
  $('tr:last > td.email').text( email );
}

Tags:, ,

Hook on header and footer

Posted on By 日落 在〈Hook on header and footer〉中尚無留言

最近學用 Ajax 處理一些網頁上的事件，javascript 越寫越長，就覺得有必要按照程式碼類別拆成不同檔案，在執行時期決定到底哪些檔案需要匯入。像是管理介面用的 CSS、javascript 就需要在一般頁面當中載入，或是在不需要使用到 Google Maps 時將 javascript API 拿掉。

CodeIgniter 在 controller 與 view 切開後，傳遞資訊只能在 loader 載入時送參數，不過若有多個需要動態載入的資源放在一起，程式寫起來會很麻煩。

// Controller
$data['googleMapAPI'] = true;
$data['jqueryPlugin'] = true;

// View
<?php if( $googleMapAPI == true ): ?>
   <script src=" ..... "></script>
<?php endif; ?>

<?php if( $jqueryPlugin == true ): ?>
   <script src="...."></script>
<?php endif; ?>

這時候想到 WordPress Codex 有個不錯的作法可以參考。Wordpress 為了讓樣板、外掛製作能夠分開、不會互相影響，做出了一個 add_action( ) 的功能，外掛設計師將需要執行的動作「註冊」到系統中，樣板設計師在特定位置呼叫時，系統便會執行已註冊的動作。

// Plugin
<?php
   add_action('wp_head', 'js_include');
   add_action('wp_footer', 'action-on-ready');

   function js-include(){
      echo '<script src="..."></script>';
   }

   function action-on-ready(){
      echo '<script> $('document').ready(); </script> ';
   }
?>

// Template
<html>
<head>
   <titie> .... </title>
   <!-- load script in header -->
   <?php echo wp_head(); ?>
</head>
<body>
   ......
   <!-- load page scripts in footer -->
   <?php wp_footer(); ?>
</body>
</html>

CodeIgniter 有 Hook 類別，不過並沒有 view 的插入點，想試試看能不能把 wordpress add_action( )  功能實作出來。

Tags:,

CSS3 Background Future

Posted on By 日落 在〈CSS3 Background Future〉中尚無留言

在 JaceJu 的噗浪上看到 CSS3 background 新的特性，可以讓瀏覽器控制背景圖片的一些屬性，頗好用的。

CSS3 Backgrounds of the Future
http://www.andismith.com/blog/2012/02/css-backgrounds-of-the-future/

設定背景圖片：

body {
   backgroud: bg.jpg;  /* 1024x768 */
}

以上的設定，當視窗大小如你預期相同時，畫面便會與最初的設計相同，但若視窗較大或較小，都可能會讓畫面走樣。

加上 background-size 屬性，讓瀏覽器決定圖片的大小：

body {
   backgroud: bg.jpg;
   background-size: contain; 
}

修改之後，背景圖片便會依照視窗大小做調整。

Tags:,