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 फाइल्स कॉपी करा .
    • Query UI तुमच्या प्रोजेक्टच्या CSS फोल्डरमध्ये j CSS फाईल्स कॉपी करा .
    • Query UI तुमच्या प्रोजेक्टच्या इमेज फोल्डरमध्ये j इमेज फाइल्स कॉपी करा .

  4. पायरी 4: JavaScript आणि 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. पायरी 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>

 

तुम्ही तुमच्या एचटीएमएल कोडमध्ये 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. तुम्ही हे घटक वापरू शकता आणि तुमच्या वेब पेजवर परस्परसंवादी आणि वापरकर्ता-अनुकूल इंटरफेस तयार करण्यासाठी त्यांना सानुकूलित करू शकता.