உள்ளடக்கம்
- ஒரு HTML கோப்பில் பல பக்கங்களை எவ்வாறு குறியிடுவது
- விளக்கம்
- உரையாடல் பெட்டிகள் மற்றும் மாற்றங்களை எவ்வாறு பயன்படுத்துவது
- பயன்படுத்தக்கூடிய மாற்றங்கள்
- விளக்கம்
- பொத்தான்களை உருவாக்குவது எப்படி
- விளக்கம்
- வழிசெலுத்தல் பட்டியை உருவாக்குவது எப்படி
- வழிசெலுத்தல் பட்டியில் HTML ஐ எவ்வாறு குறியிடுவது:
- JQuery மொபைலுடன் உள்ளடக்கத்தை எவ்வாறு வடிவமைப்பது
- JQuery மொபைல் பயன்படுத்தும் இயல்புநிலை பாணிகள்
- விளக்கம்
- HTML கூறுகளுக்கு கருப்பொருள்களை எவ்வாறு பயன்படுத்துவது
- கருப்பொருளைப் பயன்படுத்த இரண்டு வழிகள்:
- விளக்கம்
- முன்னோக்கு
இது அத்தியாயம் 15 இன் திருத்தப்பட்ட பகுதி முராச்சின் HTML5 மற்றும் CSS3 வழங்கியவர் ஜாக் ருவால்காபா மற்றும் அன்னே போஹம்.
jQuery மொபைல் என்பது ஒரு இலவச, திறந்த மூல, குறுக்கு-தளம், ஜாவாஸ்கிரிப்ட் நூலகம், இது மொபைல் வலைத்தளங்களை உருவாக்க நீங்கள் பயன்படுத்தலாம். இந்த நூலகம் ஒரு சொந்த மொபைல் பயன்பாட்டின் பக்கங்களைப் போல தோற்றமளிக்கும் பக்கங்களை உருவாக்க உங்களை அனுமதிக்கிறது.
JQuery மொபைல் தற்போது பீட்டா சோதனை பதிப்பாக கிடைத்தாலும், இந்த பதிப்பு ஏற்கனவே ஒரு சிறந்த மொபைல் வலைத்தளத்தை உருவாக்க உங்களுக்கு தேவையான அனைத்து அம்சங்களையும் வழங்குகிறது. இதன் விளைவாக, நீங்கள் இப்போதே அதைப் பயன்படுத்தத் தொடங்கலாம். இந்த பதிப்பு தொடர்ந்து மேம்படுத்தப்படும் என்று நீங்கள் எதிர்பார்க்கலாம், எனவே jQuery மொபைல் மட்டுமே சிறப்பாக இருக்கும்.
இந்த கட்டுரையில் நீங்கள் ஒரு மொபைல் வலைத்தளத்தின் பக்கங்களை உருவாக்குவதற்கான அடிப்படை நுட்பங்களைக் கற்றுக்கொள்வீர்கள். உரையாடல் பெட்டிகள், பொத்தான்கள் மற்றும் வழிசெலுத்தல் பட்டிகளின் பயன்பாடு இதில் அடங்கும்.
ஒரு HTML கோப்பில் பல பக்கங்களை எவ்வாறு குறியிடுவது
ஒரு திரை வலைத்தளத்திற்கான வலைப்பக்கங்களை நீங்கள் உருவாக்கும் முறைக்கு மாறாக, ஒரு HTML கோப்பில் பல பக்கங்களை உருவாக்க jQuery மொபைல் உங்களை அனுமதிக்கிறது. இது படம் 15-7 மூலம் விளக்கப்பட்டுள்ளது. இங்கே, இந்த பக்கங்களுக்கான HTML உடன் ஒரு தளத்தின் இரண்டு பக்கங்களைக் காணலாம். இதில் ஆச்சரியம் என்னவென்றால், இரண்டு பக்கங்களும் ஒரே HTML கோப்பில் குறியிடப்பட்டுள்ளன.
ஒவ்வொரு பக்கத்திற்கும், தரவு-பங்கு பண்புக்கூறின் மதிப்பாக “பக்கம்” உடன் ஒரு பிரிவு உறுப்பை குறியிடுகிறீர்கள். பின்னர், அந்த ஒவ்வொரு டி.வி உறுப்புகளிலும், ஒவ்வொரு பக்கத்தின் தலைப்பு, உள்ளடக்கம் மற்றும் அடிக்குறிப்புக்கான டிவ் கூறுகளை குறியிடுகிறீர்கள். பின்னர், HTML கோப்பு ஏற்றப்படும் போது, கோப்பின் உடலில் முதல் பக்கம் காட்டப்படும்.
HTML கோப்பில் உள்ள பக்கங்களுக்கு இடையில் இணைக்க, அத்தியாயம் 7 இன் படம் 7-11 இல் காட்டப்பட்டுள்ளபடி நீங்கள் இருப்பிடங்களைப் பயன்படுத்துகிறீர்கள். உதாரணமாக, இந்த எடுத்துக்காட்டில் முதல் பக்கத்தில் உள்ள ஒரு> உறுப்பு பயனர் தட்டும்போது “# டூபின்” க்கு செல்லும் இந்த இணைப்பிற்கான உள்ளடக்கமாக குறியிடப்பட்ட h2 அல்லது img உறுப்பு. இது "டூபின்" உடன் உள்ள டி.வி உறுப்பை அதன் ஐடி பண்புக்கூறு எனக் குறிக்கிறது, அதாவது இணைப்பைத் தட்டுவது வாசகரை கோப்பில் இரண்டாவது பக்கத்திற்கு அழைத்துச் செல்லும்.
இந்த எடுத்துக்காட்டு இரண்டு பக்கங்களை மட்டுமே காட்டுகிறது என்றாலும், ஒரே ஒரு HTML கோப்பில் பல பக்கங்களை நீங்கள் குறியிடலாம். இருப்பினும், எல்லா பக்கங்களும் அவற்றின் படங்கள், ஜாவாஸ்கிரிப்ட் மற்றும் CSS கோப்புகளுடன் ஒற்றை HTML கோப்பில் ஏற்றப்பட்டுள்ளன என்பதை நினைவில் கொள்க. இதன் விளைவாக, ஒரே கோப்பில் பல பக்கங்களை சேமித்து வைத்தால் சுமை நேரம் அதிகமாகிவிடும். அது நிகழும்போது, உங்கள் பக்கங்களை ஒன்றுக்கு மேற்பட்ட HTML கோப்புகளாகப் பிரிக்கலாம்.
ஒரு HTML கோப்பின் உடலில் உள்ள இரண்டு பக்கங்களுக்கான HTML:
div data-role = "page"> தலைப்பு தரவு-பங்கு = "தலைப்பு"> h1> எஸ்.ஜே.வி டவுன்ஹால் </ h1> / தலைப்பு> பிரிவு தரவு-பங்கு = "உள்ளடக்கம்"> h3> 2011-2012 பேச்சாளர்கள் / h3> ஒரு href = "# toobin"> h4> ஜெஃப்ரி டூபின்ர்ப்> அக்டோபர் 19, 2011 / h4> img src = "images / toobin75.webp" alt = "ஜெஃப்ரி டூபின்"> </ a>! - பேச்சாளர்களின் மீள்திருத்தத்திற்கான கூறுகள் - -> / பிரிவு> அடிக்குறிப்பு தரவு-பங்கு = "அடிக்குறிப்பு"> h4> © 2011 / h4> / அடிக்குறிப்பு> / div> div data-role = "page" id = "toobin"> தலைப்பு தரவு-பங்கு = "தலைப்பு"> h1> எஸ்.ஜே.வி டவுன்ஹால் </ h1> / தலைப்பு> பிரிவு தரவு-பங்கு = "உள்ளடக்கம்"> h3> உச்ச ஒன்பது: br> கருப்பு ரோப்ட் ரகசியங்கள் / h3> img src = "படங்கள் / toobin_court.cnn.webp" alt = "ஜெஃப்ரி டூபின் "> ப> விமர்சன ரீதியாக பாராட்டப்பட்ட சிறந்த விற்பனையாளரின் ஆசிரியர், i> தி ஒன்பது :! - நகல் தொடர்கிறது -> / பிரிவு> அடிக்குறிப்பு தரவு-பங்கு =" அடிக்குறிப்பு "> h4> © 2011 / h4> / அடிக்குறிப்பு> / div>
விளக்கம்
- நீங்கள் jQuery மொபைலைப் பயன்படுத்தும்போது, ஒவ்வொரு பக்கத்திற்கும் தனி HTML கோப்பை உருவாக்க வேண்டியதில்லை. அதற்கு பதிலாக, ஒரு HTML கோப்பின் உடல் உறுப்புக்குள், ஒவ்வொரு பக்கத்திற்கும் ஒரு div உறுப்பை அதன் தரவு-பங்கு பண்புடன் “பக்கம்” என அமைத்துள்ளீர்கள்.
- ஒவ்வொரு பிரிவு உறுப்புக்கும், ஐடி பண்புக்கூற்றை ஒரு ஒதுக்கிட மதிப்பிற்கு அமைத்துள்ளீர்கள், இது மற்ற பக்கங்களின் a> உறுப்புகளில் உள்ள href பண்புகளால் அணுக முடியும்.
உரையாடல் பெட்டிகள் மற்றும் மாற்றங்களை எவ்வாறு பயன்படுத்துவது
ஒரு இணைப்பு தட்டும்போது திறக்கும் உரையாடல் பெட்டியை எவ்வாறு உருவாக்குவது என்பதை படம் 15-8 காட்டுகிறது. அதைச் செய்ய, நீங்கள் எந்தப் பக்கத்தையும் போலவே உரையாடல் பெட்டியையும் குறியிடுகிறீர்கள். ஆனால் அந்த பக்கத்திற்குச் செல்லும் ஒரு> உறுப்பில், தரவு-நம்பக பண்புக்கூற்றை “டய-லாக்” உடன் அதன் மதிப்பாகக் குறியிடுகிறீர்கள்.
இந்த புள்ளிவிவரத்தில் உள்ள எடுத்துக்காட்டுகள் காண்பிப்பது போல, jQuery மொபைல் CSS கோப்பு ஒரு சாதாரண வலைப்பக்கத்தை விட வித்தியாசமாக ஒரு உரையாடல் பெட்டியை வடிவமைக்கிறது. இயல்பாக, ஒரு உரையாடல் பெட்டியில் வெள்ளை முன்புற உரையுடன் இருண்ட பின்னணி இருக்கும், மேலும் தலைப்பு மற்றும் அடிக்குறிப்பு பக்கத்தின் அகலத்தை பரப்பாது. ஒரு உரையாடல் பெட்டியில் தலைப்பில் ஒரு “எக்ஸ்” இருக்கும், முந்தைய பக்கத்திற்குத் திரும்ப பயனர் தட்ட வேண்டும்.
வேறொரு பக்கம் அல்லது உரையாடல் பெட்டிக்குச் செல்லும் ஒரு> உறுப்பை நீங்கள் குறியிடும்போது, இந்த படத்தில் அட்டவணையில் சுருக்கமாகக் கூறப்படும் ஆறு மாற்றங்களில் ஒன்றைக் குறிப்பிட தரவு-மாற்றம் பண்புகளையும் பயன்படுத்தலாம். இந்த மாற்றங்கள் ஒவ்வொன்றும் ஐபோன் போன்ற மொபைல் சாதனம் பயன்படுத்தும் விளைவைப் பிரதிபலிக்கும்.
பயன்படுத்தக்கூடிய மாற்றங்கள்
| ஸ்லைடு | அடுத்த பக்கம் வலமிருந்து இடமாக சரியும். |
| மேல் நோக்கி சறுக்கு | அடுத்த பக்கம் கீழே இருந்து மேலே சரிகிறது. |
| ஸ்லைடவுன் | அடுத்த பக்கம் மேலிருந்து கீழாக சரியும். |
| பாப் | அடுத்த பக்கம் திரையின் நடுவில் இருந்து மங்குகிறது. |
| மங்கல் | அடுத்த பக்கம் பார்வைக்கு மங்குகிறது. |
| புரட்டு | அடுத்த பக்கம் ஒரு விளையாட்டு அட்டை புரட்டப்படுவதைப் போலவே பின்னால் இருந்து முன்னால் புரட்டுகிறது. இந்த மாற்றம் சில சாதனத்தில் ஆதரிக்கப்படவில்லை. |
“பாப்” மாற்றத்துடன் உரையாடல் பெட்டியாக பக்கத்தைத் திறக்கும் HTML:
a href = "# toobin" data-rel = "உரையாடல்" தரவு-மாற்றம் = "பாப்">
“மங்கல்” மாற்றத்துடன் பக்கத்தைத் திறக்கும் HTML:
a href = "# toobin" தரவு-மாற்றம் = "மங்கல்">
விளக்கம்
- ஒரு HTML உரையாடல் பெட்டி எந்தப் பக்கமும் குறியிடப்பட்ட விதத்தில் குறியிடப்படுகிறது. இருப்பினும், பக்கத்துடன் இணைக்கும் ஒரு> உறுப்பு அதன் உரையாடலாக “உரையாடல்” உடன் தரவு-நம்பக பண்புக்கூறு அடங்கும். உரையாடல் பெட்டியை மூட, பயனர் பெட்டியின் தலைப்பில் X ஐத் தட்டுகிறார்.
- ஒரு பக்கம் அல்லது உரையாடல் பெட்டி திறக்கப்பட்ட வழியைக் குறிப்பிட, மேலே உள்ள அட்டவணையில் உள்ள மதிப்புகளில் ஒன்றைக் கொண்டு தரவு-மாற்ற பண்புக்கூற்றைப் பயன்படுத்தலாம். நீங்கள் குறிப்பிடும் மாற்றத்தை ஒரு சாதனம் ஆதரிக்கவில்லை என்றால், பண்பு புறக்கணிக்கப்படும்.
- உரையாடல் பெட்டியின் ஸ்டைலிங் jQuery மொபைல் CSS கோப்பால் செய்யப்படுகிறது.
பொத்தான்களை உருவாக்குவது எப்படி
படம் 15-9 ஒரு பக்கத்திலிருந்து மற்றொரு பக்கத்திற்கு செல்ல பொத்தான்களை எவ்வாறு பயன்படுத்துவது என்பதைக் காட்டுகிறது. அதைச் செய்ய, நீங்கள் ஒரு> உறுப்புக்கான தரவு-பங்கு பண்புக்கூற்றை “பொத்தான்” என அமைத்துள்ளீர்கள், மீதமுள்ளவற்றை jQuery மொபைல் செய்கிறது.
இருப்பினும், பொத்தான்களுக்கான வேறு சில பண்புகளையும் நீங்கள் அமைக்கலாம். எடுத்துக்காட்டாக, இந்த படத்தில் உள்ள முதல் இரண்டு பொத்தான்களைப் போல, இரண்டு அல்லது அதற்கு மேற்பட்ட பொத்தான்கள் அருகருகே தோன்ற விரும்பினால், தரவு-இன்லைன் பண்புக்கூறு “உண்மை” என அமைக்கலாம்.
JQuery மொபைல் வழங்கிய 18 ஐகான்களில் ஒன்றை ஒரு பொத்தானில் சேர்க்க விரும்பினால், நீங்கள் தரவு-ஐகான் பண்புகளையும் குறியிடுகிறீர்கள். உதாரணமாக, இந்த எடுத்துக்காட்டில் மூன்றாவது பொத்தான் “நீக்கு” ஐகானைப் பயன்படுத்துகிறது, நான்காவது பொத்தான் “முகப்பு” ஐகானைப் பயன்படுத்துகிறது. இந்த ஐகான்கள் அனைத்தும் சொந்த மொபைல் பயன்பாட்டிற்குள் நீங்கள் காணக்கூடிய ஐகான்களைப் போல இருக்கும். தற்செயலாக, இந்த சின்னங்கள் பக்கம் அணுக வேண்டிய தனி கோப்புகள் அல்ல. அதற்கு பதிலாக, அவை jQuery மொபைல் நூலகத்தால் வழங்கப்படுகின்றன.
இந்த படத்தில் உள்ள ஆம், இல்லை, மற்றும் ஒருவேளை பொத்தான்களைப் போல இரண்டு அல்லது அதற்கு மேற்பட்ட பொத்தான்களை கிடைமட்டமாக தொகுக்க விரும்பினால், ஒரு தரவு உறுப்புக்குள் உள்ள பொத்தான்களுக்கான ஒரு> கூறுகளை குறியிடலாம், அது “கட்டுப்பாட்டு குழு” ஐ அதன் தரவு-பங்கு பண்புக்கூறு மற்றும் அதன் தரவு வகை பண்புக்கூறாக “கிடைமட்டமானது”. அல்லது, பொத்தான்களை செங்குத்தாக தொகுக்க, தரவு வகை பண்புக்கூறு “செங்குத்து” என மாற்றலாம்.
ஒரு பொத்தானை தரவு-நம்பக பண்புக்கூறு “பின்” மற்றும் பவுண்ட் சின்னத்திற்கு (#) href பண்புக்கூறு என அமைத்தால், பொத்தான் அதை அழைத்த பக்கத்திற்குத் திரும்பும். வேறு வார்த்தைகளில் கூறுவதானால், பொத்தான் பின் பொத்தானைப் போல செயல்படுகிறது. பக்கத்திற்கான உள்ளடக்கத்தின் கடைசி பொத்தானால் இது விளக்கப்பட்டுள்ளது.
கடைசி இரண்டு பொத்தான்கள் ஒரு பக்கத்திற்கான அடிக்குறிப்பில் பொத்தான்கள் எவ்வாறு தோன்றும் என்பதைக் காட்டுகின்றன. இங்கே, ஐகான்கள் மற்றும் உரை கருப்பு பின்னணியில் வெள்ளை நிறத்தில் உள்ளன. இந்த வழக்கில், அடிக்குறிப்புக்கான வகுப்பு பண்புக்கூறு “ui-bar” என அமைக்கப்பட்டுள்ளது, இது jQuery மொபைலுக்கு அடிக்குறிப்பின் உள்ளடக்கங்களைச் சுற்றி இன்னும் கொஞ்சம் இடத்தை வைக்க வேண்டும் என்று கூறுகிறது. படம் 15-12 இல் நீங்கள் அதைப் பற்றி மேலும் அறிந்து கொள்வீர்கள்.
பிரிவில் உள்ள பொத்தான்களுக்கான HTML:
! - இன்லைன் பொத்தான்களுக்கு, தரவு-வரி பண்புக்கூறு உண்மை என அமைக்கவும் -> a href = "#" data-role = "button" data-inline = "true"> ரத்துசெய் </ a> ஒரு href = "#" தரவு -role = "button" data-inline = "true"> சரி / ஒரு>! - ஒரு பொத்தானில் ஒரு ஐகானைச் சேர்க்க, தரவு-ஐகான் பண்புக்கூறு -> ஒரு href = "#" data-role = "பொத்தானைப் பயன்படுத்தவும் "data-icon =" delete "> நீக்கு / a> a href =" # "data-role =" button "data-icon =" home "> முகப்பு </ a>! - குழு பொத்தான்களுக்கு, ஒரு div உறுப்பைப் பயன்படுத்தவும் பின்வரும் பண்புக்கூறுகள் -> div data-role = "controlgroup" data-type = "கிடைமட்ட"> ஒரு href = "#" data-role = "button" data-icon = "check"> ஆம் / அ> ஒரு href = "#" data-role = "button" data-icon = "arrow-d"> இல்லை </ a> a href = "#" data-role = "button"> ஒருவேளை / a> / div>! - க்கு ஒரு பின் பொத்தானைக் குறியிடவும், தரவு-ரெல் பண்புக்கூறு பின்னால் அமைக்கவும் -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> முந்தைய பக்கத்திற்கு / a >
அடிக்குறிப்பில் உள்ள பொத்தான்களுக்கான HTML:
footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Facebook இல் சேர்க்கவும் </ a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> இந்தப் பக்கத்தை ட்வீட் செய்யுங்கள் </ a> / அடிக்குறிப்பு>
விளக்கம்
- ஒரு வலைப்பக்கத்தில் ஒரு பொத்தானைச் சேர்க்க, ஒரு> உறுப்பை அதன் தரவு-பாத்திர பண்புடன் “பொத்தான்” என அமைத்துள்ளீர்கள்.
வழிசெலுத்தல் பட்டியை உருவாக்குவது எப்படி
ஒரு வலைப்பக்கத்தில் வழிசெலுத்தல் பட்டியை எவ்வாறு சேர்க்கலாம் என்பதை படம் 15-10 காட்டுகிறது. அதைச் செய்ய, நீங்கள் ஒரு div உறுப்பை அதன் தரவு-பாத்திரத்துடன் “navbar” என அமைத்துள்ளீர்கள். இந்த உறுப்புக்குள், வழிசெலுத்தல் பட்டியில் உள்ள உருப்படிகளுக்கான a> கூறுகளைக் கொண்ட li கூறுகளைக் கொண்ட ஒரு ul உறுப்பை நீங்கள் குறியிடுகிறீர்கள். இருப்பினும், ஒரு> உறுப்புகளுக்கான தரவு-பங்கு பண்புகளை நீங்கள் குறியிடவில்லை என்பதை நினைவில் கொள்க.
வழிசெலுத்தல் பட்டியில் உள்ள உருப்படிகளுக்கான நிறத்தை மாற்ற, இந்த எடுத்துக்காட்டில் உள்ள குறியீட்டில் ஒவ்வொரு உருப்படிக்கும் தரவு-தீம்-பி பண்புக்கூறு அடங்கும். இதன் விளைவாக, jQuery மொபைல் ஒவ்வொரு உருப்படியின் பின்னணி நிறத்தையும் கருப்பு நிறத்தில் இருந்து இயல்புநிலையாக கவர்ச்சிகரமான நீல நிறமாக மாற்றுகிறது. கூடுதலாக, இந்த குறியீடு செயலில் உள்ள பொத்தானின் வர்க்க பண்புகளை “ui-btn-active” என அமைக்கிறது, எனவே jQuery மொபைல் செயலில் உள்ள பொத்தானின் நிறத்தை இலகுவான நீலமாக மாற்றுகிறது. JQuery மொபைல் பயன்படுத்தும் வடிவமைப்பை நீங்கள் எவ்வாறு மாற்றலாம் என்பதை இது காட்டுகிறது, மேலும் அதைப் பற்றி மேலும் அறிந்து கொள்வீர்கள்.
வழிசெலுத்தல் பட்டிக்கான HTML:
header data-role = "header"> h1> SJV டவுன் ஹால் / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> முகப்பு </ li> li> a href =" # பேச்சாளர்கள் "data-icon =" star "data-theme =" b "> பேச்சாளர்கள் </ a> </ li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> எங்களைத் தொடர்பு கொள்ளுங்கள் </ a> / li> / ul> / div> / header>
வழிசெலுத்தல் பட்டியில் HTML ஐ எவ்வாறு குறியிடுவது:
- தலைப்பு உறுப்புக்குள் ஒரு div உறுப்பைக் குறியிடவும். பின்னர், div உறுப்புக்கான தரவு-பங்கு பண்புகளை “navbar” என அமைக்கவும்.
- Div உறுப்புக்குள், ஒவ்வொரு இணைப்புக்கும் ஒரு li உறுப்பைக் கொண்ட ஒரு ul உறுப்பை குறியிடவும்.
- ஒவ்வொரு li உறுப்புக்குள்ளும், இணைப்பு செல்ல வேண்டிய பக்கத்திற்கு ஒரு ஒதுக்கிடத்தைப் பயன்படுத்தும் ஒரு href பண்புடன் ஒரு> உறுப்பைக் குறியிடவும். பின்னர், நீங்கள் தேர்ந்தெடுக்கும் ஐகானுக்கு தரவு-ஐகான் பண்புக்கூறு அமைக்கவும்.
- வழிசெலுத்தல் பட்டியில் செயலில் உள்ள உருப்படிக்கு, வகுப்பு பண்புக்கூறு “ui-btn-active” என அமைக்கவும்.பின்னர், இந்த உருப்படியின் நிறம் வழிசெலுத்தல் பட்டியில் உள்ள மற்ற உருப்படிகளை விட இலகுவாக இருக்கும்.
- வழிசெலுத்தல் பட்டியில் உள்ள ஒவ்வொரு உருப்படிக்கும் ஒரு jQuery மொபைல் தீம் பயன்படுத்த தரவு-தீம் பண்புகளையும் நீங்கள் பயன்படுத்த வேண்டும். இல்லையெனில், பட்டியில் உள்ள பொத்தான்கள் மீதமுள்ள தலைப்பின் அதே நிறமாக இருக்கும். கருப்பொருள்களைப் பயன்படுத்துவது பற்றி மேலும் அறிய, படம் 15-12 ஐப் பார்க்கவும்.
JQuery மொபைலுடன் உள்ளடக்கத்தை எவ்வாறு வடிவமைப்பது
நீங்கள் ஏற்கனவே பார்த்தபடி, jQuery மொபைல் தானாகவே ஒரு வலைப்பக்கத்தின் கூறுகளை அதன் சொந்த நடை தாளின் அடிப்படையில் வடிவமைக்கிறது. இப்போது, அதைப் பற்றி மேலும் அறிந்து கொள்வீர்கள், அதே போல் jQuery மொபைல் பயன்படுத்தும் இயல்புநிலை ஸ்டைலை எவ்வாறு சரிசெய்வது என்பதையும் நீங்கள் அறிந்து கொள்வீர்கள்.
JQuery மொபைல் பயன்படுத்தும் இயல்புநிலை பாணிகள்
பொதுவான HTML கூறுகளுக்கு jQuery மொபைல் பயன்படுத்தும் இயல்புநிலை பாணிகளை படம் 15-13 காட்டுகிறது. அதன் அனைத்து பாணிகளுக்கும், jQuery மொபைல் உலாவியின் ரெண்டரிங் இயந்திரத்தை நம்பியுள்ளது, எனவே அதன் சொந்த ஸ்டைலிங் குறைவாக உள்ளது. இது சுமை நேரங்களை வேகமாக வைத்திருக்கிறது மற்றும் அதிகப்படியான CSS ஒரு பக்கத்தில் விதிக்கும் மேல்நிலைகளை குறைக்கிறது.
நீங்கள் பார்க்கிறபடி, jQuery மொபைலின் ஸ்டைலிங் மிகவும் பயனுள்ளதாக இருக்கிறது, உங்கள் சொந்த CSS பாணி தாளை வழங்குவதன் மூலம் அதன் ஸ்டைலை மாற்ற வேண்டிய அவசியமில்லை. உதாரணமாக, வரிசைப்படுத்தப்படாத பட்டியலில் உள்ள உருப்படிகளுக்கு இடையிலான இடைவெளி மற்றும் அட்டவணையை வடிவமைத்தல் இரண்டும் அவை ஏற்றுக்கொள்ளக்கூடியவை. மேலும், சாம்பல் பின்னணியில் உள்ள கருப்பு வகை சொந்த மொபைல் பயன்பாடுகளுக்கான வடிவமைப்போடு ஒத்துப்போகிறது.
விளக்கம்
- இயல்பாக, jQuery மொபைல் ஒரு பக்கத்திற்கான HTML உறுப்புகளுக்கு தானாகவே பாணிகளைப் பயன்படுத்துகிறது. இந்த பாணிகள் கவர்ச்சிகரமானவை மட்டுமல்ல, உலாவியின் சொந்த பாணிகளையும் பிரதிபலிக்கின்றன.
- இயல்பாக, jQuery மொபைல் ஒவ்வொரு மொபைல் பக்கத்தின் இடது, வலது, மேல் மற்றும் கீழ் பகுதிகளுக்கு ஒரு சிறிய அளவு திணிப்பைப் பயன்படுத்துகிறது.
- இயல்பாக, இணைப்புகள் சாதாரண உரையை விட சற்று பெரியவை. இது பயனருக்கு இணைப்புகளைத் தட்டுவதை எளிதாக்குகிறது.
- முன்னிருப்பாக, எழுத்துரு வண்ணமாக இணைப்புகள் நீலத்துடன் அடிக்கோடிட்டுக் காட்டப்படுகின்றன.
HTML கூறுகளுக்கு கருப்பொருள்களை எவ்வாறு பயன்படுத்துவது
சில சந்தர்ப்பங்களில், jQuery மொபைல் பயன்படுத்தும் இயல்புநிலை பாணியை மாற்ற விரும்புவீர்கள். படம் 15-10 இன் வழிசெலுத்தல் பட்டியில் நீங்கள் ஏற்கனவே பார்த்துள்ளீர்கள். இயல்புநிலை பாணியை மாற்ற, jQuery மொபைல் வழங்கும் ஐந்து கருப்பொருள்களை நீங்கள் பயன்படுத்தலாம். இவை படம் 15-12 இல் சுருக்கப்பட்டுள்ளன. இங்கே மீண்டும், இந்த கருப்பொருள்கள் ஒரு சொந்த மொபைல் பயன்பாட்டின் தோற்றத்தை பிரதிபலிக்கும்.
கருப்பொருள்களைப் பயன்படுத்துவதற்கான ஒரு வழி, தரவு-தீம் பண்புக்கூறுகளை தீம் கடிதத்துடன் அதன் மதிப்பாகக் குறியிடுவது. படம் 15-10 இல் உள்ள வழிசெலுத்தல் பட்டியில் இதைப் பார்த்தீர்கள், இந்த படத்தில் இரண்டாவது வழிசெலுத்தல் பட்டியின் குறியீட்டில் இதைக் காணலாம். இங்கே, தரவு-தீம் பண்புக்கூறு தலைப்புக்கு “e” தீம் மற்றும் வழிசெலுத்தல் பட்டியில் உள்ள உருப்படிகளுக்கு “d” தீம் பொருந்தும்.
கருப்பொருள்களைப் பயன்படுத்துவதற்கான மற்றொரு வழி, ஒரு உறுப்புக்கான வர்க்க பண்புகளை ஒரு கருப்பொருளைக் குறிக்கும் வர்க்கப் பெயருக்கு அமைப்பதாகும். அட்டவணைக்குப் பிறகு முதல் எடுத்துக்காட்டு மூலம் இது விளக்கப்பட்டுள்ளது. இங்கே, வகுப்பு பண்புக்கூறு “ui-bar” மற்றும் “ui-bar- b” வகுப்புகள் இரண்டையும் div உறுப்புக்கு பயன்படுத்த பயன்படுகிறது. இதன் விளைவாக, jQuery மொபைல் முதலில் அதன் இயல்புநிலை ஸ்டைலிங் ஒரு பட்டியில் உறுப்புக்கு பொருந்தும், பின்னர் அந்த ஸ்டைலிங்கிற்கு b தீம் பொருந்தும். தொடர்ந்து வரும் பக்கங்களில், இந்த வகை ஸ்டைலிங்கின் பிற எடுத்துக்காட்டுகளைப் பார்ப்பீர்கள்.
இந்த படத்தில் உள்ள அட்டவணை தீம் மற்றும் குறைவாக பயன்படுத்த பயன்படுத்துகிறது என்பதை நினைவில் கொள்க. ஏனென்றால், இது ஒரு ஆரஞ்சு நிறத்தைப் பயன்படுத்துகிறது, இது ஒரு பொருளை உச்சரிப்பதற்கு சரியாக வேலை செய்கிறது, ஆனால் பெரிய அளவுகளில் கவர்ச்சிகரமானதாக இல்லை. இந்த படத்தில் உள்ள இரண்டாவது தலைப்பு மற்றும் வழிசெலுத்தல் பட்டியால் இது விளக்கப்பட்டுள்ளது, இது நீங்கள் வண்ணத்தில் பார்க்கும்போது ஜாடிங்காக இருக்கும்.
பொதுவாக, இயல்புநிலை பாணிகள் மற்றும் முதல் மூன்று கருப்பொருள்களுடன் தங்குவது நல்லது, அவை பொதுவாக ஒன்றாக வேலை செய்கின்றன. பின்னர், உங்களுக்கு இன்னும் ஏதாவது தேவை என்று நீங்கள் நினைக்கும் போது d மற்றும் e கருப்பொருள்களுடன் பரிசோதனை செய்யலாம்.
இரண்டாவது தலைப்பு மற்றும் வழிசெலுத்தல் பட்டிக்கான HTML:
header data-role = "header" data-theme = "e"> h1> SJV டவுன்ஹால் </ h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> முகப்பு </ a> / li> li> a href =" # ஸ்பீக்கர்கள் "data-icon =" star "data-theme =" d "> பேச்சாளர்கள் </ a> </ li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> செய்திகள் </ a> / li> / ul> / div> / header>
ஐந்து jQuery மொபைல் கருப்பொருள்கள்:
| a | வெள்ளை முன்புறம் கொண்ட கருப்பு பின்னணி. இது இயல்புநிலை. |
| b | வெள்ளை முன்புறத்துடன் நீல பின்னணி. |
| c | கருப்பு முன்புறத்துடன் வெளிர் சாம்பல் பின்னணி. உரை தைரியமாக தோன்றும். |
| d | கருப்பு முன்புறத்துடன் அடர் சாம்பல் பின்னணி. உரை தைரியமாக தோன்றாது. |
| e | கருப்பு முன்புறத்துடன் ஆரஞ்சு பின்னணி. உச்சரிப்புகளுக்குப் பயன்படுத்தவும், குறைவாகப் பயன்படுத்தவும். |
கருப்பொருளைப் பயன்படுத்த இரண்டு வழிகள்:
தரவு-தீம் பண்பைப் பயன்படுத்துவதன் மூலம்:
li> a href = "# home" data-icon = "home" data-theme = "b"> முகப்பு </ a> / li>
கருப்பொருளைக் குறிக்கும் வர்க்க பண்புகளைப் பயன்படுத்துவதன் மூலம்:
விளக்கம்
- JQuery மொபைலுடன் சேர்க்கப்பட்டுள்ள ஐந்து கருப்பொருள்களைப் பயன்படுத்துவதன் மூலம், HTML உறுப்புகளுக்கான இயல்புநிலை பாணிகளில் பொருத்தமான மாற்றங்களை நீங்கள் செய்யலாம்.
- JQuery மொபைல் பயன்பாட்டுடன் உங்கள் சொந்த CSS நடை தாளை நீங்கள் பயன்படுத்தலாம் என்றாலும், முடிந்தவரை அதைச் செய்வதைத் தவிர்க்க வேண்டும்.
முன்னோக்கு
மொபைல் சாதனங்களின் பயன்பாடு கடந்த சில ஆண்டுகளில் வியத்தகு முறையில் அதிகரித்துள்ளது. இதன் காரணமாக, இந்த சாதனங்களிலிருந்து பயன்படுத்த எளிதான வலைத்தளங்களை வடிவமைப்பது மிகவும் முக்கியமானது. இது வழக்கமாக ஒரு தனி வலைத்தளத்தை உருவாக்குவது என்று பொருள் என்றாலும், இது இணையத்தில் உங்கள் இருப்பைப் பேணுவதற்கான முக்கியமான அம்சமாகும்.
அதிர்ஷ்டவசமாக, jQuery மொபைலின் வருகையால் மொபைல் வலைத்தளத்தை உருவாக்கும் பணி மிகவும் எளிதாகிவிட்டது. மொபைல் வலைப்பக்கங்கள் இனி தலைப்புகள், பத்திகள், இணைப்புகள் மற்றும் சிறு உருவங்களைக் கொண்ட நிலையான பக்கங்களுடன் மட்டுப்படுத்தப்படவில்லை. JQuery மொபைல் மூலம், வலை உருவாக்குநர்கள் இப்போது சொந்த மொபைல் பயன்பாடுகளைப் போல தோற்றமளிக்கும் அம்சம் நிறைந்த வலைத்தளங்களை உருவாக்க முடியும்.
