Mungkin ada di antara kita pengguna tegar dan penggemar kepada sistem operasi Android. Dan saya sendiri merasakan bahawa reka bentuk yang digunakan pada pelantar Android begitu ringkas dan mudah difahami.

Dalam pembangunan reka bentuk laman, kadang kala kita boleh "mencuri" idea-idea yang digunakan pada aplikasi seperti Android ini. Salah satu rekaan yang menjadi tarikan saya adalah reka bentuk medan teks. Berbeza dengan kebanyakan rekaan sebelum ini.

[title]-[filefield-fid]

Tutorial kali ini adalah untuk kita aplikasikan kesan yang sama pada medan teks (textfield) dalam Drupal.

Asas konsep rekaan

Dalam HTML, tag <input type="text"></input> mampu untuk menerima stail CSS. Jadi kita boleh menggunakan gambar (images) sebagai latar belakang pada medan teks yang mempunyai rekaan garis seperti mangkuk. Namun begitu kelemahannya adalah kita perlu menggunakan saiz yang tetap untuk ke semua elemen textfield.

Dalam kes ini saya mahu saiz medan teks ini boleh dikawal tanpa sebarang kengkangan. Jadi idea penggunaan gambar adalah tidak relevan. Kita lihat pula kepada penggunaan CSS. Pada waktu ini kita hanya mampu untuk mengawal warna, saiz dan corak border untuk sesuatu elemen. CSS3 masih tidak membenarkan kita mengawal kepanjangan atau kelebaran border. Oleh itu penggunaan CSS sahaja tidak cukup.

Bagi mencapai hasrat ini, kita akan menggunakan dua elemen;

  1. elemen <input type="text"></input> yang menerima nilai daripada pengguna
  2. elemen <span></span> yang akan membalut elemen <input></input>

[title]-[filefield-fid]

Elemen <span> bertujuan untuk menghasilkan kesan garisan mangkuk yang membalut elemen <input>. Saiz elemen span akan mengikut saiz input. Dengan cara ini, kita tidak perlu lakukan pengesetan untuk saiz yang tetap.

Modifikasi elemen textfield dalam Drupal

Pertama kita perlu lakukan modifikasi pada elemen <input> agar ianya dirangkum dalam tag span secara global (iaitu keseluruhan laman web). Dengan mengambil kembali kod paparan textfield pada form.inc, kita muatkan ke dalam fail template.php dalam direktori theme kita, contohnya sites/all/themesaya.

function themesaya_textfield($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'text';
  element_set_attributes($element, array('id', 'name', 'value', 'size', 'maxlength'));
  _form_set_class($element, array('form-text'));

  $extra = '';
  if ($element['#autocomplete_path'] && drupal_valid_path($element['#autocomplete_path'])) {
    drupal_add_library('system', 'drupal.autocomplete');
    $element['#attributes']['class'][] = 'form-autocomplete';

    $attributes = array();
    $attributes['type'] = 'hidden';
    $attributes['id'] = $element['#attributes']['id'] . '-autocomplete';
    $attributes['value'] = url($element['#autocomplete_path'], array('absolute' => TRUE));
    $attributes['disabled'] = 'disabled';
    $attributes['class'][] = 'autocomplete';
    $extra = '<input' . drupal_attributes($attributes) . ' />';
  }

  $output = '<span class="android-style"><input' . drupal_attributes($element['#attributes']) . ' /></span>';

  return $output . $extra;
}
'>
  • tukarkan themesaya kepada nama tema anda. Atau gunakan pentaksiran secara global (yang asal) iaitu theme_textfield.
  • <span class="android-style"> ... </span> adalah tambahan kod yang saya lakukan agar semua elemen <input type="text"> dirangkum secara global.

Setelah selesai, simpan fail template.php ini dan jalankan pembersihan cache di Administration Configuration Performance. Buka mana-mana laman yang mempunyai medan teks dan lakukan semakan dengan Firebugs bagi memastikan elemen <span></span> telah disuntik.

[title]-[filefield-fid]

Kod CSS yang diperlukan

Seterusnya masukkan kod-kod CSS di bawah ini pada fail CSS anda.

.android-style {
  border-bottom: 2px solid #127FD2;
  border-left: 2px solid #127FD2;
  border-right: 2px solid #127FD2;
  display: inline-block;
  margin: 20px 0 0;
  max-height: 3px;
  overflow: visible;
  padding: 2px;
  vertical-align: text-bottom;
}
.android-style input {
  background: none repeat scroll 0 0 transparent;
  border: medium none;
  bottom: 20px;
  display: inline-block;
  outline: medium none;
  position: relative;
}

Dua stail dalam CSS ini diperlukan. Anda boleh mengubah nilai-nilai yang ada pada kod ini untuk menyesuaikannya dengan tema yang digunakan. Baris kod yang digunakan pada stail ini diterangkan seperti berikut:

  • warna garisan berbentuk separa mangkuk didefinasikan pada atribut border
  • tag margin dan bottom digunakan untuk meletakkan elemen <input> sebaris dengan <span>
  • atribut max-height: 3px adalah ketinggian mangkuk.
  • atribut padding memberikan jarak antara <input> dan <span> agar tidak terlalu rapat
  • atribut vertical-align: text-bottom memastikan teks-teks lain adalah sebaris dengan elemen ini
  • atribut position: relative membenarkan kita meletakkan tag <input> secara relatif kepada tag <span> agar kedudukannya dapat kita kawal berdasarkan kepada margin di atas
  • atribut display: inline-block digunakan supaya kedua-dua elemen ini disusun pada satu baris. Jika tidak setiap elemen akan disusun pada baris berasingan.

Setelah selesai, simpan fail CSS anda dan cuba Refresh mana-mana laman yang mempunyai elemen borang medan teks. Hasil yang anda perolehi mungkin sedikit berlainan disebabkan perkara berikut:

  1. terdapat elemen stail pada medan teks atau <input> yang didefinasikan sebelum ini. Cuba padamkan semua stail ini atau lakukan total overriding dengan meletakkan tag !important pada setiap atribut CSS
  2. ubah suai nilai pada atribut margin dan bottom

Hasil yang diperoleh di akhir tutorial ini adalah seperti ini:

[title]-[filefield-fid]

Penilaian: 
3
Average: 3 (2 votes)