1. Location:
  2. / Computer learning >> Computer læring >> Kendskab til programmering >> Scripting Sprog >> jquery >>

jquery tagsort. er

, tagsort.is en jquery stik af, at et. et enkelt af tagsort eksempel som vist nedenfor, <!doctype html > < http: //lang = ", en" > < head > < meta - charset = "utf - 8" > < afsnit > tagsort demo < /afsnit > <!- demo - styles. > < stil > http: //organ {margen: 0; polstring: 0;} organ {baggrund farve:&#fff; skrifttype familie: "helveticaneue lys", "helvetica neue lys", "helvetica neue" helvetica, ariel, "lucida grande" uden serif; skrifttype vægt: 300.}. container (bredde: 80%; margen: 0 auto;} h1 > lille (farve:&#aaa; tekst): ingen; skriftstørrelsen: 70% margen: 10px;} h1 > lille: den (farve:�). punkt {æske størrelsessortering: grænse -x flyde: venstre. position: relativ; min højde: 1px; polstring til venstre: 15px; polstring. 15px; bredde: 20% margen nederst: 40px. højde: 360px; max højde: 360px; overløb: skjult.}. punkt. papir (baggrund farve:&#f4f4f4; polstring: 8px; højde: 100%} punkt. papir img (bredde: 100%} punkt. papir. punkt mærker (farve:&#aaa, skriftstørrelse: 12px; linjehøjde: 1.8;}. tagsort tags container (margen: 40px 0} < /stil >\t <link href = "styles/tagsort.min.css" rel = "stylesheet" type = "text/css"></link> \t\t <script src = "scripts/jquery-2.1.3.min.js" type = "text/javascript" charset = "utf-8"></script> <script src = "scripts/tagsort.min.js" type = "text/javascript" charset = "utf-8"></script> \t\t\t <script> $(function(){ $('div.tags-container').tagSort({selector:'.item', tagWrapper:'span', displaySelector: '.item-tags', displaySeperator: ' /', inclusive: false, fadeTime:200}); }); </script> \t\t </head> \t <body> <div class = "container"> <div class = "tags-container row"></div> \t\t\t <div class = "item col-md-3" data-item-id = "1" data-item-tags = "PHP,JavaScript,React,Memcached,RocksDB,Cassandra,Flux"> <div class = "wrapper"> <img src = "images/facebook.jpg" alt = "Facebook"> <h2>Facebook</h2> <p class = "item-tags"></p> </div> </div> \t\t\t <div class = "item col-md-3" data-item-id = "2" data-item-tags = "MySQL,JavaScript,jQuery,Memcached,Scala,Rails,Hadoop,Redis"> <div class = "wrapper"> <img src = "images/twitter.jpg" alt = "Twitter"> <h2>Twitter</h2> <p class = "item-tags"></p> </div> </div> \t\t\t <div class = "item col-md-3" data-item-id = "3" data-item-tags = "MySQL,Node.js,Python,JavaScript,React,Java,Cassandra"> <div class = "wrapper"> <img src = "images/netflix.jpg" alt = "Netflix"> <h2>Netflix</h2> <p class = "item-tags"></p> </div> </div> \t\t\t <div class = "item col-md-3" data-item-id = "4" data-item-tags = "MySQL,Node.js,Python,Java,Objective-C,PostgreSQL,Redis,MongoDB"> <div class = "wrapper"> <img src = "images/uber.jpg" alt = "Uber"> <h2>Uber</h2> <p class = "item-tags"></p> </div> </div> \t\t\t <div class = "item col-md-3" data-item-id = "5" data-item-tags = "MySQL,Python,Memcached,nginx"> <div class = "wrapper"> <img src = "images/dropbox.jpg" alt = "Dropbox"> <h2>Dropbox</h2> <p class = "item-tags"></p> </div> </div> \t\t\t <div class = "item col-md-3" data-item-id = "6" data-item-tags = "Python,Java,Cassandra,Hadoop,PostgreSQL,Hadoop"> <div class = "wrapper"> <img src = "images/spotify.jpg" alt = "Spotify"> <h2>Spotify</h2> <p class = "item-tags"></p> </div> </div> \t\t\t <div class = " item col-md-3" data-item-id = "7" data-item-tags = "MySQL,Javascript,jQuery,Ruby,Redis,nginx,Rails,SASS"> <div class = "wrapper"> <img src = "images/kickstarter.jpg" alt = "Kickstarter"> <h2>Kickstarter</h2> <p class = "item-tags"></p> </div> </div> \t\t\t <div class = "item col-md-3" data-item-id = "8" data-item-tags = "Go,Ruby,MySQL,Redis,Memcached,SASS,Rails,nginx"> <div class = "wrapper"> <img src = "images/digitalocean.jpg" alt = "DigitalOcean"> <h2>DigitalOcean</h2> <p class = "item-tags"></p> </div> </div> \t\t\t <div class = "item col-md-3" data-item-id = "9" data-item-tags = "Ruby,MySQL,Hadoop,nginx,PHP,Scala,Memcached,Redis"> <div class = "wrapper"> <img src = "images/tumblr.jpg" alt = "Tumblr"> <h2>Tumblr</h2> <p class = "item-tags"></p> </div> </div> \t\t\t <div class = "item col-md-3" data-item-id = "10" data-item-tags = "nginx,MySQL,Redis,Rails,Ruby,Hadoop"> <div class = "wrapper"> <img src = "images/shopify.jpg" alt = "Shopify"> <h2>Shopify</h2> <p class = "item-tags"></p> </div> </div> \t\t\t <div class = "item col-md-3" data-item-id = "11" data-item-tags = "JavaScript,jQuery,Redis,Java,Go,Cassandra,.NET"> <div class = "wrapper"> <img src = "images/stackexchange.jpg" alt = "Stack Exchange"> <h2>Stack Exchange</h2> <p class = "item-tags"></p>< /div > < /div > < div klasse = "punkt col-md-3" dataelement id = "12" dataelement tags = "nginx, redis, mongodb, slange, java, reagere, javascript, scala, cassandra" > < div klasse = "papir" > < img src = "billeder /keenio jpg" alat = "interesseret i" > < h2 > opsat io < /h2 > < p - klassen = "punkt hundetegn" > < /p > < /div > < /div > < /div > < /organ > < /html > det bør føre til følgende resultat −, klik her,



Previous:
Next Page: