വിവരണം

ഒരു ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റിൻ്റെ രൂപത്തിൽ ഒരു ഇൻ്റർഫേസ് ഘടകം സൃഷ്ടിക്കാൻ ടാഗ് നിങ്ങളെ അനുവദിക്കുന്നു, അതുപോലെ താഴെ കാണിച്ചിരിക്കുന്നതുപോലെ ഒറ്റ അല്ലെങ്കിൽ ഒന്നിലധികം സെലക്ഷൻ ഉള്ള ഒരു ലിസ്റ്റ്. അന്തിമ രൂപം ടാഗിൻ്റെ വലുപ്പ ആട്രിബ്യൂട്ടിൻ്റെ ഉപയോഗത്തെ ആശ്രയിച്ചിരിക്കുന്നു, അത് പട്ടികയുടെ ഉയരം സജ്ജമാക്കുന്നു.

ടാഗിൽ വ്യക്തമാക്കിയിട്ടുള്ള ഏറ്റവും വിശാലമായ ടെക്‌സ്‌റ്റ് അനുസരിച്ചാണ് ലിസ്റ്റിൻ്റെ വീതി നിർണ്ണയിക്കുന്നത്, കൂടാതെ ശൈലികൾ ഉപയോഗിച്ച് മാറ്റാനും കഴിയും. ഓരോ ഇനവും ഒരു ടാഗ് ഉപയോഗിച്ചാണ് സൃഷ്ടിച്ചിരിക്കുന്നത്, അത് ഒരു കണ്ടെയ്നറിൽ നെസ്റ്റ് ചെയ്യണം. സെർവറിലേക്ക് ലിസ്റ്റ് ഡാറ്റ അയയ്ക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഫോമിനുള്ളിൽ നിങ്ങൾ ഘടകം സ്ഥാപിക്കേണ്ടതുണ്ട്. ലിസ്റ്റ് ഡാറ്റ സ്ക്രിപ്റ്റുകളിലൂടെ ആക്സസ് ചെയ്യുമ്പോൾ ഇത് ആവശ്യമാണ്.

വാക്യഘടന ഇനം 1 ഇനം 2 ആട്രിബ്യൂട്ടുകൾ ചില കീബോർഡ് കുറുക്കുവഴി ഉപയോഗിച്ച് ഒരു ലിസ്റ്റിലേക്ക് പോകാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

പേജ് ലോഡ് ചെയ്‌തതിന് ശേഷം ഫോക്കസ് ലഭിക്കുന്നതിന് ലിസ്റ്റ് സജ്ജമാക്കുന്നു.

ഒരു മൂലകത്തിൻ്റെ പ്രവേശനവും പരിഷ്‌ക്കരണവും തടയുന്നു.

ഒരു ഫോമുമായി ഒരു ലിസ്റ്റ് ബന്ധപ്പെടുത്തുന്നു.

ഒരേസമയം ഒന്നിലധികം ലിസ്റ്റ് ഇനങ്ങൾ തിരഞ്ഞെടുക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

സെർവറിലേക്ക് അയയ്‌ക്കേണ്ട അല്ലെങ്കിൽ സ്‌ക്രിപ്‌റ്റുകളിലൂടെ ആക്‌സസ് ചെയ്യേണ്ട ഘടകത്തിൻ്റെ പേര്.

• ഫോം സമർപ്പിക്കുന്നതിന് മുമ്പ് ലിസ്റ്റ് തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്.
  • പ്രദർശിപ്പിക്കേണ്ട ലിസ്റ്റ് ലൈനുകളുടെ എണ്ണം.
    • ടാബ് കീ അമർത്തുമ്പോൾ ഘടകങ്ങൾ തമ്മിലുള്ള പരിവർത്തനത്തിൻ്റെ ക്രമം നിർവചിക്കുന്നു
    • ആവശ്യമാണ്.
    • HTML5 IE Cr Op Sa Fx
  • ടാഗ് തിരഞ്ഞെടുക്കുക
  • ഒരു ഹീറോ ചെബുരാഷ്ക മുതലയെ ജെന ഷാപോക്ലിയാക് റാറ്റ് ലാരിസ തിരഞ്ഞെടുക്കുക

എച്ച്ടിഎംഎൽ ലിസ്റ്റുകളുടെ ട്രീ വ്യൂ, അവയുടെ ശ്രേണിപരമായ ഘടന ദൃശ്യപരമായി അവലോകനം ചെയ്യുന്നതിനും പഠിക്കുന്നതിനുമുള്ള മികച്ച മാർഗമാണ്. CSS ശൈലികളുടെ മാന്ത്രികത ഉപയോഗിച്ച് കൂടുതൽ വിഷ്വൽ ട്രീ പോലുള്ള അവസ്ഥയിലേക്ക് ഒരു സാധാരണ HTML ലിസ്റ്റിൻ്റെ നിരവധി പരിവർത്തനങ്ങൾ നോക്കാം.

• ഫോം സമർപ്പിക്കുന്നതിന് മുമ്പ് ലിസ്റ്റ് തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്.
  • പ്രദർശിപ്പിക്കേണ്ട ലിസ്റ്റ് ലൈനുകളുടെ എണ്ണം.
    • ടാബ് കീ അമർത്തുമ്പോൾ ഘടകങ്ങൾ തമ്മിലുള്ള പരിവർത്തനത്തിൻ്റെ ക്രമം നിർവചിക്കുന്നു
    • ആവശ്യമാണ്.
    • HTML5 IE Cr Op Sa Fx
  • ടാഗ് തിരഞ്ഞെടുക്കുക
  • ഒരു ഹീറോ ചെബുരാഷ്ക മുതലയെ ജെന ഷാപോക്ലിയാക് റാറ്റ് ലാരിസ തിരഞ്ഞെടുക്കുക

1. ഒരു സാധാരണ HTML ലിസ്റ്റിൻ്റെ ഉദാഹരണം

പ്രധാന മെനു

വിജ്ഞാന അടിത്തറ
• ഫോം സമർപ്പിക്കുന്നതിന് മുമ്പ് ലിസ്റ്റ് തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്.
  • പ്രദർശിപ്പിക്കേണ്ട ലിസ്റ്റ് ലൈനുകളുടെ എണ്ണം.
    • ടാബ് കീ അമർത്തുമ്പോൾ ഘടകങ്ങൾ തമ്മിലുള്ള പരിവർത്തനത്തിൻ്റെ ക്രമം നിർവചിക്കുന്നു
    • ആവശ്യമാണ്.
    • HTML5 IE Cr Op Sa Fx
  • ടാഗ് തിരഞ്ഞെടുക്കുക
  • ഒരു ഹീറോ ചെബുരാഷ്ക മുതലയെ ജെന ഷാപോക്ലിയാക് റാറ്റ് ലാരിസ തിരഞ്ഞെടുക്കുക
ഘടകങ്ങൾ
പ്ലഗിനുകൾ
• ഫോം സമർപ്പിക്കുന്നതിന് മുമ്പ് ലിസ്റ്റ് തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്.
  • പ്രദർശിപ്പിക്കേണ്ട ലിസ്റ്റ് ലൈനുകളുടെ എണ്ണം.
    • ടാബ് കീ അമർത്തുമ്പോൾ ഘടകങ്ങൾ തമ്മിലുള്ള പരിവർത്തനത്തിൻ്റെ ക്രമം നിർവചിക്കുന്നു
    • ആവശ്യമാണ്.
    • HTML5 IE Cr Op Sa Fx
  • ടാഗ് തിരഞ്ഞെടുക്കുക
  • ഒരു ഹീറോ ചെബുരാഷ്ക മുതലയെ ജെന ഷാപോക്ലിയാക് റാറ്റ് ലാരിസ തിരഞ്ഞെടുക്കുക
ബന്ധിപ്പിക്കുന്ന ലൈനുകളുള്ള CSS ലിസ്റ്റ് ശൈലികൾ .treeline, .treeline ul, .treeline li (മാർജിൻ: 0; പാഡിംഗ്: 0; ലൈൻ-ഹൈറ്റ്: 1.2; ലിസ്റ്റ്-സ്റ്റൈൽ: ഒന്നുമില്ല; ) .treeline ul (മാർജിൻ: 0 0 0 15px; / * വെർട്ടിക്കൽ ലൈൻ പാഡിംഗ് */) .treeline > li:not(:only-child), .treeline li li (സ്ഥാനം: ബന്ധു; പാഡിംഗ്: 3px 0 0 20px; /* ടെക്സ്റ്റ് പാഡിംഗ് */ ) /* ലംബ ലൈൻ ശൈലി */ .treeline li:not(:last-child) ( border-left: 1px solid #ccc;) /* തിരശ്ചീന ലൈൻ ശൈലികൾ*/ .treeline li li: മുമ്പ്, .treeline > li:not(:only-child):before (ഉള്ളടക്കം: ""; സ്ഥാനം: കേവലം; മുകളിൽ: 0; ഇടത്: 0; വീതി: 1.1എം; ഉയരം: .7എം; ബോർഡർ-ബോട്ടം: 1px സോളിഡ് #ccc; ) /* ലിസ്റ്റിലെ അവസാന ഇനത്തിൻ്റെ ലംബ രേഖ * / .treeline li:last-child:before ( width: calc(1.1em - 1px); border-left: 1px solid #ccc; ) 3. HTML ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് ഉദാഹരണം
• ഫോം സമർപ്പിക്കുന്നതിന് മുമ്പ് ലിസ്റ്റ് തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്.
  • പ്രദർശിപ്പിക്കേണ്ട ലിസ്റ്റ് ലൈനുകളുടെ എണ്ണം.
    • ടാബ് കീ അമർത്തുമ്പോൾ ഘടകങ്ങൾ തമ്മിലുള്ള പരിവർത്തനത്തിൻ്റെ ക്രമം നിർവചിക്കുന്നു
    • ആവശ്യമാണ്.
    • HTML5 IE Cr Op Sa Fx
  • ടാഗ് തിരഞ്ഞെടുക്കുക
  • ഒരു ഹീറോ ചെബുരാഷ്ക മുതലയെ ജെന ഷാപോക്ലിയാക് റാറ്റ് ലാരിസ തിരഞ്ഞെടുക്കുക
HTML ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് മാർക്ക്അപ്പ്

ഒരു ട്രീ ലിസ്റ്റിൻ്റെ ഘടകങ്ങൾ വികസിപ്പിക്കുന്നതിനുള്ള പ്രവർത്തനം നടപ്പിലാക്കുന്നതിനായി ഞങ്ങൾ മുമ്പത്തെ മാർക്ക്അപ്പിലേക്ക് + ചേർക്കുന്നു.

• ഫോം സമർപ്പിക്കുന്നതിന് മുമ്പ് ലിസ്റ്റ് തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്.
  • +വിജ്ഞാന അടിത്തറ /* ലിസ്റ്റ് വിപുലീകരണ ബ്ലോക്ക് */
    • ടാബ് കീ അമർത്തുമ്പോൾ ഘടകങ്ങൾ തമ്മിലുള്ള പരിവർത്തനത്തിൻ്റെ ക്രമം നിർവചിക്കുന്നു
    • ആവശ്യമാണ്.
    • HTML5 IE Cr Op Sa Fx
  • ടാഗ് തിരഞ്ഞെടുക്കുക
  • ഒരു ഹീറോ ചെബുരാഷ്ക മുതലയെ ജെന ഷാപോക്ലിയാക് റാറ്റ് ലാരിസ തിരഞ്ഞെടുക്കുക
ഡ്രോപ്പ്ഡൗൺ CSS ശൈലികൾ

മുമ്പത്തെ ഉദാഹരണത്തിൽ നിന്ന് ഇനിപ്പറയുന്ന ശൈലികൾ CSS-ലേക്ക് ചേർക്കണം:

Treeline .drop (സ്ഥാനം: കേവലം; ഇടത്: -6px; മുകളിൽ: 5px; വീതി: 11px; ഉയരം: 11px; ലൈൻ-ഉയരം: 1em; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം; പശ്ചാത്തലം: #9F9F9F; നിറം: #fff; /* പശ്ചാത്തലം കൂടാതെ ലിസ്റ്റ് തുറക്കുന്ന ബട്ടണിൻ്റെ നിറം */ font-size: 78%; ട്രീലൈൻ ലി: ലാസ്റ്റ്-ചൈൽഡ് > .ഡ്രോപ്പ് (മാർജിൻ-ഇടത്: 1px;) .ട്രീലൈൻ .ഡ്രോപ്പ് + ul (ഡിസ്‌പ്ലേ: ഒന്നുമില്ല;) .ട്രീലൈൻ .dropM + ul (ഡിസ്‌പ്ലേ: ബ്ലോക്ക്;)

സ്ക്രിപ്റ്റ് നടപ്പിലാക്കുന്ന ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് ഫംഗ്‌ഷൻ

HTML, CSS എന്നിവയ്‌ക്ക് പുറമേ, ട്രീ ലിസ്റ്റുകൾ രൂപകൽപ്പന ചെയ്യുന്നതിനുള്ള ഈ രീതിക്ക് JS-ൻ്റെ ഉപയോഗം ആവശ്യമാണ്:

$(function() (var ul = document.querySelectorAll(".treeline > li:not(:only-child) ul, .treeline ul ul"); (var i = 0; i< ul.length; i++) { var div = document.createElement("div"); div.className = "drop"; div.innerHTML = "+"; ul[i].parentNode.insertBefore(div, ul[i].previousSibling); div.onclick = function() { this.innerHTML = (this.innerHTML == "+" ? "−" : "+"); this.className = (this.className == "drop" ? "drop dropM" : "drop"); } } })();

സോഴ്സ് കോഡ് വ്യൂ മോഡിലേക്ക് പോയി മെറ്റീരിയലിൻ്റെ അവസാനം ഈ JS കോഡ് ചേർക്കാവുന്നതാണ്. സ്ക്രിപ്റ്റ് കോഡ് എഡിറ്റർ കട്ട് ചെയ്തേക്കാം, അതിനാൽ പ്രവർത്തിക്കില്ല. ഈ സാഹചര്യത്തിൽ, എഡിറ്റർ ക്രമീകരണങ്ങളിലേക്ക് പോയി ടാഗ് ഉപയോഗിക്കാൻ അനുവദിക്കുക.

4. വെർട്ടിക്കൽ ട്രീ ലിസ്റ്റിൻ്റെ ഉദാഹരണം
• ഫോം സമർപ്പിക്കുന്നതിന് മുമ്പ് ലിസ്റ്റ് തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്.
  • പ്രദർശിപ്പിക്കേണ്ട ലിസ്റ്റ് ലൈനുകളുടെ എണ്ണം.
    • ടാബ് കീ അമർത്തുമ്പോൾ ഘടകങ്ങൾ തമ്മിലുള്ള പരിവർത്തനത്തിൻ്റെ ക്രമം നിർവചിക്കുന്നു
    • ആവശ്യമാണ്.
    • HTML5 IE Cr Op Sa Fx
  • ടാഗ് തിരഞ്ഞെടുക്കുക
  • ഒരു ഹീറോ ചെബുരാഷ്ക മുതലയെ ജെന ഷാപോക്ലിയാക് റാറ്റ് ലാരിസ തിരഞ്ഞെടുക്കുക
ഒരു വെർട്ടിക്കൽ ട്രീ ലിസ്റ്റിനുള്ള HTML മാർക്ക്അപ്പ്
/* ട്രീവെർട്ടിക്കൽ ക്ലാസ് അസൈൻ ചെയ്യുക */
• ഫോം സമർപ്പിക്കുന്നതിന് മുമ്പ് ലിസ്റ്റ് തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്.
  • പ്രദർശിപ്പിക്കേണ്ട ലിസ്റ്റ് ലൈനുകളുടെ എണ്ണം.
    • ടാബ് കീ അമർത്തുമ്പോൾ ഘടകങ്ങൾ തമ്മിലുള്ള പരിവർത്തനത്തിൻ്റെ ക്രമം നിർവചിക്കുന്നു
    • ആവശ്യമാണ്.
    • HTML5 IE Cr Op Sa Fx
  • ടാഗ് തിരഞ്ഞെടുക്കുക
  • ഒരു ഹീറോ ചെബുരാഷ്ക മുതലയെ ജെന ഷാപോക്ലിയാക് റാറ്റ് ലാരിസ തിരഞ്ഞെടുക്കുക
വെർട്ടിക്കൽ ട്രീ ലിസ്‌റ്റിനായുള്ള CSS ശൈലികൾ .treevertical, .treevertical ul (സ്ഥാനം: ബന്ധു; ഡിസ്‌പ്ലേ: ടേബിൾ; മാർജിൻ: 5px 0 0 0 !പ്രധാനം; പാഡിംഗ്: 6px 0 0 0 !പ്രധാനം; ലൈൻ-ഉയരം: സാധാരണ; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം ; വേഡ്-റാപ്പ്: ബ്രേക്ക്-വേഡ്; ) (പാഡിംഗ്: 0 .5em;).treevertical li:last-child (padding-right: 0;).treevertical li:first-child (padding-left: 0;) /* ലൈൻ ശൈലികൾ */ .treevertical ul:before , .treevertical ul li: മുമ്പ്, .treevertical ul li: after (ഉള്ളടക്കം: ""; സ്ഥാനം: കേവലം; മുകളിൽ: -5px; ഇടത്: 0; വീതി: 50%; ഉയരം: 5px; അതിർത്തി-വലത്: 1px സോളിഡ് #999 ; ) :ആദ്യ കുട്ടി:മുമ്പ് (വലത്: 0; ഇടത്: ഓട്ടോ; അതിർത്തി-ഇടത്: 1px സോളിഡ് #999; അതിർത്തി-വലത്: ഒന്നുമില്ല;) .treevertical ul li:not(:only-child):first-child:before , .treevertical ul li:not(:only-child):last-child:before ( width: calc(50% + .5em/2); ) .treevertical ul li:after (border: none;) .treevertical ul li:not(:last-child):not(:first-child):after ( width: 100%; border-top: 1px solid #999; )

എച്ച്ടിഎംഎൽ ഓപ്‌ഷൻ ടാഗ് ഒരു ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് സൃഷ്‌ടിക്കുന്നതിന് ഉപയോഗിക്കുന്നു, അത് ഒരു മുൻനിശ്ചയിച്ച മൂല്യങ്ങളിൽ നിന്ന് ഒരു ഓപ്ഷൻ തിരഞ്ഞെടുക്കാൻ ഉപയോക്താവിനെ അനുവദിക്കുന്നു.

ഉപയോക്താവിന് ദൃശ്യമാകുന്ന വാചകം മൂല്യ ആട്രിബ്യൂട്ടിൽ വ്യക്തമാക്കിയ വാചകത്തിൽ നിന്ന് വ്യത്യസ്തമായിരിക്കാം. ഒരു ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് സൃഷ്ടിക്കുന്നത് എങ്ങനെയെന്നത് ഇതാ:

പച്ച മഞ്ഞ കറുപ്പ്

• ടാഗ് ഉപയോഗിച്ച് ഒരു ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് സൃഷ്ടിച്ചു.
• ടാഗിനുള്ളിൽ, ടാഗ് ഉപയോഗിച്ച് തിരഞ്ഞെടുക്കുന്നതിനുള്ള ഓപ്ഷനുകൾ നിർവചിച്ചിരിക്കുന്നു;
• PHP, JS, jquery മുതലായവ ഉപയോഗിച്ച് തിരഞ്ഞെടുത്ത ഓപ്‌ഷൻ ആക്‌സസ് ചെയ്യാൻ നിങ്ങൾക്ക് ഒരു ടാഗിലെ മൂല്യ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാം.

ഡ്രോപ്പ്‌ഡൗൺ ലിസ്‌റ്റ് സ്‌റ്റൈൽ ചെയ്യുന്നതിന് ഒരു ഐഡി ഉപയോഗിക്കുന്നതിന് പകരം ഒരു CSS ക്ലാസ് വ്യക്തമാക്കുന്നതും സാധ്യമാണ്.

അടുത്ത വിഭാഗത്തിൽ, JavaScript/JQuery-ൽ HTML ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് ഉപയോഗിക്കുന്നതിൻ്റെ ഉദാഹരണങ്ങൾ ഞാൻ കാണിക്കും. CSS/CSS3, ബൂട്ട്‌സ്‌ട്രാപ്പ് ചട്ടക്കൂട് എന്നിവ ഉപയോഗിച്ച് എങ്ങനെ സ്റ്റൈൽ ചെയ്യാമെന്നും ഉദാഹരണങ്ങൾ നിങ്ങളെ കാണിക്കും.

ഒരു ലളിതമായ ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് സൃഷ്ടിക്കുന്നതിനുള്ള ഉദാഹരണം

തിരഞ്ഞെടുക്കാൻ മൂന്ന് ഓപ്‌ഷനുകളുള്ള ഒരു ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് സൃഷ്‌ടിക്കാൻ ഈ ഉദാഹരണം HTML സെലക്ട് ഓപ്‌ഷൻ ഉപയോഗിക്കുന്നു:




മുകളിലുള്ള ഉദാഹരണം ഒരു ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് സൃഷ്ടിക്കാൻ ഇനിപ്പറയുന്ന മാർക്ക്അപ്പ് ഉപയോഗിക്കുന്നു:

5 10 15 20 25

മൂല്യ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു

നേരത്തെ സൂചിപ്പിച്ചതുപോലെ, മൂല്യ ആട്രിബ്യൂട്ടിൻ്റെ മൂല്യം പേജിൽ പ്രദർശിപ്പിച്ചിരിക്കുന്ന വാചകത്തിൽ നിന്ന് വ്യത്യസ്തമായിരിക്കാം. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഉപയോക്താക്കൾക്കായി രാജ്യങ്ങളുടെ പേരുകളോ നിറങ്ങളോ പ്രദർശിപ്പിക്കാനും മൂല്യ ആട്രിബ്യൂട്ടിൽ ഷോർട്ട്‌കോഡുകൾ ഉപയോഗിക്കാനും കഴിയും.

ഇനിപ്പറയുന്ന ഉദാഹരണത്തിൽ, മൂല്യ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ഞങ്ങൾ ഒരു ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് സൃഷ്ടിക്കും:


ഓൺലൈൻ ഡെമോയും കോഡും കാണുക

ടാഗിനായി ഇനിപ്പറയുന്ന കോഡ് ഉപയോഗിക്കുന്നു:

മെറൂൺ പച്ച മഞ്ഞ നീല ചുവപ്പ്

JavaScript-ൽ തിരഞ്ഞെടുത്ത ഓപ്ഷൻ ആക്സസ് ചെയ്യുന്നതിനുള്ള ഉദാഹരണം

ഇപ്പോൾ തിരഞ്ഞെടുത്ത ഓപ്ഷൻ്റെ മൂല്യം ആക്സസ് ചെയ്യുന്നതിനും ചില പ്രവർത്തനങ്ങൾ നടത്തുന്നതിനുമുള്ള ഒരു ഉദാഹരണം സൃഷ്ടിക്കാം. വർണ്ണ ഓപ്ഷനുകൾ ഉപയോഗിച്ച് മുകളിലുള്ള ഉദാഹരണത്തിലെ അതേ ലിസ്റ്റ് ഞങ്ങൾ സൃഷ്ടിക്കുന്നു. തിരഞ്ഞെടുത്തുകഴിഞ്ഞാൽ, പ്രമാണത്തിൽ ആ നിറം പ്രയോഗിക്കാൻ ബട്ടൺ ക്ലിക്ക് ചെയ്യുക:


ഓൺലൈൻ ഡെമോയും കോഡും കാണുക

ഓപ്‌ഷൻ മൂല്യമായ HTML-നായി ഇനിപ്പറയുന്ന കോഡ് ഉപയോഗിക്കുന്നു:

മെറൂൺ പച്ച മഞ്ഞ നീല ചുവപ്പ് മറ്റുള്ളവ

ഒരു ഓപ്‌ഷൻ്റെ മൂല്യ ആട്രിബ്യൂട്ടിൻ്റെ മൂല്യം ആക്‌സസ് ചെയ്യാൻ JavaScript-ൽ ഇനിപ്പറയുന്ന കോഡിൻ്റെ വരി ഉപയോഗിക്കുന്നു:

var seltheme = document.getElementById(“selcolor”).value;

ബട്ടൺ ക്ലിക്ക് ചെയ്യുമ്പോൾ, ഒരു JS ഫംഗ്ഷൻ വിളിക്കപ്പെടുന്നു, അത് ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റിൽ തിരഞ്ഞെടുത്ത മൂല്യം ഒരു വേരിയബിളിലേക്ക് അസൈൻ ചെയ്യുന്നു. നിലവിലെ ഡോക്യുമെൻ്റിൽ ഒരു നിറം പ്രയോഗിക്കാൻ ഈ മൂല്യം ഉപയോഗിക്കുന്നു.

JQuery-യിൽ ദൃശ്യമായ ടെക്സ്റ്റ് ആക്സസ് ചെയ്യുന്നു

തിരഞ്ഞെടുത്ത ഓപ്ഷൻ്റെ മൂല്യം ആക്‌സസ് ചെയ്യാൻ ഞാൻ ഇത്തവണ JQuery ഉപയോഗിക്കും: ടെക്‌സ്‌റ്റും മൂല്യവും. ഈ ഡെമോയിൽ, ഞാൻ HTML-ലെ ഒരു ഓപ്‌ഷൻ ടാഗിൽ ദൃശ്യമാകുന്ന ടെക്‌സ്‌റ്റ് ആക്‌സസ് ചെയ്യും:


ഓൺലൈൻ ഡെമോയും കോഡും കാണുക

കോഡിൽ, ടാഗിലെ ഓരോ ഓപ്ഷനും, മൂല്യം വാചകത്തിൽ നിന്ന് വ്യത്യസ്തമാണ്. നിങ്ങൾ ഒരു നിറം തിരഞ്ഞെടുത്തുകഴിഞ്ഞാൽ, jQuery അലേർട്ടിൽ ദൃശ്യമായ വാചകം പ്രദർശിപ്പിക്കുന്നു. ടാഗ് കോഡ് ഇപ്രകാരമാണ്:

മെറൂൺ പച്ച മഞ്ഞ നീല ചുവപ്പ്

തിരഞ്ഞെടുത്ത JavaScript തിരഞ്ഞെടുത്ത HTML സെലക്ട് ഓപ്‌ഷനിൽ ഈ മൂല്യം എങ്ങനെ ആക്‌സസ് ചെയ്യാമെന്നത് ഇതാ:

var തിരഞ്ഞെടുത്ത നിറം = $("#jqueryselect option:selected").text();

JQuery $.val() രീതി ഉപയോഗിച്ച് നിങ്ങൾക്ക് മൂല്യം ആക്സസ് ചെയ്യാനും കഴിയും:

var തിരഞ്ഞെടുത്ത നിറം = $("#jqueryselect").val();

മുകളിലുള്ള ഉദാഹരണത്തിൽ ഈ വരി മാറ്റിസ്ഥാപിക്കുക, കോഡ് ദൃശ്യമായ ടെക്‌സ്‌റ്റിന് പകരം മൂല്യ ആട്രിബ്യൂട്ടിൽ ഷോർട്ട്‌കോഡ്/വർണ്ണ മൂല്യം പ്രദർശിപ്പിക്കും.

ഒരു PHP സ്ക്രിപ്റ്റിൽ ഒരു മൂല്യം ലഭിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം

ഒരു ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റിൽ നിന്ന് തിരഞ്ഞെടുത്ത ഓപ്ഷൻ്റെ മൂല്യം നേടുന്നതിനുള്ള ഈ ഉദാഹരണത്തിൽ, മാർക്ക്അപ്പ് വിഭാഗത്തിലെ ഒരു ടാഗ് ഉപയോഗിച്ചാണ് ഫോം സൃഷ്ടിക്കുന്നത്. ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റിൽ നിന്ന് ഒരു നിറം തിരഞ്ഞെടുത്ത ശേഷം, "സമർപ്പിക്കുക" ബട്ടണിൽ ക്ലിക്കുചെയ്യുക. ഫോം ഡാറ്റ അതേ PHP ഫയലിലേക്ക് കൈമാറും, അതിനുശേഷം തിരഞ്ഞെടുത്ത നിറം പ്രദർശിപ്പിക്കും:


ഓൺലൈൻ ഡെമോയും കോഡും കാണുക

ഉദാഹരണത്തിൽ ഉപയോഗിച്ചിരിക്കുന്ന ഫോം രീതി POST ആണ്, അതിനാൽ നിങ്ങൾക്ക് PHP $_POST[""] അറേ ഉപയോഗിച്ച് ഫോം മൂല്യങ്ങൾ ലഭിക്കും. ഉദാഹരണത്തിൽ ഉപയോഗിച്ചിരിക്കുന്ന ഫോം കോഡ് ഇതാണ്:

ഒരു നിറം തിരഞ്ഞെടുക്കുക: മെറൂൺ പച്ച മഞ്ഞ നീല ചുവപ്പ്

HTML സെലക്ട് ഓപ്‌ഷൻ മൂല്യം ലഭിക്കാൻ PHP സ്‌ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നതെങ്ങനെയെന്നത് ഇതാ:

ഫോം GET രീതി വ്യക്തമാക്കുകയാണെങ്കിൽ, $_GET[“”] എന്ന PHP അറേ ഉപയോഗിക്കുക.

CSS ഉപയോഗിച്ച് ഒരു ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് സ്റ്റൈലിംഗ്

CSS-ൻ്റെ ശക്തി ഉപയോഗിച്ച് ഒരു ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് എങ്ങനെ സ്റ്റൈൽ ചെയ്യാമെന്ന് നോക്കാം. ഇനിപ്പറയുന്ന ഡെമോയിൽ ഞാൻ ചില ലളിതമായ CSS പ്രോപ്പർട്ടികൾ, CSS3 ഗ്രേഡിയൻ്റ് പ്രോപ്പർട്ടികൾ എന്നിവ ഉപയോഗിച്ചു:


ഓൺലൈൻ ഡെമോയും കോഡും കാണുക

ലീനിയർ-ഗ്രേഡിയൻ്റിനൊപ്പം, ബോക്സ്-ഷാഡോ പ്രോപ്പർട്ടി ഇവിടെ ഉപയോഗിക്കുന്നു. പൂർണ്ണമായ CSS കോഡ് ഇതുപോലെ കാണപ്പെടുന്നു:

Selcls (പാഡിംഗ്: 3px; ബോർഡർ: സോളിഡ് 1px #517B97; ഔട്ട്‌ലൈൻ: 0; പശ്ചാത്തലം: -webkit-gradient(ലീനിയർ, ഇടത് മുകളിൽ, ഇടത് 25, നിന്ന്(#FFFFFF), കളർ-സ്റ്റോപ്പ്(4%, #CAD9E3), ലേക്ക് (#FFFFF) ); : rgba (0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba (0,0,0, 0.1) 0px 0px 8px;

ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി ഉപയോഗിച്ച് വൃത്താകൃതിയിലുള്ള കോണുകൾ

HTML സെലക്ട് ഓപ്‌ഷനു വേണ്ടി, കോണുകൾ വൃത്താകൃതിയിലാക്കാൻ ഞങ്ങൾ CSS3 ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി സജ്ജീകരിക്കും. വർണ്ണ സ്കീമും മാറുന്നു. ബോർഡറുകൾ, വീതി, മാർജിനുകൾ, മറ്റ് പ്രോപ്പർട്ടികൾ എന്നിവ നിങ്ങൾക്ക് ഇഷ്ടമുള്ളത് പോലെ പരീക്ഷിക്കാം:


ഒന്നിലധികം ആട്രിബ്യൂട്ടുകളും CSS ശൈലികളും ഉപയോഗിച്ച് ഓൺലൈൻ ഡെമോയും കോഡും കാണുക

ഒരു ലിസ്റ്റിൽ നിന്ന് ഒന്നിലധികം ഓപ്ഷനുകൾ തിരഞ്ഞെടുക്കാൻ ഉപയോക്താക്കളെ അനുവദിക്കുന്നതിന്, നിങ്ങൾ ഒന്നിലധികം ആട്രിബ്യൂട്ട് ഉപയോഗിക്കേണ്ടതുണ്ട്. മുകളിലുള്ള ഉദാഹരണത്തിൽ, ഒരു ഓപ്ഷൻ മാത്രമേ തിരഞ്ഞെടുക്കാനാകൂ. ഒന്നിലധികം ഉപയോഗിക്കുമ്പോൾ, CTRL കീ അമർത്തി നിങ്ങൾക്ക് ഒന്നിലധികം ഓപ്ഷനുകൾ തിരഞ്ഞെടുക്കാം:


മനോഹരമായ ഡ്രോപ്പ്‌ഡൗൺ ലിസ്റ്റുകൾ സൃഷ്‌ടിക്കാൻ ബൂട്ട്‌സ്‌ട്രാപ്പ് ചട്ടക്കൂടും പ്ലഗിനുകളും ഉപയോഗിച്ച് ഓൺലൈൻ ഡെമോയും കോഡും കാണുക

നിങ്ങൾ ബൂട്ട്‌സ്‌ട്രാപ്പ് ചട്ടക്കൂട് ഉപയോഗിക്കുകയാണെങ്കിൽ, രസകരമായ HTML ഓപ്‌ഷനുകൾ സൃഷ്‌ടിക്കാൻ പ്ലഗിനുകൾ ഉപയോഗിക്കാനുള്ള അവസരമുണ്ട്.

ഇന്ന് ഞാൻ CSS-ൽ ഒരു ലിസ്റ്റ് സൃഷ്ടിക്കുന്നതിനുള്ള ഒരു ചെറിയ "പാചകക്കുറിപ്പ്" അവതരിപ്പിക്കാൻ ആഗ്രഹിക്കുന്നു. JQuery ഇല്ല, CSS3 ഇല്ല - നല്ല പഴയ ക്രോസ് ബ്രൗസർ CSS മാത്രം. ഉദാഹരണം വളരെ ലളിതമാണ്, അതിനാൽ പരിചയസമ്പന്നരായ സഖാക്കൾക്ക് താൽപ്പര്യമുണ്ടാകില്ല. സോഷ്യൽ ബട്ടണുകളുള്ള ഒരു ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റ് ഞങ്ങൾ നടപ്പിലാക്കും.


അതുകൊണ്ട് അധികം നേരം സംസാരിക്കാതെ നേരെ കാര്യത്തിലേക്ക് കടക്കാം

HTML ഈ പോസ്റ്റ് പങ്കിടുക
• ഫേസ്ബുക്ക്
• ട്വിറ്റർ
• ഗൂഗിൾ പ്ലസ്
• VKontakte
• ആർഎസ്എസ്

കോഡ് വളരാതിരിക്കാൻ, ശൈലികൾ ഉൾപ്പെടെയുള്ള പൊതുവായ പോയിൻ്റുകൾ ഞാൻ മനഃപൂർവ്വം ഒഴിവാക്കുന്നു. പേജിൻ്റെ ചുവടെ ഞാൻ ഉറവിടങ്ങളിലേക്ക് ഒരു ലിങ്ക് നൽകും - എല്ലാം അവിടെയുണ്ട്.
HTML-ൽ ഉള്ളത് ഒരു സാധാരണ ലിസ്റ്റും അസാധാരണമായ തലക്കെട്ടുമാണ്. അതിൻ്റെ അസാധാരണമായ സവിശേഷത, ഇത് ഒരു ഹൈപ്പർലിങ്ക് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്, ഇത് :ഹോവർ ഇവൻ്റ്, അതായത് ഹോവർ ട്രാക്ക് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. നിങ്ങൾ തലക്കെട്ടിന് മുകളിൽ ഹോവർ ചെയ്യുമ്പോൾ ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് പ്രവർത്തിക്കും.

സി.എസ്.എസ്

ആദ്യം, ഒരു ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റിൻ്റെ അടിസ്ഥാന ശൈലികൾ നോക്കാം. കോഡിൻ്റെ ഓരോ വരിയും വ്യക്തമാക്കാൻ ഞാൻ കമൻ്റ് ചെയ്യാൻ ശ്രമിച്ചു:

/*പാഡിംഗ് പുനഃസജ്ജമാക്കുക*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Basic wrapper*/ .droplink ( width:200px; position:absolute; margin:10px 0 0 25px ) /*ഹോവർ ബ്ലോക്ക് സ്‌റ്റൈൽ*/ .droplink:ഹോവർ(ഉയരം:ഓട്ടോ; പശ്ചാത്തല നിറം:#3E403D; ബോർഡർ:സോളിഡ് 1px #3A3C39 ) /*ശീർഷകം സാധാരണ അവസ്ഥയിൽ*/ .droplink h3 a( text-align:center ; വീതി: 100%; ഭാരം: ബോൾഡ്; സ്ഥാനം: സമ്പൂർണ്ണ )

ഇവിടെ പ്രത്യേകമായി ഒന്നുമില്ല; ബ്ലോക്കിൻ്റെ വലുപ്പവും ശൈലിയും, തലക്കെട്ടിൻ്റെ ശൈലിയും, കഴ്‌സർ ഹോവർ ചെയ്യുമ്പോൾ അവയുടെ ശൈലികളും ഞങ്ങൾ സൂചിപ്പിച്ചു. നമുക്ക് മുന്നോട്ട് പോകാം:

/*ഹോവർ ചെയ്യാതെ ലിസ്റ്റ് മറയ്ക്കുക*/ .droplink ul (list-style:none; display:none ) /*Hover-ൽ ലിസ്റ്റ് പ്രദർശിപ്പിക്കുക*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li (ഡിസ്പ്ലേ:ബ്ലോക്ക്)

ഈ കോഡ് കൂടുതൽ രസകരവും ഹോവർ ചെയ്യുമ്പോൾ ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റ് എങ്ങനെ പ്രവർത്തിക്കുമെന്ന് കാണിക്കുന്നു. സാധാരണ അവസ്ഥയിൽ അത് ചിലവാകും ഡിസ്പ്ലേ: ഒന്നുമില്ല,അതായത്, അത് പ്രദർശിപ്പിക്കില്ല. ഹോവർ ചെയ്യുമ്പോൾ, ഞങ്ങൾ അത് ഒരു ബ്ലോക്കായി കാണിക്കുന്നു. അതാണ് മുഴുവൻ രഹസ്യവും. ഇപ്പോൾ നമുക്ക് ലിസ്റ്റ് ഘടകങ്ങൾ അൽപ്പം അലങ്കരിക്കുകയും ഐക്കണുകൾ ചേർക്കുകയും ചെയ്യാം:

/*ലിസ്റ്റ് ഇനത്തിൻ്റെ ശൈലി*/ .droplink li a( padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px ;പശ്ചാത്തലം-ആവർത്തനം:പശ്ചാത്തല-സ്ഥാനം: 10px 3px ) /*ഹോവർ എലമെൻ്റ് ശൈലി*/ .droplink li a:hover(background-color:#999 ) /*Icons*/ .facebook a (പശ്ചാത്തലം-ചിത്രം) :url("icons/facebook.png")) .twitter a (background-image:url("icons/twitter.png")) .vk a (background-image:url("icons/vk.png")) .rss a (background-image:url("icons/rss.png")) .gplus a (പശ്ചാത്തലം-ചിത്രം:url("icons/gplus.png"))

അത്രയേയുള്ളൂ, യഥാർത്ഥത്തിൽ. ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റ് തയ്യാറാണ്, വളരെ മനോഹരമായി തോന്നുന്നു. നിങ്ങളുടെ വിവേചനാധികാരത്തിൽ നിങ്ങൾക്ക് ഘടകങ്ങൾ രൂപകൽപ്പന ചെയ്യാം, വൃത്താകൃതിയിലുള്ള കോണുകളും മറ്റ് മണികളും വിസിലുകളും ചേർക്കുക.

ഹോവർ ചെയ്യുമ്പോൾ ലിസ്റ്റ് അതിന് താഴെയുള്ള വാചകം "ഓവർലാപ്പ്" ചെയ്യണമെങ്കിൽ, വശത്തേക്ക് നോക്കുക z-സൂചിക.

എന്തെങ്കിലും വ്യക്തമല്ലെങ്കിലോ പ്രവർത്തിക്കുന്നില്ലെങ്കിലോ, അഭിപ്രായങ്ങളിൽ ചോദിക്കുക അല്ലെങ്കിൽ "സന്ദേശം അയയ്ക്കുക" ബട്ടൺ ഉപയോഗിക്കുക, അത് അവിടെയുണ്ട് ->

പലപ്പോഴും, തുടക്കക്കാർ ഒരു ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റ് രൂപകൽപ്പന ചെയ്യുന്ന പ്രശ്നം നേരിടുന്നു. ഒറിജിനൽ സെലക്ട് ഉപയോഗിച്ച് നിങ്ങൾക്ക് പ്രത്യേകമായി ഒന്നും ചെയ്യാൻ കഴിയാത്തതിനാൽ. അപ്പോൾ jQuery രക്ഷാപ്രവർത്തനത്തിലേക്ക് വരുന്നു, തുടർന്ന് നിങ്ങൾക്ക് ഏതാണ്ട് എന്തും ചെയ്യാൻ കഴിയും.

എന്നാൽ ശുദ്ധമായ CSS ഉപയോഗിച്ച് ഒരു സാധാരണ HTML ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റ് രൂപകൽപ്പന ചെയ്യാൻ കഴിയുമെന്ന് ഞാൻ നിങ്ങളോട് പറഞ്ഞാലോ?

HTML-ലെ ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ്

പശ്ചാത്തലത്തിൻ്റെയും വാചകത്തിൻ്റെയും നിറം മാറ്റാൻ കഴിയും, ഇത് വളരെ ലളിതമായി ചെയ്യുന്നു.

വെൻഡെറ്റ ദി വുൾഫ് ഓഫ് വാൾസ്ട്രീറ്റ് ക്വാണ്ടം ഓഫ് സോളസിനായി ഷെർലക് ഹോംസ് ദി ഗ്രേറ്റ് ഗാറ്റ്‌സ്‌ബി വി.

സ്പാനിലേക്ക് ഞങ്ങൾ 2 ക്ലാസുകൾ ചേർത്തു, ഒരു പ്രധാന ഒന്ന്, അതിൽ എല്ലാ പ്രധാന "ഇഷ്‌ടാനുസൃത-ഡ്രോപ്പ്ഡൗൺ" ശൈലികളും അടങ്ങിയിരിക്കും, രണ്ടാമത്തെ വലിയത്, ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റിൻ്റെ വലുപ്പം നിർണ്ണയിക്കും. നമുക്ക് മുൻകൂട്ടി തയ്യാറാക്കാം, പറയുക, 3 വലുപ്പങ്ങൾ, വലുത്, ഇടത്തരം, ചെറുത്, ശൈലികളിൽ ഫോണ്ട് വലുപ്പം സജ്ജമാക്കുക. കൂടാതെ ഭാവിയിൽ ബുദ്ധിമുട്ടിക്കരുത്. നിങ്ങൾക്ക് ഇത് ഒഴിവാക്കാം, ഇതെല്ലാം സൈറ്റിലെ നിങ്ങളുടെ രൂപകൽപ്പനയെ ആശ്രയിച്ചിരിക്കുന്നു.

ബോഡി (പശ്ചാത്തലം: #2a2a2b; നിറം: #fff; ടെക്സ്റ്റ്-അലൈൻ: സെൻ്റർ; ഫോണ്ട്-ഫാമിലി: ഏരിയൽ, ഹെൽവെറ്റിക്ക; ) .ബിഗ് (ഫോണ്ട്-സൈസ്: 1.2എം; ) /* ഇഷ്‌ടാനുസൃത ഡ്രോപ്പ്ഡൗൺ */ .കസ്റ്റം-ഡ്രോപ്പ്ഡൗൺ (സ്ഥാനം : ആപേക്ഷികം: ഇൻലൈൻ-ബ്ലോക്ക്; വലിപ്പം: പാഡിംഗ്: .5em; ബോർഡർ: 0.01px; ; സ്ഥാനം: കേവലം; പോയിൻ്റർ-ഇവൻ്റുകൾ: ഒന്നുമില്ല; ;വലത്: 1.2em; മുകളിൽ: 50%; .ഇഷ്‌ടാനുസൃത ഡ്രോപ്പ്‌ഡൗൺ:: മുമ്പ് (/* ഇഷ്‌ടാനുസൃത ഡ്രോപ്പ്‌ഡൗൺ അമ്പടയാള കവർ 0; ബോർഡർ-റേഡിയസ്: 0 3px 3px 0; ഇച്ഛാനുസൃത-ഡ്രോപ്പ്ഡൗൺ തിരഞ്ഞെടുക്കുക (നിറം: rgba(0,0,0,.3); ) .കസ്റ്റം-ഡ്രോപ്പ്ഡൗൺ തിരഞ്ഞെടുക്കുക:: ശേഷം (നിറം: rgba(0,0,0,.1); ) .കസ്റ്റം-ഡ്രോപ്പ്ഡൗൺ::മുമ്പ് (പശ്ചാത്തല-വർണ്ണം: rgba(0,0,0,.15); ) .കസ്റ്റം-ഡ്രോപ്പ്ഡൗൺ::അതിനുശേഷം (നിറം: rgba(0,0,0,.4); )

നിങ്ങൾക്ക് ശല്യപ്പെടുത്താനും ശൈലികൾ പഠിക്കാനും താൽപ്പര്യമില്ലെങ്കിൽ, അത് നിങ്ങളുടെ സൈറ്റിലേക്ക് ചേർക്കുകയും നിങ്ങളുടെ സൈറ്റിൻ്റെ രൂപകൽപ്പനയുമായി പൊരുത്തപ്പെടുന്ന നിറം മാറ്റുകയും ചെയ്യുക. തുടർന്ന് നിങ്ങൾ ".കസ്റ്റം-ഡ്രോപ്പ്ഡൗൺ സെലക്ട്" ശൈലിയിൽ പശ്ചാത്തല-വർണ്ണവും വർണ്ണ മൂല്യങ്ങളും മാറ്റേണ്ടതുണ്ട്.