TinyAdmin前端展現框架

jopen 10年前發布 | 48K 次閱讀 TinyAdmin 前端技術

一直在苦苦尋找一個合適的前端框架，少說也看了幾十個。

ext太重，而且有內存泄露，在IE下就是個悲劇。

dhtmlx，速度比較好，開源是GPL不適合企業應用，商業的要錢，倒也不貴萬把塊錢，但是樣式比較接近于傳統管理臺應用，另外一個弊端是比較小眾

Dojo，其實架構比較好，但是比較小眾

Semantic：非常好的一個框架，但是成熟度不太好，對IE支持尤其比較差，另外比較小眾

easyui：相對來說，也是一個不錯的框架了，但是樣式有點接近ext，也存在內存泄露

wijmo：非常完善的前端框架，但是比較小眾，對IE8兼容方面有些問題

kendoui：也是非常不錯的前端框架，比較小眾，后臺應用開發包要收費

jqueryui：非常不錯的前端框架，應用面夠廣，但是組件相對少一些

JQuery：本身只是個基礎庫，當然有許多的插件，但是不同插件之間的樣式啥的不太一致，自己去整合費效比較差

Bootstrap，不錯的框架，組件相當來說少一點

......還有許多知名不知名的前端框架，但是比較可用的，真的很難找

組件豐富些，自己不添加也足夠用

兼容性好一點，最好IE8以上都能兼容的

修改容易點，我想要就要，不想要就不要

擴展方便點，我想增加就能增加，我想修改就能修改

性能能好點，即使在老舊如IE8，操作系統為XP的環境也，可以跑出不錯的速度來。

內存回收能回一點，內存出現泄露，也可以但是可以簡單一個刷新就比較徹底的回收掉，也是可以接受的。

界面好看點，讓人最好能眼前一亮，再看，更亮的效果。

最好是免費的，如果不免費，費用要盡量低的，最好3、5$可以搞定，再不行幾十$也可以接受

最好能支持更換皮膚啥的

最好能支持窗口小組件，可以由客戶進行位置調整啥的

最好支持流式布局

JS及CSS文件眾多，稍有不慎就會出現錯誤，從而導致無法展示

對于IE8兼容性不太好，在IE8下無法使用

對皮膚啥的修改過之后，不能保存，下次進來的時候，還要重新設過

全是E文的，用起來上手慢一點

對于問題1：進行組件化，對這些CSS,JS文件進行分別治理，這個工作量非常大，而且要膽大心細，這里消耗N多腦細胞，終于搞定了。

對于問題2：主要是CSS及JS兼容性相關的問題，這個已經超出本人能力范圍，沒得辦法，找一外援搞定之。

對于問題3：這個相對于上面兩個問題SoEasy，輕松搞定了。2014/11/1 發表博文 - 悠悠然然的個人頁面 - 開源中國社區

對于問題4：漢化之，更方便國人使用

現在使用起來就方便多了，不必引入js和css及圖像文件，字體文件等等，直接進行Pom依賴即可，結合到Tiny框架中，還提供了更容易使用的宏，提供了樣式文件合并壓縮，JS文件壓縮合并，做前端的小朋友們的好日子來了。

1.UI組件包抽取

org.tinygroup.calendar
org.tinygroup.jquery
org.tinygroup.bootstrap
org.tinygroup.bootstrapWizard
org.tinygroup.ckeditor
org.tinygroup.colorhelpers
org.tinygroup.colorpicker
org.tinygroup.component
org.tinygroup.datatables
org.tinygroup.delete-table-row
org.tinygroup.dropzone
org.tinygroup.easyPieChart
org.tinygroup.excanvas
org.tinygroup.fastclick
org.tinygroup.flot
org.tinygroup.FontAwesome
org.tinygroup.fueluxwizard
org.tinygroup.fullcalendar
org.tinygroup.ie-placeholder
org.tinygroup.ion-slider
org.tinygroup.jquery-form
org.tinygroup.jquery-nestable
org.tinygroup.jquery-touch
org.tinygroup.jstorage
org.tinygroup.js-migrate
org.tinygroup.knob
org.tinygroup.markdown
org.tinygroup.maskedInput
org.tinygroup.maxlength
org.tinygroup.morris
org.tinygroup.msieFix
org.tinygroup.multiselect
org.tinygroup.notification
org.tinygroup.noUiSlider
org.tinygroup.pace
org.tinygroup.prettify
org.tinygroup.raphael
org.tinygroup.select2
org.tinygroup.selectToUISlider
org.tinygroup.smartadmin-new
org.tinygroup.smartwidgets
org.tinygroup.sparkline
org.tinygroup.summernote
org.tinygroup.superbox
org.tinygroup.throttle-denounce
org.tinygroup.typeahead
org.tinygroup.vectormap
org.tinygroup.x-editable
org.tinygroup.jqueryvalidate
org.tinygroup.smartadmin
org.tinygroup.jqgrid
org.tinygroup.jqueryform
org.tinygroup.jquerystorage

2.UI組件宏封裝

#macro(jui_hrefButton $id $caption $construct) 
<a id="$id" href="#">$caption</a>
<script>
$(function() {
    $( "#$id").button($!construct);
});
</script>
#end

#macro(jui_radio $id $groupId $caption)
<input type="radio" id="$id" name="$groupId" /><label for="$id">$caption</label>
#end

3.界面編寫

#@juiTab("tabs")
 #@juiTabHeader()
 #@juiTabHeaderItem("tabs-a")標簽1#end
 #@juiTabHeaderItem("tabs-b")標簽2#end
 #@juiTabHeaderItem("tabs-c")標簽3#end
 #end

 #@juiTabContentItem("tabs-a")
 <p>此前，李克強和梅德韋杰夫共同主持了中俄總理第十九次定期會晤。會晤后，兩國總理簽署聯合公報，并見證經貿、投資、能源、金融等領域近40項重要文件的簽署。</p>
 #end

 #@juiTabContentItem("tabs-b")
 <p>李克強是在和俄羅斯總理梅德韋杰夫共同會見記者時提到“套娃”的。這是一種俄羅斯特產的木制玩具，由多個一樣圖案的空心木娃娃一個套一個組成，最多可達十多個。</p>
 #end

 #@juiTabContentItem("tabs-c")
 <p>中國總理回憶起在農村生活的經歷。“我年輕時在中國農村生活多年，親身經歷過吃不飽飯的艱難歲月。”李克強說，吃一頓飽飯可能很快就會忘記，但饑餓留下的印象永生難忘。</p>
 #end
#end

寫出來的效果是怎么樣的呢？