j Query UI மற்றும் பயனர் இடைமுகக் கூறுகள்- ஒருங்கிணைப்பு மற்றும் பயன்பாடு

j Query UI என்பது jQueryயின் மேல் கட்டப்பட்ட சக்திவாய்ந்த மற்றும் நெகிழ்வான ஜாவாஸ்கிரிப்ட் நூலகம். இது உங்களுக்கு பயன்படுத்த தயாராக உள்ள மற்றும் தனிப்பயனாக்கக்கூடிய பயனர் இடைமுக கூறுகளை வழங்குகிறது, இது ஊடாடும் மற்றும் கவர்ச்சிகரமான வலைப்பக்கங்கள் மற்றும் வலை பயன்பாடுகளை உருவாக்குவதை எளிதாக்குகிறது.

j உடன் Query UI, பொத்தான்கள், டேட்பிக்கர்ஸ், டயலாக்ஸ், தன்னியக்க நிறைவுகள், ஸ்லைடர்கள், தாவல்கள், ப்ரோக்ரஸ்பார்கள் மற்றும் துருத்திகள் போன்ற கூறுகளைப் பயன்படுத்தலாம். இந்த கூறுகள் வடிவமைக்கப்பட்டு, ஒன்றோடொன்று இணக்கமாக உள்ளன, பயனர்களுடன் தடையின்றி தொடர்பு கொள்ளும் நெகிழ்வான மற்றும் பயனர் நட்பு இடைமுகங்களை உருவாக்க உங்களை அனுமதிக்கிறது.

Query UI உங்கள் திட்டத்தில் j ஐ ஒருங்கிணைக்க, இந்தப் படிகளைப் பின்பற்றவும்

படி 1: jQuery மற்றும் j ஐப் பதிவிறக்கவும் Query UI
- jQuery அதிகாரப்பூர்வ இணையதளத்திற்கு( https://jquery.com/ ) சென்று jQuery இன் சமீபத்திய பதிப்பைப் பதிவிறக்கவும்.
- j Query UI அதிகாரப்பூர்வ இணையதளத்திற்கு( https://jqueryui.com/ ) சென்று j இன் சமீபத்திய பதிப்பைப் பதிவிறக்கவும் Query UI.
படி 2: கோப்புறை கட்டமைப்பை உருவாக்கவும்
- JavaScript கோப்புகள், CSS மற்றும் படங்களுக்கான கோப்பகங்கள் உட்பட, உங்கள் திட்டத்திற்கான கோப்புறை கட்டமைப்பை உருவாக்கவும்.
படி 3: கோப்புகளை நகலெடுக்கவும்
- Query UI உங்கள் திட்டத்தின் ஜாவாஸ்கிரிப்ட் கோப்புறையில் jQuery மற்றும் j கோப்புகளை நகலெடுக்கவும் .
- Query UI உங்கள் திட்டத்தின் CSS கோப்புறையில் j CSS கோப்புகளை நகலெடுக்கவும் .
- Query UI உங்கள் திட்டத்தின் பட கோப்புறையில் j படக் கோப்புகளை நகலெடுக்கவும் .
படி 4: ஜாவாஸ்கிரிப்ட் மற்றும் CSS கோப்புகளை இணைக்கவும்
- உங்கள் திட்டப்பணியின் HTML கோப்பில், <script> jQuery மற்றும் j கோப்புகளை இணைக்க குறிச்சொற்களைச் சேர்க்கவும் Query UI:
```
<script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
```
- j CSS கோப்பை <link> இணைக்க குறிச்சொற்களைச் சேர்க்கவும்: Query UI
```
<link rel="stylesheet" href="path/to/jquery-ui.css">  
```
படி 5: j Query UI கூறுகளைப் பயன்படுத்தவும்

- Query UI நீங்கள் இப்போது உங்கள் திட்டத்தில் j கூறுகளைப் பயன்படுத்தத் தயாராக உள்ளீர்கள். உங்கள் ஜாவாஸ்கிரிப்டில் உள்ள j Query UI வகுப்புகள் மற்றும் முறைகளைப் பயன்படுத்தவும் மற்றும் ஊடாடும் பயனர் இடைமுகங்களை உருவாக்க தொடர்புடைய CSS வகுப்புகளைப் பயன்படுத்தவும்.
  
  உதாரணமாக:
```
<!DOCTYPE html>  
<html>  
<head>  
  <link rel="stylesheet" href="path/to/jquery-ui.css">  
</head>  
<body>  
  <div id="datepicker"></div>  
  
  <script src="path/to/jquery.js"></script>  
  <script src="path/to/jquery-ui.js"></script>  
  <script>  
    $(function() {  
      $("#datepicker").datepicker();  
    });  
  </script>  
</body>  
</html>  
```

Query UI உங்கள் HTML குறியீட்டில் jQuery மற்றும் j கோப்புகளுக்கான கோப்பு பாதைகளை நீங்கள் சரியாகக் குறிப்பிட்டுள்ளீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள், மேலும் உங்கள் திட்டமானது j ஐ வெற்றிகரமாக ஒருங்கிணைத்து Query UI, உங்கள் திட்டப்பணியில் அதன் கூறுகளைப் பயன்படுத்த அனுமதிக்கிறது.

j ஆல் வழங்கப்பட்ட ஒவ்வொரு பயனர் இடைமுக கூறுகளுக்கான எடுத்துக்காட்டுகளுடன் விரிவான விளக்கம் இங்கே உள்ளது Query UI:

பொத்தான்கள்

ரேடியோ பொத்தான்கள், தேர்வுப்பெட்டிகள் மற்றும் ஹோவர்/ஆக்டிவ் எஃபெக்ட்ஸ் போன்ற அம்சங்களுடன் இணையப் பக்கங்களில் ஊடாடும் பொத்தான்களை உருவாக்க அனுமதிக்கிறது.

// Create a button  
$("#myButton").button();  
  
// Create a radio button group  
$(".radioGroup").buttonset();

டேட்பிக்கர்

மாறும் வகையில் உருவாக்கப்பட்ட காலெண்டரிலிருந்து தேதிகளைத் தேர்ந்தெடுப்பதற்கான பயனர் நட்பு இடைமுகத்தை வழங்குகிறது, பயனர்கள் பல்வேறு வடிவங்களில் தேதிகளை எளிதாகத் தேர்ந்தெடுக்க அனுமதிக்கிறது.

// Create a datepicker for a date input field  
$("#datepicker").datepicker();  
  
// Create a simple datepicker with a custom date format  
$("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });

உரையாடல்

உள்ளடக்கம், பொத்தான்கள் மற்றும் திறந்த/மூட விளைவுகள் ஆகியவற்றைக் கொண்டிருக்கும் தனிப்பயனாக்கக்கூடிய பாப்அப் உரையாடல் பெட்டிகளை உருவாக்குவதை இயக்குகிறது.

// Create a simple dialog  
$("#myDialog").dialog();  
  
// Create a dialog with a custom close button  
$("#myDialog").dialog({  
  buttons: [  
    {  
      text: "Close",  
      click: function() {  
        $(this).dialog("close");  
      }  
    }  
  ]  
});

தானாக நிறைவு

பயனர்கள் உரைப் புலத்தில் தட்டச்சு செய்யும் போது, கிடைக்கக்கூடிய தரவு அல்லது தொலைநிலை தரவு மூலங்களிலிருந்து பரிந்துரைகளைக் காண்பிக்கும் போது, தானாக நிறைவு செய்யும் செயல்பாட்டை வழங்குகிறது.

// Create an input field with autocomplete feature  
$("#myInput").autocomplete({  
  source: ["Apple", "Banana", "Orange"]  
});  
  
// Create an input field with data from a remote data source  
$("#myInput").autocomplete({  
  source: "/search"  
});

ஸ்லைடர்

முன் வரையறுக்கப்பட்ட மதிப்புகளிலிருந்து மதிப்புகளைத் தேர்ந்தெடுப்பதற்கு ஸ்லைடர்களை உருவாக்க அனுமதிக்கிறது.

// Create a simple slider  
$("#slider").slider();  
  
// Create a slider with minimum and maximum values  
$("#slider").slider({  
  min: 0,  
  max: 100  
});

தாவல்கள்

தாவலாக்கப்பட்ட உள்ளடக்கத்தை உருவாக்குதல், உள்ளடக்கத்தை வெவ்வேறு பிரிவுகளாகப் பிரித்தல், பயனர்கள் வெவ்வேறு பிரிவுகளுக்கு இடையில் மாறுவதை எளிதாக்குகிறது.

// Create a simple tab  
$("#tabs").tabs();  
  
// Create tabs with custom titles  
$("#tabs").tabs({  
  active: 1,  
  collapsible: true  
});

முன்னேற்றப்பட்டி

செய்யப்படும் பணியின் முன்னேற்றத்தைக் காட்ட வரைகலை முன்னேற்றப் பட்டியை வழங்குகிறது.

// Create a simple progressbar  
$("#progressbar").progressbar();  
  
// Update the progress value  
$("#progressbar").progressbar("value", 75);

துருத்தி

மடிக்கக்கூடிய கூறுகளை உருவாக்க அனுமதிக்கிறது, உள்ளடக்கத்தின் ஒரு பகுதியை மட்டுமே காண்பிக்கும் மற்றும் உள்ளடக்கத்தை விரிவாக்க அல்லது சுருக்க பயனர்களை அனுமதிக்கிறது.

// Create a simple accordion  
$("#accordion").accordion();  
  
// Create an accordion with fast toggle  
$("#accordion").accordion({  
  collapsible: true,  
  active: false,  
  heightStyle: "content"  
});

இவை j ஆல் வழங்கப்பட்ட பயனர் இடைமுகக் கூறுகளின் சில எடுத்துக்காட்டுகள் Query UI. உங்கள் இணையப் பக்கத்தில் ஊடாடும் மற்றும் பயனர் நட்பு இடைமுகங்களை உருவாக்க இந்தக் கூறுகளைப் பயன்படுத்தி அவற்றைத் தனிப்பயனாக்கலாம்.

முந்தைய பதிவு

jQuery உடன் DOM கையாளுதல்- நுட்பங்கள் மற்றும் எடுத்துக்காட்டுகள்

அடுத்த இடுகை