סניפטים של jQuery

תיאור:

פעמים רבות נרצה להחזיר את הערך בשדה טקסט מסוים אשר הוקלד / הודבק על ידי המשתמש באתר שלנו כדי לעשות שימוש במידע זה. הסניפט הבא הוא דרך קלה להחזיר את הערך הקיים בתוך שדה קלט מסוג טקסט כלומר input טקסט סטנדרטי.

first קוד:

// אופציה א
var thevalue = $('input#example_id').val();

// אופציה ב
var thevalue = $('input#example_id').attr('value');

second קוד:

<input type="text" name="example_input" id="example_id'" value="אני הערך שחזר!" />

תיאור:

עוד סניפט קצר שעוזר לנו להחזיר מידע מתוך שדה טקסט רחב כלומר textarea. בשונה משדה טקסט רגיל אנו נשמיט את הקידומת input וסיימנו... שימו לב כי קיימות שתי אפשרויות - המועדפת עלי היא השנייה בשני המקרים - גם כאשר מדובר על שדה טקסט רגיל כלומר input וגם כאשר מדובר על שדה טקסט רחב כלומר textarea

first קוד:

// אופציה א
var thevalue = $('#example_id').val();
 
// אופציה ב
var thevalue = $('#example_id').attr('value');

second קוד:

<textarea name="example_id" id="example_id" cols="30" rows="10">אני הערך אשר יחזור

תיאור:

פעמים רבות נבקש לקבל משתנים אותם נשלח דרך שורת הכתובת של עמוד מסוים כדי לספק למשתמשים שונים מידע מוכן בצורה שונה. הפונקציה הבאה מאפשרת לנו לעשות זאת בצורה קלה.

first קוד:

// ראשית נטמיע את הפונקציות הבאות
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

// כעת אפשר לקבל את המשתנים בשורת הURL
var myname = getUrlVars()["myname"];
var mysite = getUrlVars()["mysite"];

second קוד:

https://www.example.com/index.php?myname=שגיב SEO&mysite=sagive.co.il

תיאור:

הסניפט הבא שנבדק ונלעס יעזור לנו להחזיר את הבחירה של הגולש בשדה מסוג Select כלומר כאשר אנו בוחרים משהוא בשדה מסוג Select אנו צריכים לשאול בעזרת jQuery מה Selected וכך נוכל לעשות שימוש בערך הנבחר.

first קוד:

var selected_value = $('select#select_id option:selected').val(),

second קוד:

<select name="exmapleSelect" id="select_id">
	<option value="example-one">ערך לדוגמה 1</option>
	<option value="example-two">ערך לדוגמה 2</option>
	<option value="example-three">ערך לדוגמה 3</option>
</select>

תיאור:

הסניפט הבא יעזור לנו להחזיר את הערך הנבחר (כפתור הרדיו עליו המשתמש לחץ) בתוך סדרת כפתורי רדיו בהם עושים שימוש נפוץ בטפסים בעזרת jQuery.

first קוד:

var selected_value = $('[name=radio_group_name]:checked').val();

second קוד:

<input type="radio" name="radio_group_name" id="radio_one" />
<input type="radio" name="radio_group_name" id="radio_two" />
<input type="radio" name="radio_group_name" id="radio_three" />

תיאור:

הסניפט הקצר הבא מאפשר לאפס שדה קלט רגיל / שדה טקסט פשוט. פשוט ולעניין ושימושי כמעט בכל טופס בו אתם מאפשרים לגולשים להגיש פנייה או טופס מסוג אחר

first קוד:

$('div#someForm').find('input#exampleField').val('');

תיאור:

הסניפט / פקודה הבאה עוזרת לאפס שדה טקסט (textarea) בצורה קלה ומהירה. זאת פקודה שימושית במיוחד לאלו ביניכם אשר מתשמשים בטפסים בהם קיים גם קוד ג'אווה סקריפט / jQuery - קצר ושימושי.

first קוד:

$('div#someForm').find('#exampleTxtArea').val('');

תיאור:

הסניפט הבא עוזר לאפס שדה SELECT בצורה הנכונה! מה שהוא עושה הוא לבחור את השדה הראשון בשדה Select שהוא לרוב שדה נטול ערך אשר נועד רק לייצג את הבחירה. זאת לעומת "prop('selectedIndex',0)" אשר מאפס שדה Select ומציג ערך טקסט ריק בשורה הראשונה.

first קוד:

$('div#someForm').find('#exampleSelect option[value=""]').attr('selected','selected');

תיאור:

פעמים רבות נרצה לשנות טקסט מסוים לפני שאנו מגישים אותו בטופס או לפני שאנו מחזירים אותו לגולש למטרות תצוגה או התאמה של הקוד... בדוגמה הבאה אני מדגים את משנים מחרוזת טקסט בjQuery בקלות! הדוגמה היא שינוי של כתובת אתר לכתובת אתר עם https:// לפניה.

first קוד:

var url = 'www.example.com';
var fixed_url = url.replace('www.', 'https://www.');

תיאור:

הסניפט הבא הוא תוצאה של חיפוש אחר פתרון עבור אחזור מידע / משתנים מתוך הURL... כאשר ניסיתי לאחזר משתנים מתוך הURL אשר כללו מחרוזות בעברית נתקלתי בבעיית קידוד וקיבלתי תווים הזויים שאנו מכירים בדומיינים בעברית כמו לדוגמה המחרוזת (%u05E9%u05DC%u05D5%u05DD) אשר משמעותה "שלום". בעזרת הפונקציה הבאה בjavascript תוכלו לבצע המרה של תווים אלו חזרה לעברית!

first קוד:

// ראשית הוסיפו את הפונקציה הבאה
function decode(str) {
     return decodeURIComponent(str.replace(/\+/g,  " "));
}

// כעת תוכלו להמיר מחרוזת בצורה כזאת
var hebrew = decode('%u05E9%u05DC%u05D5%u05DD']);

// תוצאה
var hebrew = 'שלום';

תיאור:

פונקציה מעולה וכל הכבוד ליוצרים שלה (ראו קישור מצורף למקור) אשר עוזרת להחליף תווים במחרוזת טקסט / HTML בתוך Javascript או בjQuery. בשונה מreplace היא מחליפה את המחרוזת לכל אורך הטקסט ולא רק פעם אחת ולכן היא שימושית במיוחד!

first קוד:

function str_replace (search, replace, subject, count) { var i = 0, j = 0, temp = ", repl = ", sl = 0, fl = 0, f = [].concat(search), r = [].concat(replace), s = subject, ra = Object.prototype.toString.call(r) === '[object Array]', sa = Object.prototype.toString.call(s) === '[object Array]'; s = [].concat(s); if (count) { this.window[count] = 0; }

for (i = 0, sl = s.length; i < sl; i++) { if (s[i] === '') { continue; } for (j = 0, fl = f.length; j < fl; j++) { temp = s[i] + ''; repl = ra ? (r[j] !== undefined ? r[j] : '') : r[0]; s[i] = (temp).split(f[j]).join(repl); if (count && s[i] !== temp) { this.window[count] += (temp.length - s[i].length) / f[j].length; } } } return sa ? s : s[0]; } [/js]

תיאור:

פונקציה שימושית להחלפה מהירה של טקסט בתוך מחרוזת טקסט אחרת (את כל החזרות של אותה מחרוזת טקסט). שימושי ומהיר וקצת יותר קריא וקצר מהפונקציה המקבילה לה כאן למעלה.

first קוד:

function replaceSubstring(inSource, inToReplace, inReplaceWith) {

  var outString = inSource;
  while (true) {
	var idx = outString.indexOf(inToReplace);
	if (idx == -1) {
	  break;
	}
	outString = outString.substring(0, idx) + inReplaceWith +
	  outString.substring(idx + inToReplace.length);
  }
  return outString;

}

תיאור:

הסניפט הבא שימושי במיוחד לאלו שכבר מרגישים בנוח עם כתיבת לולאות בג'אווה סקריפט / jQuery ורוצים לדעת כמה אלמנטים יש בתוך מיכל (לדוגמה בתוך טבלה או בתוך DIV) כדי לעשות את החשבון לקל יותר ולהתאים (לדוגמה) את התצוגה או התוצאה למספר שחזר. בדוגמה הבאה אני סופר כמה שדות קלט (input) יש עם קלאס מסוים class... ועושה זאת בשורת קוד אחת בצורה מהירה וקלה להבנה.

first קוד:

var how_many = $(':input.someclass').length;

// התוצאה בכפוף לקוד HTML המוצג כאן תהיה 3

second קוד:

<input type="text" name="field1" id="field1" class="someclass" />
<input type="text" name="field2" id="field2" class="someclass" />
<input type="text" name="field3" id="field3" class="othereclass" />
<input type="text" name="field4" id="field4" class="someclass" />
<input type="text" name="field5" id="field5" class="othereclass" />

תיאור:

פונקציה שימושית מאוד שמחזירה מספר רנדומלי בין שני מספרים בעזרת פונקציה פשוטה של Javascript. פשוט הטמיעו את הפונקציה והשתמשו בה היכן שתרצו בקוד.

first קוד:

function random(min, max, decimal, exclude) {
    // if no min and max is passed, return true or false
    if (arguments.length < 2) return(Math.random() >= 0.5);

    // calc decimal multiplier
    var factor = 1, result;
    if (typeof decimal === "number") {
        factor = Math.pow(10, decimal);
    }

    // loop until we get a value that isn't our exclude value
    do {
        result = Math.random() * (max - min) + min;
        result = Math.round(result * factor) / factor;
    } while (result === exclude);
    return result;
}

// USAGE:
random(4, 10, 0, 5);

תיאור:

שורת קוד קצרה ויעילה אשר תעזור לכם לנקות ערכים / מפתחות ערכים ריקים בתוך מערך קיים! שימו לב כי פונקציה זאת קיימת רק מג'אווה סקריפט גרסה 1.6.

first קוד:

exampleArray = exampleArray .filter(function(n){return n});;

תיאור:

פקודה קצרה ומהירה שמאפשרת להציג את כל הערכים בתוך מערך מסוים. שימו לב כי שימוש בפקודה זאת לא מגלה לכם אם יש או אין ערכים ריקים / מפתחות ריקים בתוך המערך (ראו פונקציה קודמת לצפייה במערך המלא). בנוסף, הסניפט הבא ברצף יאפשר לכם לנקות ערכים ריקים ממערך כך שכיסינו את כל הכיוונים.

first קוד:

alert(exmapleArray.join('\n'));

תיאור:

סניפט קצר ושימושי שמאפשר החלפה של האתר אשר מוצג בתוך iFrame על ידי לחיצה על פריט ברשימה... אנו עושים זאת על ידי קביעת הערך של כל פריט בתור כתובת לאתר מסוים (ראו את הדוגמה המצורפת).

first קוד:

<script type="text/javascript">
// GRAB CLICK AND ASSIGN TO IFRAME
jQuery(function($){
	$('div#loadFrame').click(function() {
		var framesrc = $(this).attr('srcval');
		var iframeid = $('iframe#testerframe');
		$('iframe#testerframe').attr('src', framesrc);
	});
});
</script>

second קוד:

<div>
<ul>
	<li><div id="loadFrame" srcval="https://sagive.co.il">שגיב SEO קידום אתרים בגוגל</a></li>
	<li><div id="loadFrame" srcval="https://sagive.co.il/forum/">פורום קידום אתרים</a></li>
	<li><div id="loadFrame" srcval="https://moz.com/community/q">שאלות ותשובות בSeomoz</a></li>
	<li><div id="loadFrame" srcval="https://forums.seochat.com/">פורומים למקדמי אתרים בseochat</a></li>
	<li><div id="loadFrame" srcval="https://seoforums.org/">פורומים למקדמי אתרים SeoForums</a></li>
</ul>
</div>
<iframe src="" id="testerframe" frameborder="0" style="height: 500px; width: 100%;"></iframe>

תיאור:

הסניפט הבא הוא האחראי לשינויים בצורה, ברקע ואפילו בתמונת הרקע שאנו רואים בשדות קלט (בטפסים רבים). דוגמה טובה היא טופס בו אנו מקלידים שם ולאחר מכן השדה של השם הופך לירוק דהיינו הטקסט ארוך מספיק או כל התניה אחרת שקבע מנהל האתר. כלומר הסניפט מגיב לשינוי בתוך שדה הקלט עם פקודה נלווית. בדוגמה המצורפת הרקע של שדה הקלט הופך לירוק כדי להמחיש שהערך תקין.

first קוד:

jQuery(function($){

	// TURN FIELDS TO GREEN ON CHANGE //////////////////////////
	$('input#senderName').change(function() {
		var sender_name = $('input#senderName').val().length;
		if(sender_name > 4) {
			$('input#senderName').css('background', '#DEF0CC');
		}
	});
});

second קוד:

<input type="text" id="senderName" />

תיאור:

סניפט מ-ע-ו-ל-ה שמאפשר פתרון לבעיה ותיקה בימים! בעזרת סניפט זה תוכלו לתת לכל הפריטים בתפריט עליון (לדוגמה, יכול להיות כל תפריט) רוחב זהה בצורה אוטומטית על ידי ספירת כמות הפריטים באותו תפריט וחלוקה למאה וכל זאת ללא מגע אדם!

first קוד:

jQuery(function($){
	var itemscount = $("#top-menu li").size();
	var percentage = 100 / itemscount;
	
	$("#top-menu > li").css('width', percentage+'%');
});

second קוד:

<ul id="top_menu">
	<li>first item</li>
	<li>second item</li>
	<li>third item</li>
	<li>fourth item</li>
	<li>last item</li>
</ul>

תיאור:

פונקציה פשוטה שמאפשרת לנו לקשור פעולה כלשהי למעבר עכבר מעל DIV מסוים (או כל אלמנט אחר) וגם להגיב כאשר העכבר נע החוצה מאיזור המטרה.

first קוד:

$("div#example").hover(
  function () {
   $('div.tooltip').slideToggle();
  },
  function () {
   $('div.tooltip').slideToggle();
  }
);

second קוד:

<div id="example">רחף מעלי</div>
<div class="tooltip" style="display: none;">ואני פתאום מופיע!</div>

תיאור:

סניפט / הדגמה נחמדה מאוד שעוזרת להציג קופסת אוהדים של פייסבוק בצורה מקורית ומדליקה. פשוט לוחצים על התמונה ומופיעה קופסת אוהדים של הדף שלנו בפייסבוק (פרגנו עם LIKE אם אהבתם)

first קוד:

$('div#buttonDiv').click(function() {
    $('div#myLikeBox').slideToggle();
});

second קוד:

<div class="container">
    <div id="buttonDiv">
<img src="https://farm6.staticflickr.com/5524/9215736042_4361cb091a.jpg" atl="Share the love">
</div>
<div id="myLikeBox" class="dnone">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2F%D7%A9%D7%92%D7%99%D7%91-%D7%A7%D7%99%D7%93%D7%95%D7%9D-%D7%90%D7%AA%D7%A8%D7%99%D7%9D%2F367441549333&width=350&height=290&show_faces=true&colorscheme=light&stream=false&show_border=true&header=true&appId=496531247081941" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:290px;" allowTransparency="true"></iframe>
</div>
</div>

third קוד:

.dnone {display: none;}
.container {width: 350px; margin: 0 auto;}
#buttonDiv {margin-left: 10px; margin: 0px;}
#myLikeBox {margin-top: -10px;}

תיאור:

סניפט מעולה שעוזר להציג סיבות חיוביות למה כן ולמה לא לאיזושהיא שאלה (לבחירתכם). ממש קל להתאים לצרכים שלכם ועם 4 שורות קוד בjQuery קל ומהיר. אפשר כמובן לנצל את הסקריפט להציג מידע שונה ולשנות את המיקום של המידע. שימו לב יש לקנות את התמונות בדוגמה החיה כיוון שהן דורשות רשיון משתמש.

first קוד:

jQuery(function ($) {
	$('.thumbsupImg').on('click', function() {
		$('#thumbsup').slideToggle(200);
        $('#thumbsdown').slideUp(100);
    })
	$('.thumbsdownImg').on('click', function() {
		$('#thumbsdown').slideToggle(200);
        $('#thumbsup').slideUp(100);
    })
});

second קוד:

<div class="container">
	<div class="thumbs fleft">
		<div width="76px"><a href="#" class="thumbsupImg"><img src="https://farm6.staticflickr.com/5331/9213587711_2722faa215_o.jpg" alt="Thumbs Down"></a></div>
		<div width="76px"><a href="#" class="thumbsdownImg"><img src="https://farm4.staticflickr.com/3710/9213587763_873ccf77cd_o.jpg" alt="Thumbs Down" /></a></div>
	</div>
	<div class="data fleft">
		<div id="thumbsup" class="dnone reasons">
			<ul>
				<li>Just cuz' its cool!</li>
				<li>Since your already here</li>
				<li>Why not actually</li>
			</ul>
		</div>
		<div id="thumbsdown" class="dnone reasons">
			<ul>
				<li>You already got this</li>
				<li>You really must go</li>
				<li>You'd rather play starcraft.</li>
			</ul>
		</div>
	</div>
</div>

third קוד:

.container {margin: 10%;}
.thumbs {border: 1px solid #eee; width: 90px;}
.reasons {padding: 10px 20px 10px 10px; background: #f3f3f3;}
.dnone {display: none;}
.fleft {float: left;}

תיאור:

קיימות מספר שיטות להציג את הערכים אשר נמצאים בתוך מערך אבל ממש לאחרונה חיפשתי דרך להציג מערך כמו שהוא מוצג בשפת PHP למטרות debugging (ניפוי שגיאות) וייצרתי את הפונקציה הבאה בעזרת מידע משלים ברשת. אז הנה - פונקציה פשוטה שתכתוב למסך / לדף את המערך בצורתו המקורית!

first קוד:

function print_array(arr) {
	for(var i=0;i<arr.length;i++){
	document.write("<b>arr["+i+"] is </b>=>"+arr[i]+"<br>");
	}
}

// הדגמה של שימוש בפונקציה
arrayPrint(exampleArray);

תיאור:

סניפט שימושי אשר נכתב בjavascript ולא דווקא בjquery ומונע מאתרים חיצוניים להציג את האתר שלכם בתוך iFrame. כל ניסיון להציג את האתר שלכם באיפריים יוביל לכל שהאתר שלכם יטען מחוץ לiFrame וכך ימנע "גניבה" של האתר שלכם או הצגה שלו בתוך iFrame. קחו בחשבון שזה עלול להיות בעוכריכם כיוון שאותו אדם אשר בחר להציג את האתר שלכם עלול לוותר על הצגת האתר שלכם לגמרי אז לשיקולכם. לטעמי זה שימושי. בנוסף אתם יכולים לכלול סקריפט קטן זה רק בדף הבית וכך לאפשר הצגה של עמודים פנימיים בתוך iFrame.

first קוד:

if ( window.self !== window.top ) {
    window.top.location.href=window.location.href;
}

תיאור:

סניפט ממש קצרצר בגודל חצי שורה אבל שימושי (ונפוץ בשימוש) אשר מאפשר לבדוק אם אלמנט מסוים כלומר DIV או שדה טקסט או כל אלמנט אחר חבוי כלומר עם חל עליו display:none.

first קוד:

$(element).is(":visible");

// איך משתמשים if($(element).is(":visible")) { alert('אתה יכול לראות את זה!'); }

תיאור:

סניפט שימושי לבוני אתרים שיעזור לכם להמיר קוד HEX (קוד צבע סטנדרטי) של בניית אתרים עם קוד RGBA בקלות ובעזרת ג'אווה סקריפט. צירפתי את הקוד המלא של הדוגמה כמו גם דוגמה חיה כך שזה צריך להיות קל ליישום. כלי שימושי בנושא ניתן למצוא כאן: [lists style="minidoc" classes=""]

• כלי להרת צבעים: קוד HEX ל RGBA ולהפך

[/lists]

first קוד:

function convertHex(hex,opacity){
    hex = hex.replace('#','');
    r = parseInt(hex.substring(0,2), 16);
    g = parseInt(hex.substring(2,4), 16);
    b = parseInt(hex.substring(4,6), 16);

    result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
    return result;
}

// דוגמה לשימוש
var result = convertHex('#cccccc',100);