Clever Geek Handbook

jQueryを使用して大量のデータをフィルタリングする

画像 私はハブラに非常に大きな 持参金を持っています。 そこに何かを見つけることは非常に困難でした。そして、もしあなたがまだどのように、そして何を覚えていないなら、churを通して。 したがって、jQueryのタグでこれらすべてのフィルターを作成することにしました。 ブックマークを奪うために、 昨春のukkoは簡単なグラバーを作成しました。 その結果、NETSCAPEブックマークとxmlの形式の巨大なhtmを取得しました。



操作の原理は簡単で、グラバーをインストールし、切望されているhabrabookmarks.htmを取得し、並べ替えファイルを近くで実行するだけです。





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html xmlns= "http://www.w3.org/1999/xhtml" >

<head>

<meta http-equiv= "content-type" content= "text/html; charset=UTF-8" />

<title>Sort Bookmarks</title>

<script type= "text/javascript" src= "http://code.jquery.com/jquery-1.4.2.js" ></script>

<script type= "text/javascript" >

//

getUniqueValues = function (arr) {

var hash = new Object();

for (j = 0; j < arr.length; j++) {hash[arr[j]] = true }

var array = new Array();

for (value in hash) {array.push(value)};

return array;

}



// php

function nl2br (str, is_xhtml) {

var breakTag = (is_xhtml || typeof is_xhtml === 'undefined' ) ? '<br />' : '<br>' ;

return (str + '' ).replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2' );

}



// .



/*

* 1

* strg (String)

*/



function _sort (strg) {

//

$( ".sat" ).show();

//

$( "#tagz .tgs" ).hide().next().hide();

// strg,

$( "#tagz .tgs[rel^=" +strg+ "]" ).show().next().show();

return false ;

}



/*

*

*/



function C_sort() {$( ".sat" ).hide();$( "#tagz .tgs" ).show().next().show(); return false ;}



/*

*

* strg (String)

*/



function _filter (strg) {

//

$( ".sabm" ).show();

//

$( "DL A" ).parent().hide().next().hide();

// strg,

$( "DL A[tags*=" +strg+ "]" ).parent().show().next().show();

return false ;

}



/*

*

*/



function C_filter () {$( ".sabm" ).hide();$( "DL A" ).parent().show().next().show(); return false ;}



//

$.get( 'habrabookmarks.htm' , function (data) {

$( 'body' ).html(data);



// ,

$( "<div>" )

.attr( "id" , "tagz" )

.css({

"float" : "right" ,

"padding" : "10px" ,

"width" : "310px" ,

"height" : "auto" ,

"overflow" : "auto"

})

.insertBefore($( "h1:eq(0)" ));



//

$( "h1:eq(0)" ).append( " <a href='javascript:' class='sabm' style='display: none; color: green;' onclick='C_filter();'><small>(show all)</small></a>" );



//

var

allTags = aT = curSA = [],

abc = ".-1234567890qwertyuiopasdfghjklzxcvbnm" ,

j = 0;



//

abc = abc.split( '' ).sort();

//

for ( var i in abc)

curSA[i] = "<a href='javascript:' onclick='_sort($(this).text())'>" +abc[i]+ "</a>" ;

// +

$( "#tagz" ).append(curSA.join( ", " ) + " <a href='javascript:' class='sat' style='display: none; color: red;' onclick='C_sort();'>x</a> <br><br> " );



//

// tags

$( "DL A" ).each( function (){

//

allTags = $( this ).attr( "tags" ).split( ',' );

//

var curTDA = $( this ).parent().next();

//

curTDA.html(nl2br(curTDA.html()));

// ,

if (allTags.length > 0) {

var curA = [];

for ( var i in allTags) {

// - ,

aT[j] = curA[i] = "<a class='tgs' rel='" +allTags[i]+ "' href='javascript:' onclick='_filter($(this).text())'>" +allTags[i]+ "</a>"

j++;

}

// ( )

curTDA.append( "<br>" + curA.join( ', ' ) + "<hr>" );

}

}).attr( "target" , "_blank" ); //

// ,

$( "#tagz" ).append(getUniqueValues(aT).sort().join( '<span>, </span>' ));

// ,

});



</script>

</head>

<body>

</body>

</html>









-

デモとソースのブックマークファイル

アーチ 柳


More articles:


All Articles