j Query UI اور یوزر انٹرفیس اجزاء- انضمام اور استعمال

j Query UI ایک طاقتور اور لچکدار JavaScript لائبریری ہے جو jQuery کے اوپر بنائی گئی ہے۔ یہ آپ کو استعمال کے لیے تیار اور حسب ضرورت یوزر انٹرفیس کے اجزاء فراہم کرتا ہے، جس سے انٹرایکٹو اور دلکش ویب پیجز اور ویب ایپلیکیشنز بنانا آسان ہوجاتا ہے۔

j کے ساتھ Query UI ، آپ بٹن، ڈیٹ پکرز، ڈائیلاگز، آٹوکمپلیٹس، سلائیڈرز، ٹیبز، پروگریس بارز اور ایکارڈینس جیسے اجزاء استعمال کر سکتے ہیں۔ یہ اجزاء ایک دوسرے کے ساتھ ڈیزائن اور ہم آہنگ ہیں، جو آپ کو لچکدار اور صارف دوست انٹرفیس بنانے کی اجازت دیتے ہیں جو صارفین کے ساتھ بغیر کسی رکاوٹ کے تعامل کرتے ہیں۔

j کو Query UI اپنے پروجیکٹ میں ضم کرنے کے لیے، ان مراحل پر عمل کریں۔

مرحلہ 1: jQuery اور j ڈاؤن لوڈ کریں۔ Query UI
- jQuery کی آفیشل ویب سائٹ( https://jquery.com/ ) پر جائیں اور jQuery کا تازہ ترین ورژن ڈاؤن لوڈ کریں۔
- j کی Query UI آفیشل ویب سائٹ( https://jqueryui.com/ ) پر جائیں اور j کا تازہ ترین ورژن ڈاؤن لوڈ کریں Query UI ۔
مرحلہ 2: فولڈر کا ڈھانچہ بنائیں
- اپنے پروجیکٹ کے لیے فولڈر کا ڈھانچہ بنائیں، بشمول JavaScript فائلوں، CSS، اور تصاویر کے لیے ڈائریکٹریز۔
مرحلہ 3: فائلوں کو کاپی کریں۔
- jQuery اور j Query UI فائلوں کو اپنے پروجیکٹ کے جاوا اسکرپٹ فولڈر میں کاپی کریں۔
- j Query UI CSS فائلوں کو اپنے پروجیکٹ کے CSS فولڈر میں کاپی کریں۔
- جے Query UI امیج فائلز کو اپنے پروجیکٹ کے امیجز فولڈر میں کاپی کریں۔
مرحلہ 4: جاوا اسکرپٹ اور سی ایس ایس فائلوں کو لنک کریں۔
- اپنے پروجیکٹ کی 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: 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>

اس بات کو یقینی بنائیں کہ آپ نے اپنے 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 ۔ آپ ان اجزاء کو استعمال کر سکتے ہیں اور اپنے ویب صفحہ پر انٹرایکٹو اور صارف دوست انٹرفیس بنانے کے لیے انہیں اپنی مرضی کے مطابق بنا سکتے ہیں۔

پچھلی پوسٹ

jQuery کے ساتھ DOM ہیرا پھیری- تکنیک اور مثالیں۔

اگلی پوسٹ

j Query UI اور یوزر انٹرفیس اجزاء- انضمام اور استعمال

j کو Query UI اپنے پروجیکٹ میں ضم کرنے کے لیے، ان مراحل پر عمل کریں۔

یہاں j کی طرف سے فراہم کردہ ہر یوزر انٹرفیس جزو کے لیے مثالوں کے ساتھ تفصیلی وضاحت ہے Query UI ۔

بٹن

تاریخ چننے والا

ڈائیلاگ

خود بخود مکمل

سلائیڈر

ٹیبز

ترقی بار

ایکارڈین

jQuery کے ساتھ DOM ہیرا پھیری- تکنیک اور مثالیں۔

jQuery کی اصلاح اور تخصیص- موثر ترقی کے لیے تکنیک

سیریز کی پوسٹ

مقبول ٹیگز

ٹاپ پوسٹس

نئی پوسٹ