七個(gè)幫助你處理Web頁面層布局的jQuery插件

1.UI.Layout? jQuery UI布局插件

官方網(wǎng)站:http://layout.jquery-dev.com/index.cfm

使用大小可折疊的嵌套面板和大量選項(xiàng)創(chuàng)建高級(jí)UI布局。布局可以創(chuàng)建任何你想要的UI外觀; 從簡單的標(biāo)題或側(cè)邊欄到具有工具欄,菜單,幫助面板,狀態(tài)欄,子表單等的復(fù)雜應(yīng)用程序。集成并增強(qiáng)其他UI小部件,如選項(xiàng)卡,手風(fēng)琴和對話框,以創(chuàng)建豐富的界面。

圖片發(fā)自簡書App


2.jQUery Masonry

官方網(wǎng)站:https://masonry.desandro.com/?resources/jquery-masonry

所有項(xiàng)目的大小和樣式都由您自己的CSS處理。項(xiàng)目大小可以用響應(yīng)式布局的百分比來設(shè)置

圖片發(fā)自簡書App


3.jLayout

jLayout JavaScript庫提供了用于布局組件的布局算法。一個(gè)組件是一個(gè)抽象; 它可以通過多種方式實(shí)現(xiàn),例如HTML5 Canvas繪圖中的項(xiàng)目或HTML元素。jLayout庫允許您專注于繪制各個(gè)組件,而不是如何將其排列在屏幕上。

GitHub:https://github.com/bramstein/jlayout/

圖片發(fā)自簡書App


?

4.jQuery pageSlide

Query pageSlide 是一個(gè)jQuery插件,它可以控制一個(gè)隱藏頁面的顯示和關(guān)閉。jQuery展開左右側(cè)欄目插件PageSlide,pageslide插件功能實(shí)現(xiàn)現(xiàn)實(shí)隱藏側(cè)邊欄的功能。插件可以讀取另個(gè)一html,也可以是當(dāng)前頁面中的元素,目前比較流行的導(dǎo)航菜單展現(xiàn)形式,特別是在手機(jī)端或者觸屏頁面,效果還是不錯(cuò)的

demo:http://www.jq22.com/jquery-info343

?

圖片發(fā)自簡書App

5.jQSlickWrap

http://www.jwf.us/projects/jQSlickWrap/

jQSlickWrap是一個(gè)真正可以將內(nèi)容包裹在圖片周圍的jQuery插件。該插件使用HTML5 Canvas標(biāo)簽,用法非常簡單??梢暂p松而準(zhǔn)確地實(shí)現(xiàn)浮動(dòng)圖像的文字環(huán)繞效果。

圖片發(fā)自簡書App

?

6.Columnizer

官方網(wǎng)址:https://welcome.totheinter.net/columnizer-jquery-plugin/

Columnizer jQuery Plugin將自動(dòng)以報(bào)紙列格式來布局您的內(nèi)容。您可以指定列寬或列的靜態(tài)數(shù)量。而且,當(dāng)然,這很容易使用!Columnizer會(huì)將CSS類添加到它創(chuàng)建的列中。每列將有一個(gè)“列”類名。第一列將有“第一”,最后一列將有“最后”。這使您可以更輕松地定位CSS標(biāo)記中的特定列。

github:https://github.com/adamwulf/Columnizer-jQuery-Plugin

圖片發(fā)自簡書App


7:Columns

jQueryJSON數(shù)據(jù)轉(zhuǎn)換為html表插件Columns

GitHub:https://github.com/eisenbraun/columns

Columns創(chuàng)建JSON數(shù)據(jù)轉(zhuǎn)化為HTML方法 引用jQuery庫1.7或更高版本和Columns插件文件,列是將JSON數(shù)據(jù)創(chuàng)建為可排序,可搜索和分頁的HTML表格的簡單方法。所有你需要的是提供的數(shù)據(jù),和列將完成其余的。因?yàn)镃olumns動(dòng)態(tài)地創(chuàng)建了所有必要的HTML,所以唯一需要的HTML是一個(gè)空的HTML元素,比如一個(gè)<div>標(biāo)簽,在初始化時(shí)使用相應(yīng)的id。

圖片發(fā)自簡書App
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Swift版本點(diǎn)擊這里歡迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh閱讀 26,326評論 7 249
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一種新的協(xié)議。它實(shí)...
    香橙柚子閱讀 24,844評論 8 183
  • afinalAfinal是一個(gè)android的ioc,orm框架 https://github.com/yangf...
    passiontim閱讀 15,907評論 2 45
  • 每個(gè)女孩身上都有一個(gè)公主夢。對于一個(gè)窮孩子出身的顧頃來說這真的就只是一個(gè)夢。“叮鈴鈴”夢醒了就要繼續(xù)干活賺...
    欞木閱讀 317評論 0 0
  • 距離上一次見面過了一個(gè)月 距離上一次見面過了一整年 一個(gè)月前 嗨 好久不見 我看著你從那個(gè)昏暗的入口走進(jìn)來 正門口...
    老沈家媳婦兒閱讀 168評論 0 0

友情鏈接更多精彩內(nèi)容