close

j Query UI र प्रयोगकर्ता इन्टरफेस कम्पोनेन्टहरू- एकीकरण र उपयोग

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

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

 

Query UI तपाईंको परियोजनामा ​​j लाई एकीकृत गर्न, यी चरणहरू पालना गर्नुहोस्

  1. चरण 1: jQuery र j डाउनलोड गर्नुहोस् Query UI

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

  2. चरण 2: फोल्डर संरचना सिर्जना गर्नुहोस्

    • JavaScript फाइलहरू, CSS, र छविहरूका लागि निर्देशिकाहरू सहित तपाईंको परियोजनाको लागि फोल्डर संरचना सिर्जना गर्नुहोस्।

  3. चरण 3: फाइलहरू प्रतिलिपि गर्नुहोस्

    • Query UI तपाईंको परियोजनाको JavaScript फोल्डरमा jQuery र j फाइलहरू प्रतिलिपि गर्नुहोस् ।
    • j Query UI CSS फाइलहरूलाई तपाईंको परियोजनाको CSS फोल्डरमा प्रतिलिपि गर्नुहोस्।
    • Query UI तपाईंको परियोजनाको छवि फोल्डरमा j छवि फाइलहरू प्रतिलिपि गर्नुहोस् ।

  4. चरण 4: जाभास्क्रिप्ट र CSS फाइलहरू लिङ्क गर्नुहोस्

    • तपाईंको परियोजनाको HTML फाइलमा, <script> jQuery र j Query UI फाइलहरू लिङ्क गर्न ट्यागहरू थप्नुहोस्: 
      <script src="path/to/jquery.js"></script>  
<script src="path/to/jquery-ui.js"></script>  
​
    • <link> j Query UI CSS फाइल लिङ्क गर्न ट्यागहरू थप्नुहोस्: 
      <link rel="stylesheet" href="path/to/jquery-ui.css">  
​
  5. चरण 5: j Query UI कम्पोनेन्टहरू प्रयोग गर्नुहोस्
    • Query UI तपाईं अब आफ्नो परियोजनामा ​​j कम्पोनेन्टहरू प्रयोग गर्न तयार हुनुहुन्छ । आफ्नो JavaScript मा 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 । तपाइँ यी कम्पोनेन्टहरू प्रयोग गर्न सक्नुहुन्छ र तपाइँको वेब पृष्ठमा अन्तरक्रियात्मक र प्रयोगकर्ता-अनुकूल इन्टरफेसहरू सिर्जना गर्न अनुकूलित गर्न सक्नुहुन्छ।