फाउंडेशन - जावास्क्रिप्ट उपयोगिताएँ

फ़ाउंडेशन में जावास्क्रिप्ट उपयोगिताओं को शामिल किया गया है जो कि आम कार्यात्मकताओं को जोड़ने के लिए उपयोग की जाती हैं। यह बहुत उपयोगी और उपयोग में आसान है। यह जावास्क्रिप्ट यूटिलिटीज लाइब्रेरी आपके फ़ोल्डर में पाया जा सकता है Your_folder_name / node_modules / नींव-साइट / js

डिब्बा

• Foundation.Box लाइब्रेरी में कुछ तरीके हैं।

• js/foundation.util.box.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

• या तो jQuery ऑब्जेक्ट या सादे जावास्क्रिप्ट तत्व दोनों तरीकों से पारित किए जा सकते हैं।

var dims = Foundation.Box.GetDimensions(element);

लौटाई गई वस्तु तत्व के आयाम को निर्दिष्ट करती है -

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },
   
   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },
   
   windowDims: {
      height: ...
   }
}

• समारोह ImNotTouchingYou शामिल है।

• पारित तत्व के आधार पर, एक बूलियन मान लौटाया जाता है, जो या तो खिड़की के किनारे या वैकल्पिक या एक मूल तत्व के साथ संघर्ष होता है।

• नीचे दिए गए लाइन में दो विकल्प दिए गए हैं अर्थात लेफ्टएंडराइट, टॉपएंडबॉटमऑनली का उपयोग केवल एक धुरी पर टकराव की पहचान करने के लिए किया जाता है।

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

कीबोर्ड

• Foundation.Keyboard में कई विधियाँ हैं , जो कीबोर्ड इवेंट इंटरैक्शन को आसान बनाने में मदद करती हैं।

• js/foundation.util.keyboard.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

• ऑब्जेक्ट Foundation.Keyboard.keys में कुंजी / मान जोड़े होते हैं, जो कुंजी का उपयोग फ्रेमवर्क में अधिक बार किया जाता है।

• जब भी कुंजी को दबाया जाता है तब Foundation.Keyboard.parseKey को एक स्ट्रिंग प्राप्त करने के लिए कहा जाता है। यह आपके स्वयं के कीबोर्ड इनपुट को प्रबंधित करने में मदद करता है।

निम्नलिखित कोड का उपयोग दिए गए $ तत्व के भीतर सभी ध्यान देने योग्य तत्वों को खोजने के लिए किया जाता है । इसलिए, आपके द्वारा किसी फ़ंक्शन और चयनकर्ता को लिखने की कोई आवश्यकता नहीं है।

var focusable = Foundation.Keyboard.findFocusable($('#content'));

• HandleKey समारोह इस पुस्तकालय का एक मुख्य कार्य है।

• इस विधि का उपयोग कीबोर्ड घटना को संभालने के लिए किया जाता है; जब भी किसी प्लगइन को उपयोगिता के साथ पंजीकृत किया जाता है तो उसे कॉल किया जा सकता है।

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

Foundation.Keyboard.register समारोह कहा जा सकता है जब आप अपने स्वयं कुंजी बाइंडिंग का उपयोग करना चाहते हैं।

MediaQuery

• MediaQuery लाइब्रेरी सभी उत्तरदायी सीएसएस तकनीक की एक रीढ़ है।

• js/foundation.util.mediaQuery.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

• Foundation.MediaQuery.atLeast ( 'बड़े') यदि स्क्रीन विस्तृत एक ब्रेकपाइंट के रूप में के रूप में कम से कम है की जाँच करने के लिए किया जाता है।

• Foundation.MediaQuery.get ( 'मध्यम') एक ब्रेकप्वाइंट का मीडिया क्वेरी हो जाता है।

• Foundation.MediaQuery.queries मीडिया क्वेरी की एक सरणी, फाउंडेशन breakpoints के लिए उपयोग करता है।

• Foundation.MediaQuery.current वर्तमान ब्रेकप्वाइंट आकार की एक श्रृंखला है।

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

निम्न कोड विंडो पर मीडिया क्वेरी परिवर्तन को प्रसारित करता है।

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

गति और चाल

• Foundation.Motion जावास्क्रिप्ट मोशन यूआई लाइब्रेरी के समान है, जो फाउंडेशन 6 में शामिल है। इसका उपयोग कस्टम सीएसएस बदलाव और एनिमेशन बनाने के लिए किया जाता है।

• js/foundation.util.motion.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

• Foundation.Move का उपयोग CSS3 समर्थित एनीमेशन को सरल और सुरुचिपूर्ण बनाने के लिए किया जाता है।

• requestAnimationFrame();विधि ब्राउज़र को एक एनीमेशन करने के लिए कहता है; यह अनुरोध करता है कि ब्राउज़र को अगला रिपीट करने से पहले आपके एनीमेशन फ़ंक्शन को कॉल किया जाए।

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

जब एनीमेशन पूरा हो जाता है , तब समाप्त हो जाता है।

टाइमर और छवियाँ भरी हुई

ऑर्बिट फंक्शन टाइमर और लोडेड इमेज दोनों का उपयोग करता है। js/foundation.util.timerAndImageLoader.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

जब छवि पूरी तरह से लोड हो जाती है तो छवि-लोड की गई विधि आपके jQuery संग्रह में कॉलबैक फ़ंक्शन चलाती है।

Foundation.onImagesLoaded($images, callback);

टच

• विधियों का उपयोग छद्म ड्रैग घटनाओं को जोड़ने और तत्वों को स्वाइप करने के लिए किया जाता है।

• js/foundation.util.touch.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

• AddTouch विधि मोबाइल उपकरणों के लिए स्लाइडर प्लगइन में घटनाओं को छूने के लिए बाँध तत्वों के लिए प्रयोग किया जाता है।

• SpotSwipe विधि मोबाइल उपकरणों के लिए ऑर्बिट प्लगइन में कड़ी चोट घटनाओं के लिए तत्वों बांधता है।

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

ट्रिगर्स

• यह चयनित तत्वों के लिए निर्दिष्ट घटना को ट्रिगर करता है।

• js/foundation.util.triggers.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

• ट्रिगर कई फाउंडेशन प्लगइन में उपयोग किए जाते हैं।

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

इस लाइब्रेरी में निम्नलिखित दो विधियों का उपयोग किया जाता है, अर्थात आकार बदलना और स्क्रॉल करना।

• आकार () जब एक आकार बदलने घटना होती विधि आकार घटना से चलाता है।

• पुस्तक () जब एक स्क्रॉल घटना होती विधि पुस्तक घटना से चलाता है।

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

कई तरह का

• फाउंडेशन में मुख्य पुस्तकालय में कुछ विशेषताएं हैं, जिनका उपयोग कई स्थानों पर किया जाता है।

• js/foundation.core.js स्क्रिप्ट फ़ाइल नाम है, जिसे कोड लिखते समय शामिल किया जा सकता है।

• Foundation.GetYoDigits ([संख्या, नाम स्थान]) नामस्थान के साथ एक यादृच्छिक आधार -36 यूआईडी देता है। यह डिफ़ॉल्ट रूप से 6 वर्णों की स्ट्रिंग लंबाई देता है।

• Foundation.getFnName (fn) एक जावास्क्रिप्ट फ़ंक्शन नाम देता है।

• नींव संक्रमण तब होता है जब CSS संक्रमण पूरा हो जाता है।