有用なJQueryコードフラグメント

現在、JQueryはウェブサイトの建設に広く利用されており、以下ではよく使われるコードの断片、コレクションを紹介します.

トップページにスクロール

サイトの右側によく現れ、上矢印のようなもので、サイトの頭に戻るのに便利です.コードクリップを与え、id topをリンクします.

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

表ヘッダーのコピー

表の可読性のために.私たちはよく時計の底に捨てた時計をコピーします.ここではJQueryフラグメントを提供し、var$tfoot=$(')$($('thead').clone(true, true).children().get().reverse()).each(function(){ $tfoot.append($(this)); }); $tfoot.insertAfter('table thead');

外部コンテンツのロード

jqueryでは、次の方法で簡単にできます.面の情報をdivにロードします.

$("#content").load("somefile.html", function(response, status, xhr) {
  // error handling
  if(status == "error") {
    $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
  }
});

高さの自動調整

Webのコンテンツ表示にあります.私たちはよく内容を高度に統一して、このようにもっと美しく見えます.

var maxheight = 0;
$("div.col").each(function(){
  if($(this).height() > maxheight) { maxheight = $(this).height(); }
});

$("div.col").height(maxheight);

シマウマ模様の表

テーブルのデータが表示されると、行ごとに異なる色が可読性を増加させるに違いありません.

$(document).ready(function(){                             
     $("table tr:even").addClass('stripe');
});

一部ページの更新

Webサイトの一部をリフレッシュする必要がある場合は、div:setInterval(function(){$(「#refresh」).load(location.href+「#refresh>*」、})を10秒ごとにリフレッシュします.10000);//milliseconds to wait

プリロードイメージ

$.preloadImages = function() {
       for(var i = 0; i<arguments.length; i++) {
               $("<img />").attr("src", arguments[i]);
       }
}

$(document).ready(function() {
       $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});

新しいウィンドウで外部リンクを開く

target=「blank」というプロパティを使用すると、新しいウィンドウでリンクを開くことができます.ここではjqueryコードを使用して、Webサイト以外のリンクを一括制御して新しいウィンドウで開くことができます.

$('a').each(function() {
   var a = new RegExp('/' + window.location.host + '/');
   if(!a.test(this.href)) {
       $(this).click(function(event) {
           event.preventDefault();
           event.stopPropagation();
           window.open(this.href, '_blank');
       });
   }
});

パスワードの長さを確認

html：
<input type="password" name="pass" />
<span></span>

正規表現でパスワードの強弱を判断し、情報を返す

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

スクロール・ロード情報

ajaxスクロールロード情報をリストに表示

var loading = false;
$(window).scroll(function(){
    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
        if(loading == false){
            loading = true;
            $('#loadingbar').css("display","block");
            $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
                $('body').append(loaded);
                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
                $('#loadingbar').css("display","none");
                loading = false;
            });
        }
    }
});

$(document).ready(function() {
    $('#loaded_max').val(50);
});