MelonHTML5 - Admin7
Themeforest MelonHTML5 - Admin7 HTML
Admin7 is a fully responsive admin template powered by HTML5, CSS3 and JavaScript.
Admin7 comes with modern Single Page App mode and traditional Static HTML mode.
Admin7 is not a collection of dozons of random jQuery plugins with different design patterns.
All the components are designed from scratch with consistent design pattern and coding standards. (Constructor Pattern in JavaScript and OOCSS principle in CSS).
Performance of each module is highly optimized for different browsers and devices.
Admin7 also gives you full JavaScript APIs for each component and the Main APP itself to allow you to do more interactions with your own code.
Please give it quick rating if you like this. If you have any suggestions/feature request or you find a bug, you are more than welcome to contact me and I’ll address them ASAP.
Single Page App
Admin7 is designed as a full Single Page App which gives you faster page load, better and modern user expierence and much more. With its internal rounting script, you could still share a specific page URL as you usually do with static html pages and browser’s back and forward button are also fully supported.
Static HTML Mode
Alternatively, you could still write each page as a static HTML page.
Responsive
Clean, mordern and fully responsive design (tested on all major browsers, tablets and smart phones)
Performance
Highly optimized JavaScript code and clean, consistent Markup and CSS give you extremly fast and resonsive UI. Each module is optimized individually and as a whole so that when multiple modules are used on the same page, they talk to each other and optimize for each other.
Consistency & Customization
With OOCSS principles used in design, Admin7 provides a very consitent and re-usable UI. It also makes it a lot easier to do your own customizations. (e.g. chaning the yellow background for tab, widget, button…etc, you will only need to update one place in CSS)
Multiple Skin and Colour Themes
The CSS system is designed to have skin (layout) and colour scheme separate, which lets you easily create your own skin or colour without breaking the other. 9 theme colours are included by default.
Components
v1.02 @ 18 May 2013
v1.01 @ 17 July 2013
v1.00 @ 10 July2013
Demo:
Single Page App Mode: http://www.melonhtml5.com/demo/admin7/single_page_app/login.html
Static HTML Mode: http://www.melonhtml5.com/demo/admin7/static_html_mode/login.html
OVERVIEW:
Admin7 is a fully responsive admin template powered by HTML5, CSS3 and JavaScript.
Admin7 comes with modern Single Page App mode and traditional Static HTML mode.
Admin7 is not a collection of dozons of random jQuery plugins with different design patterns.
All the components are designed from scratch with consistent design pattern and coding standards. (Constructor Pattern in JavaScript and OOCSS principle in CSS).
Performance of each module is highly optimized for different browsers and devices.
Admin7 also gives you full JavaScript APIs for each component and the Main APP itself to allow you to do more interactions with your own code.
Please give it quick rating if you like this. If you have any suggestions/feature request or you find a bug, you are more than welcome to contact me and I’ll address them ASAP.
FEATURES:
Single Page App
Admin7 is designed as a full Single Page App which gives you faster page load, better and modern user expierence and much more. With its internal rounting script, you could still share a specific page URL as you usually do with static html pages and browser’s back and forward button are also fully supported.
Static HTML Mode
Alternatively, you could still write each page as a static HTML page.
Responsive
Clean, mordern and fully responsive design (tested on all major browsers, tablets and smart phones)
Performance
Highly optimized JavaScript code and clean, consistent Markup and CSS give you extremly fast and resonsive UI. Each module is optimized individually and as a whole so that when multiple modules are used on the same page, they talk to each other and optimize for each other.
Consistency & Customization
With OOCSS principles used in design, Admin7 provides a very consitent and re-usable UI. It also makes it a lot easier to do your own customizations. (e.g. chaning the yellow background for tab, widget, button…etc, you will only need to update one place in CSS)
Multiple Skin and Colour Themes
The CSS system is designed to have skin (layout) and colour scheme separate, which lets you easily create your own skin or colour without breaking the other. 9 theme colours are included by default.
Components
- Widget
- Sortable, Collapsible
- Setting Options
- AJAX refreshing
- Data Table
- Search
- Sort
- Colomn/Row hover
- Checkbox & Radio selection
- Responsive
- Button
- Multiple Sizes and Colours
- Dropdown Button
- Split Button
- Group Button
- Tooltip
- Replacement of title attribute
- 4 directions
- Tracking Map
- Progress Bar
- Grid Layout
- Star Rating
- Mailbox
- Todo List
- Tile
- Slider
- Modal Dialog
- Draggable
- Countdown Buttons
- System Notification
- Sticky Notification
- Full APIs
- Tab / Accordion
- Form
- Form Wizard
- Validations
- Multiple Sizes
- Interactive Chart
- Pie, Bar, Column, Line, Area, Dot, Circular, Combination
- Project Contribution Graph
- Live Updating
- Auto Resizing
- Tracking Map
- Calendar
- Day, Week, Month, Agenda Views
- Add/Delete/Edit Events
- File Gallery
- List View
- Grid View
- Detail View
CHANGE LOGS:
v1.02 @ 18 May 2013
- Updated Font Awesome to v4.1.0
v1.01 @ 17 July 2013
- NEW: lock screen
- NEW: Trend lines
- CSS improvements
- JavaScript Tweaks
v1.00 @ 10 July2013
- Initial release
how to link from one ajax page to another ?
ReplyDeletein a or <form>
ReplyDeleteon variables are passed OK but not on forms.
ReplyDeleteIt’s same as normal links.
ReplyDeleteFor example, your help page is http://www.xxx.ccom/#help, then the link will be
<a href="http://www.xxx.com/#help">Help</a>
or
<a href="#help">Help</a>
The routing script will pick up the hash change and load the AJAX pages for you.
thanks. what about the forms. can it pass variables ?
ReplyDeleteSure, forms are posted normally.
ReplyDeleteSince you are using the single page mode, you’d better off using AJAX to handle form posting so that submitting a form won’t lead to a page refresh.
in the demo there is no example and not covered in documentation. can you put an example of the ajax-form-submit on the demo (with source code).
ReplyDeletethe button click on the ajax is just a icon refresh and a time out.
thanks.
you will need to write your own code to handle AJAX, see below for a quick example:
ReplyDelete$('#form_submit_button').on('click', function() {
// get value from inputs
var first_name = $('#first_name').val();
var password = $('#password').val();
var email = $('#email').val();
// send a XHR to server
$.ajax('server.php', {
type: 'POST',
data: {
first_name: first_name,
password: password,
email: email
}
});
});
cool thanks
ReplyDeleteI guess the update is not coming anymore?
ReplyDeleteYes, updates are definitely coming. I’m working on them
ReplyDeleteGreat to hear back from you! Can’t wait
ReplyDeleteHello! This is a great theme!
ReplyDeleteHow do I add a form in a dialog?
Please let me know.
Thanks!
App.dialog.open({
ReplyDeletewidth: 500,
title: 'Blah Blah',
content: '<form>...</form>',
theme: 'block'
});
Hello,
ReplyDeleteThere appears to be an issue when using any grid below “grid-6” while viewing the site on a mobile device. The boxes do not display correctly – they seem squashed and overlapped.
Do you have a fix or any suggestions?
They should work fine. Do you have a URL to your site so that I can have a look for you.
ReplyDeleteHere is a demo site: http://briefshare.com.au/testing/dashboard.php
ReplyDeleteYou will need “grid-responsive” class to make the grid responsive on mobile devices.
ReplyDeleteAny ETA on your update?
ReplyDeletehello, great presentation
ReplyDeleteI have some configuration problem
how little I configure it for my site, how do I configure ttwitter little as facebook and emailing
thank you
Sorry, what is “ttwitter little”?
ReplyDeletewhat is the file set to adapt to my website to my facebook, my twitter, my LinkedIn,
ReplyDeletehello
ReplyDeleteI’m still waiting for your answer dude
Sorry, missed your last message. I dont really understand your question. What are you after?
ReplyDeletehow can I set on my website admin7
ReplyDeleteSorry, how can you set what on your site?
ReplyDeletehow configure admin7 on studiograffity.com or brand85.com with facebook …
ReplyDeleteAdmin7 is a what? I think I did not understand or have not understood
Sorry, I’m confused…
ReplyDeleteI do not speak English well sorry
ReplyDeleteI want to configure the system for admin7 DASHBOARD am no longer has a melonhtml5 puts me to receive my messages
Hello
ReplyDeleteWould you be able to do some changes? Like alot
I will pay but tell me if you can.
Hi, we do do some custom jobs. Please drop us an email to lee@melonhtml5.com.
ReplyDeleteHi i make this function but click events never call
ReplyDeletefunction cerrarApl(url){
App.dialog.open({
width: 500,
title: 'Cerrar Sesión',
content: '¿Esta seguro que desea cerrar la aplicación?',
theme: 'info',
buttons: [
{
text: 'Cancelar',
icon: 'icon-remove',
onClick: function(evt, btn) {
App.dialog.close();
}
},
{
text: 'Salir',
icon: 'icon-signout',
onClick: function(evt, btn) {
alert(url);
}
}
]
});
}
console log brouser say
http://s14.postimg.org/ywykcc5oh/error.png
I can’t see a problem in the code above. It might be caused by something else. Do you have a URL to the page? so I can have a look for you?
ReplyDeleteTo link to an ajax page, for example: projects.php, or even using one of the demo pages included in the download, linking back and forth does not work. I tried the following:
ReplyDeleteFor example, your help page is http://www.xxx.ccom/#help, then the link will be
http://www.xxx.com/#help
#help
#!/help
#help
And the above with html at the end.
The page does exist in the “ajax_pages” folder, and my spelling is correct. Please advise.
Does the live demo work for you? Also, do you have a URL to your page so that I can have a look for you?
ReplyDeleteThe demo works fine. However, in trial and error I found that if I want to link to a page within the body, I will first have to add it to the menu as a list item. This would be ok if I didn’t have a lot of things to manage. This is not my case, unfortunately.
ReplyDeleteAlso, there is no way to add in dynamic variable content such as ?action=submit&variable=1234
I can send you a link, privately. Let me know where to send it…