Previously published an article:Tinyadmin front-end presentation frame, whose online presentation path is:http://www.tinygroup.org/tinyadmin/, it should be said that there are many people still feel interest, but because this is based on the Smartadmin framework rewrite, although we bought the smartadmin authorization, but the vast number of users if they want to use, there will be licensing-related issues, This can greatly affect the use decisions of some people-especially those who will be re-issued. Another reason is smartadmin first look is not good, but the actual use, the inside of the problem is more, to IE8 basically can be said is incompatible, although we tried to make a certain correction, but still not good compatibility. Some user experience also has improved space, which makes me think more and more, is there a better solution?
It was not until Ajian and the Friends of the secret Edge joined my team that I felt it was time to solve the problem quite thoroughly. Sure enough, in the wind Light Yun Light, Ajian, close friends of the co-operation, only spent about one months of time, took out a tinyui of the initial version, has been basically perfect, of course, we are still conducting a systematic test, I believe there are still some small problems (some of us have found that in the revision), Interested students are welcome to join in the improvement.
Online Demo Address:http://www.tinygroup.org/tinyuiweb/
Source address (must be hosted on a tall open source Chinese git repository):http://git.oschina.net/tinyframework/TinyUiEnterprise
The development environment is built with Git,maven (3.1.x) and JDK1.6:
?
1
2
3
4
5 |
git clone https://git.oschina.net/tinyframework/TinyUiEnterprise.git
CD Tinyuienterprise
MVN Install
CD *web
MVN Jetty:run |
In the execution of MVN install, the first time is longer, because to download some resources from the central warehouse, you can smoke, drink tea, walk what. If you go through the last step, you can start a local environment (note that there is no other application for the 8080 port), this time a browser, enter:
?
| 1 |
http://localhost:8080/tinyuiweb/ |
Note, please IE9 above browser, Chrome, Firefox and other browsers to browse, the current IE8 is still making adaptive adjustments.
Some notes that some of the content in this UI framework was taken from H-ui, which we communicated with the H-ui team, who allowed us to reuse the content in their frameworks.
In this UI framework, some of the features of Smartadmin are referenced in some external implementations, but the source code is not reused.
This UI framework integrates some open source jquery plugins, but does not change the way the original plugin is licensed, and the user is asked to see how the original plug-in is licensed when used.
Some features of the Tinyui are described:
- Provides a complete master-side frame
- Provides support for full page switching and Ajax partial refresh
- Provides a rich menu insertion point
- offers a variety of skin
- Provides rich customization of interface elements
- Provides encapsulation of UI component packages
- Provides macro encapsulation so that you don't have to care about implementation when you use it
- Provides flow layout, also has a good display on the mobile phone side
- A good solution to the dependency between UI component packages
- The problem of CSS merging and JS merging and its compression is solved well.
Below I have some graphs to do a show:
101942_4gwe_1245989.jpg (149.91 KB, download number: 0)
Download attachments
Uploaded half an hour ago
The above is one of the pages, the component package list is based on the actual load of the number of component packages in real-time calculation, so do not need to modify---this is the strong support of relying on tinyuiengine.
102247_jrus_1245989.jpg (173.42 KB, download number: 0)
Download attachments
Uploaded half an hour ago
Click the Settings button to display the interface adjustment panel, where you can adjust the navigation bar, menu bar, guided menu, etc., or adjust the location of the menu. You can also choose to use a full-screen or fixed-width setting, and it is worth mentioning that if you choose a fixed width, it automatically adapts to the width of the page between 970 and 1170. The following is a variety of theme styles. Oh, now the theme style is just a simple adjustment, for testing, the following will be asked to professional artists to make a systematic adjustment.
Then, inside is the actual example of dozens of components, and I'm sure that most of the components you want to use are already contained within. If you think it's not enough, please go tobbs.tinygroup.orgCommunity in the message, as long as the reasonable, we will be at a speed you can not imagine quickly add.
Here I show a demonstration of a streaming layout:
At first, the fixed-width display of the full page width, as well as the shadows on both sides, are now fixed widths of 1170 pixels.
105844_y3xr_1245989.jpg (139.81 KB, download number: 0)
Download attachments
Uploaded half an hour ago
We reduce its width.
110144_u8bj_1245989.jpg (134.49 KB, download number: 0)
Download attachments
Uploaded half an hour ago
Its width has become 970 pixels wide.
And then reduce the width of it,
110416_dqm2_1245989.jpg (131.87 KB, download number: 0)
Download attachments
Uploaded half an hour ago
You can see that the hidden sides are gone.
110539_ysqh_1245989.jpg (108.22 KB, download number: 0)
Download attachments
Uploaded half an hour ago
Because the width is small, the menu is no longer fully displayed, but only the icon is displayed.
110717_2u8d_1245989.jpg (KB, Downloads: 0)
Download attachments
Uploaded half an hour ago
Well, the effect is good, and the whole process has been shown completely.
111016_159t_1245989.jpg (57.55 KB, download number: 0)
Download attachments
Uploaded half an hour ago
Above is the menu display way, can see is very suitable for mobile phone and other touch screen operation.
Tiny produced, must be a boutique, small partners to participate in or join us!!!
Welcome to the Open source technology community: http://bbs.tinygroup.org . The Code and framework information in this example will be shared in the community. "Self-write framework" member QQ Group: 228977971, Hands-on, understand the secrets of the Open source framework!
Open Source Interview Record
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
"Open source framework that thing 20": Write your own front end frame
