close

जे Query UI और उपयोगकर्ता इंटरफ़ेस घटक- एकीकरण और उपयोग

j Query UI एक शक्तिशाली और लचीली जावास्क्रिप्ट लाइब्रेरी है जो jQuery के शीर्ष पर बनाई गई है। यह आपको उपयोग के लिए तैयार और अनुकूलन योग्य उपयोगकर्ता इंटरफ़ेस घटक प्रदान करता है, जिससे इंटरैक्टिव और आकर्षक वेब पेज और वेब एप्लिकेशन बनाना आसान हो जाता है।

j के साथ Query UI, आप बटन, डेटपिकर, डायलॉग, स्वत: पूर्ण, स्लाइडर, टैब, प्रोग्रेसबार और अकॉर्डियन जैसे घटकों का उपयोग कर सकते हैं। ये घटक एक-दूसरे के साथ डिज़ाइन और संगत हैं, जो आपको लचीले और उपयोगकर्ता-अनुकूल इंटरफेस बनाने की अनुमति देते हैं जो उपयोगकर्ताओं के साथ सहजता से बातचीत करते हैं।

 

j को Query UI अपने प्रोजेक्ट में एकीकृत करने के लिए, इन चरणों का पालन करें

  1. चरण 1: jQuery और j डाउनलोड करें Query UI

    • jQuery की आधिकारिक वेबसाइट( https://jquery.com/ ) पर जाएं और jQuery का नवीनतम संस्करण डाउनलोड करें।
    • जे Query UI आधिकारिक वेबसाइट( https://jqueryui.com/ ) पर जाएं और जे का नवीनतम संस्करण डाउनलोड करें Query UI ।

  2. चरण 2: फ़ोल्डर संरचना बनाएं

    • अपने प्रोजेक्ट के लिए एक फ़ोल्डर संरचना बनाएं, जिसमें जावास्क्रिप्ट फ़ाइलों, सीएसएस और छवियों के लिए निर्देशिकाएं शामिल हों।

  3. चरण 3: फ़ाइलें कॉपी करें

    • jQuery और j Query UI फ़ाइलों को अपने प्रोजेक्ट के जावास्क्रिप्ट फ़ोल्डर में कॉपी करें।
    • j Query UI CSS फ़ाइलों को अपने प्रोजेक्ट के CSS फ़ोल्डर में कॉपी करें।
    • j Query UI छवि फ़ाइलों को अपने प्रोजेक्ट के छवि फ़ोल्डर में कॉपी करें।

  4. चरण 4: जावास्क्रिप्ट और सीएसएस फाइलों को लिंक करें

    • अपने प्रोजेक्ट की HTML फ़ाइल में, <script> jQuery और j Query UI फ़ाइलों को लिंक करने के लिए टैग जोड़ें: 
      <script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
​
    • <link> जे Query UI सीएसएस फ़ाइल को लिंक करने के लिए टैग जोड़ें: 
      <link rel="stylesheet" href="path/to/jquery-ui.css">  
​
  5. चरण 5: जे Query UI घटकों का उपयोग करें
    • अब आप Query UI अपने प्रोजेक्ट में j घटकों का उपयोग करने के लिए तैयार हैं। अपने जावास्क्रिप्ट में जे Query UI कक्षाओं और विधियों का उपयोग करें और इंटरैक्टिव यूजर इंटरफेस बनाने के लिए संबंधित सीएसएस कक्षाएं लागू करें।

      उदाहरण:

      <!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>

 

सुनिश्चित करें कि आपने अपने HTML कोड में jQuery और j फ़ाइलों के लिए फ़ाइल पथ सही ढंग से निर्दिष्ट किए हैं Query UI, और आपका प्रोजेक्ट सफलतापूर्वक 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 । आप इन घटकों का उपयोग कर सकते हैं और अपने वेब पेज पर इंटरैक्टिव और उपयोगकर्ता के अनुकूल इंटरफेस बनाने के लिए उन्हें अनुकूलित कर सकते हैं।