j Query UI ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਅਤੇ ਲਚਕਦਾਰ JavaScript ਲਾਇਬ੍ਰੇਰੀ ਹੈ ਜੋ 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: ਫਾਈਲਾਂ ਦੀ ਨਕਲ ਕਰੋ
- jQuery ਅਤੇ j Query UI ਫਾਈਲਾਂ ਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੇ JavaScript ਫੋਲਡਰ ਵਿੱਚ ਕਾਪੀ ਕਰੋ।
- j Query UI CSS ਫਾਈਲਾਂ ਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੇ CSS ਫੋਲਡਰ ਵਿੱਚ ਕਾਪੀ ਕਰੋ।
- j Query UI ਚਿੱਤਰ ਫਾਈਲਾਂ ਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੇ ਚਿੱਤਰ ਫੋਲਡਰ ਵਿੱਚ ਕਾਪੀ ਕਰੋ।
-
ਕਦਮ 4: JavaScript ਅਤੇ CSS ਫਾਈਲਾਂ ਨੂੰ ਲਿੰਕ ਕਰੋ
- ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀ HTML ਫਾਈਲ ਵਿੱਚ,
<script>
jQuery ਅਤੇ j Query UI ਫਾਈਲਾਂ ਨੂੰ ਲਿੰਕ ਕਰਨ ਲਈ ਟੈਗ ਸ਼ਾਮਲ ਕਰੋ: -
<link>
j Query UI CSS ਫਾਈਲ ਨੂੰ ਲਿੰਕ ਕਰਨ ਲਈ ਟੈਗ ਸ਼ਾਮਲ ਕਰੋ:
- ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀ HTML ਫਾਈਲ ਵਿੱਚ,
- ਕਦਮ 5: ਜੇ Query UI ਕੰਪੋਨੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰੋ
-
- ਤੁਸੀਂ ਹੁਣ Query UI ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ j ਭਾਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ। ਆਪਣੀ JavaScript ਵਿੱਚ j Query UI ਕਲਾਸਾਂ ਅਤੇ ਵਿਧੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ ਸੰਬੰਧਿਤ CSS ਕਲਾਸਾਂ ਨੂੰ ਲਾਗੂ ਕਰੋ।
ਉਦਾਹਰਨ:
- ਤੁਸੀਂ ਹੁਣ Query UI ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ j ਭਾਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ। ਆਪਣੀ JavaScript ਵਿੱਚ j Query UI ਕਲਾਸਾਂ ਅਤੇ ਵਿਧੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ ਸੰਬੰਧਿਤ CSS ਕਲਾਸਾਂ ਨੂੰ ਲਾਗੂ ਕਰੋ।
ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਤੁਸੀਂ ਆਪਣੇ HTML ਕੋਡ ਵਿੱਚ jQuery ਅਤੇ j ਫਾਈਲਾਂ ਲਈ ਫਾਈਲ ਮਾਰਗਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਨਿਰਧਾਰਤ ਕੀਤਾ ਹੈ Query UI, ਅਤੇ ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਸਫਲਤਾਪੂਰਵਕ j ਨੂੰ ਏਕੀਕ੍ਰਿਤ ਕਰੇਗਾ Query UI, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਇਸਦੇ ਭਾਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕੋਗੇ।
ਇੱਥੇ j ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੇ ਹਰੇਕ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਹਿੱਸੇ ਲਈ ਉਦਾਹਰਣਾਂ ਦੇ ਨਾਲ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਵਿਆਖਿਆ ਹੈ Query UI:
ਬਟਨ
ਰੇਡੀਓ ਬਟਨਾਂ, ਚੈਕਬਾਕਸਾਂ, ਅਤੇ ਹੋਵਰ/ਐਕਟਿਵ ਪ੍ਰਭਾਵਾਂ ਵਰਗੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਨਾਲ, ਵੈੱਬ ਪੰਨਿਆਂ 'ਤੇ ਇੰਟਰਐਕਟਿਵ ਬਟਨ ਬਣਾਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
ਡੇਟਪਿਕਰ
ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਤਿਆਰ ਕੀਤੇ ਕੈਲੰਡਰ ਤੋਂ ਤਾਰੀਖਾਂ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ ਇੰਟਰਫੇਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਵੱਖ-ਵੱਖ ਫਾਰਮੈਟਾਂ ਵਿੱਚ ਤਾਰੀਖਾਂ ਦੀ ਆਸਾਨੀ ਨਾਲ ਚੋਣ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਮਿਲਦੀ ਹੈ।
ਡਾਇਲਾਗ
ਅਨੁਕੂਲਿਤ ਪੌਪਅੱਪ ਡਾਇਲਾਗ ਬਾਕਸ ਬਣਾਉਣ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਸਮੱਗਰੀ, ਬਟਨ ਅਤੇ ਓਪਨ/ਕਲੋਜ਼ ਪ੍ਰਭਾਵ ਸ਼ਾਮਲ ਹੋ ਸਕਦੇ ਹਨ।
ਸਵੈ-ਮੁਕੰਮਲ
ਉਪਲਬਧ ਡੇਟਾ ਜਾਂ ਰਿਮੋਟ ਡੇਟਾ ਸਰੋਤਾਂ ਤੋਂ ਸੁਝਾਵਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹੋਏ, ਟੈਕਸਟ ਫੀਲਡ ਵਿੱਚ ਉਪਭੋਗਤਾ ਟਾਈਪ ਕਰਦੇ ਹੋਏ ਸਵੈ-ਸੰਪੂਰਨਤਾ ਕਾਰਜਕੁਸ਼ਲਤਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
ਸਲਾਈਡਰ
ਮੁੱਲਾਂ ਦੀ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਰੇਂਜ ਤੋਂ ਮੁੱਲਾਂ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਸਲਾਈਡਰ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
ਟੈਬਸ
ਟੈਬਡ ਸਮੱਗਰੀ ਦੀ ਰਚਨਾ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ, ਸਮੱਗਰੀ ਨੂੰ ਵੱਖ-ਵੱਖ ਭਾਗਾਂ ਵਿੱਚ ਵੰਡਦਾ ਹੈ, ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਵੱਖ-ਵੱਖ ਭਾਗਾਂ ਵਿੱਚ ਬਦਲਣਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ।
ਪ੍ਰਗਤੀ ਪੱਟੀ
ਕੀਤੇ ਜਾ ਰਹੇ ਕਾਰਜ ਦੀ ਪ੍ਰਗਤੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਇੱਕ ਗ੍ਰਾਫਿਕਲ ਪ੍ਰਗਤੀ ਪੱਟੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
ਅਕਾਰਡੀਅਨ
ਸਮਗਰੀ ਦੇ ਸਿਰਫ ਇੱਕ ਹਿੱਸੇ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਅਤੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਮਗਰੀ ਦਾ ਵਿਸਤਾਰ ਕਰਨ ਜਾਂ ਸਮੇਟਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹੋਏ, ਸਮੇਟਣਯੋਗ ਤੱਤਾਂ ਨੂੰ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
ਇਹ j ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੇ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਭਾਗਾਂ ਦੀਆਂ ਕੁਝ ਉਦਾਹਰਣਾਂ ਹਨ Query UI । ਤੁਸੀਂ ਇਹਨਾਂ ਭਾਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਵੈਬ ਪੇਜ 'ਤੇ ਇੰਟਰਐਕਟਿਵ ਅਤੇ ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ।