Prototype JS 的 Selector Expressions

學習 CSS 時就不得不認識 selector。

通常書上所提到的 selector, 大多為 Type selector、ID selector、Class selector 及 Pseudo-classes selector; 雖然這已經滿足大多的需求, 不過實務上還是需要其他的 selector 的支援,  而 maxdesign 的 Selectutorial 資訊可以供作參考 。

CSS selector 規則, 其中也包括了 Attribute selector, 在 CSS-Tricks web-site 中簡明扼要說明了一些實用範例。

一般運用時, 除了使用 CSS file 做頁面外觀的處理之外, 仍需要 JavaScript 來進行 DOM element 的動態控制或資料處理。個人會選用 Prototype JS 做為主要的應用工具, 是因為它的 utility methods 使用上很直觀, $$(cssRule...) 提供了一些在 CSS 支援上的說明。

但, 在範例中都只使用了特定 attribute selector 規則, 如果讀者眼尖的話, 在說明的開頭處就已經提到 "cssRule ...", 也就是說: 可以使用多個 attribute selector 規則。方法是使用逗點(,)將每個 attribute selector 隔開即可。

例如: 將畫面上輸入的欄位值串接成 query string:

var reqStr = "";

$$('select[name^="cri_"]', 'input[type~="hidden"]:not([name^="cri_"])').each(
  function(ele) {
    if (typeof ele.name != 'undefined' &&
        typeof $(ele.name).value != 'undefined' &&
        $(ele.name).value != '') {

        reqStr = (reqStr.length > 0 ? reqStr + '&' : '') + ele.name + '=' + $(ele.name).value;
    }
  }
);

JavaScript 的 eval() 使用

試著處理 browser 欄位輸入時與輸入後對 spinner 圖示進行顯示與取消, 在 Prototype JS 的用法為:

Effect.Appear('ele_ID_of_spinner',{duration:0.1, queue:'end'});

以及

Effect.Fade('ele_ID_of_spinner',{duration:0.1, queue:'end'});

此外, 還得為所有欄位/操作項目進行鎖定或取消處理; 必要時還得加上 cursor 的圖示變化。
所以, 模組化的結果為:

function disableAllInput(flag) {
  // 1.cursor 變化
  ...
  // 2.spinner 顯示或取消
  ...
  // 3.所有 input element 的 disabled 屬性值設定
  ...
}

不過, 上述第2段中 spinner 處理上的 API 用法只有一字之差; 因此, 是可以利用 eval() 來進行變化的:

eval("Effect."+(flag ? 'Appear' : 'Fade'))('ele_ID_of_spinner',{duration:0.1, queue:'end'});

模組化或 script code 的精簡情形, 一向是見人見智; 為日後的維護工作, 方法上得小心使用。