Bootstrap 之 Metronic 模板的进修之路 - (4)源码剖析之剧本部份

上篇我们将 body 标签主体部份举行了简朴总览,下面看看末了的剧本部门。

页面末端部份(Javascripts 剧本文件)

我们来看看代码末了的代码,摘取以下:

        <!--[if lt IE 9]>
<script src="../assets/global/plugins/respond.min.js"></script>
<script src="../assets/global/plugins/excanvas.min.js"></script> 
<![endif]-->
        <!-- BEGIN CORE PLUGINS -->
        <script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
        <script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="../assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
        <script src="../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
        <script src="../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
        <script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
        <!-- END CORE PLUGINS -->
        <!-- BEGIN THEME GLOBAL SCRIPTS -->
        <script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
        <!-- END THEME GLOBAL SCRIPTS -->
        <!-- BEGIN THEME LAYOUT SCRIPTS -->
        <script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
        <script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
        <script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
        <!-- END THEME LAYOUT SCRIPTS -->
    </body>

我们发明,一切剧本都在 </body> 之前,而且,源码末端也没有</html> 标签,这重要是因为以下一些缘由:

  • 为何放在末了

HTML 文件的加载都是从上往下实行的,我们平常习气将一些对显现结果影响不大的剧本文件放到页面的末了举行加载。如许能够削减页面的加载时候。

  • 为何放在 </body> 之前

只所以剧本放在 </body> 之前,而不是以后,重要是因为:基于划定规矩 %html.content “HEAD|BODY”,HTML 标签的子元素只能是 HEAD BODY,假如在 </body> 后再涌现 <script> 或任何元素的最先标签,都是 parse error。固然,浏览器平常均有容错机制。毛病嵌套的标签、以及位置安排毛病的标签都会在paser HTML 过程当中尝试修复。修复后获得正当的HTML后在由规划引擎竖立响应的DOM对象。在<script>标签安排于</body>标签以后时,源码被一切浏览器【泛指PC上罕见的】修复为一般情势,即<script></script></body>。

  • 为何没有 </html> 标签

这个我也忘了哈,彷佛为了被别的文件包括时,防止涌现把文件闭合了这类状况。一会儿找不到这方面的说清楚明了,假如哪位大侠晓得,贫苦示知。
固然,html5 是支撑不闭合标签的。
这儿貌似有一点点申明:http://blog.teamtreehouse.com…

Metronic 所用到的插件和资本

Metronic 用了几十个插件和扩大资本,这才使得这个模板显得尤其壮大。详细这些插件的形貌我就不一一列述了,人人能够一一点下下面表格的链接相识相识。

NameDescriptionURL
jQueryCore Javascript libraryhttp://www.jquery.com
Twitter BootstrapSleek, intuitive, and powerful front-end framework for faster and easier web developmenthttp://getbootstrap.com
Select2Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of resultshttp://ivaynberg.github.io/se…
Bootstrap ConfirmationSocicon Social Icons.http://mistic100.github.io/Bo…
SociconBootstrap plugin for on-place confirm boxes using Popover.http://www.socicon.com/
Bootstrap TagsinputBootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags.https://github.com/timschlech…
Flow ChartBootstrap plugin for on-place confirm boxes using Popover.http://adrai.github.io/flowch…
AutosizeA small, stand-alone script to automatically adjust textarea height.http://www.jacklmoore.com/aut…
Bootstrap SummernoteSuper Simple WYSIWYG Editor for Bootstrap 3. Summernote is a javascript program that helps you to create WYSIWYG Editor on web.http://hackerwins.github.io/s…
Bootstrap Hover Dropdown PluginA simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience.https://github.com/CWSpear/bo…
Twitter TypeaheadA fast and fully-featured autocomplete library.http://twitter.github.io/type…
amChartsCharting library & maps. Where all data goes visual.http://www.amcharts.com/
iCheckSUPER CUSTOMIZED CHECKBOXES AND RADIO BUTTONS FOR JQUERY & ZEPTO.http://fronteed.com/iCheck/
Bootstrap SelectA custom select for @twitter Bootstrap using button dropdown.http://silviomoreto.github.io…
jQuery Notific8jQuery Notific8 is a notification plug-in that was inspired by the notification style introduced in Windows 8.http://willsteinmetz.net/jque…
jQuery jsTreeA tree view plugin for jQuery.http://www.jstree.com/
Bootstrap MaxlengthThis plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute “maxlength” to work.http://mimo84.github.com/boot…
Bootstrap Session TimeoutAfter a set amount of time, a dialog is shown to the user with the option to either log out now, or stay connected. If log out now is selected, the page is redirected to a logout URL. If stay connected is selected, a keep-alive URL is requested through AJAX. If no options is selected after another set amount of time, the page is automatically redirected to a timeout URL.https://github.com/travishorn…
jQuery Idle TimeoutThis script allows you to detect when a user becomes idle (detection provided by Paul Irish’s idletimer plugin) and notify the user his/her session is about to expire. Similar to the technique seen on Mint.com. Polling requests are automatically sent to the server at a configurable interval, maintaining the users session while s/he is using your application for long periods of time.http://www.erichynds.com/exam…
Bootstrap TouchSpinA mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.http://www.virtuosoft.eu/code…
Bootstrap Date PaginatorA jQuery plugin which takes Twitter Bootstrap’s already great pagination component and injects a bit of date based magic. In the process creating a hugely simplified and modularised way of paging date based results in your application.http://www.jonathandanielmile…
Bootbox.jsBootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.http://bootboxjs.com/
Bootstrap MarkdownMarkdown editing for Bootstrap.http://toopay.github.com/boot…
Bootstrap FuelUX Input SpinnerBootstrap FuelUX Input Spinner For App.http://exacttarget.github.io/…
Bootstrap Context MenuContext menu plugin for Twitter’s Bootstrap frameworkhttps://github.com/sydcanem/b…
jQuery noUiSlidernoUiSlider is a super tiny jQuery plugin that allows you to create range sliders. It fully supports touch, and it is way(!) less bloated than the jQueryUI library.http://refreshless.com/nouisl…
jQuery IonRange SliderBeautiful, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings and can be completely modified with CSS.http://ionden.com/a/plugins/i…
Bootstrap Toastr NotificationsToastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.http://codeseven.github.io/to…
Bootstrap SwitchUse Radio Buttons as switches.http://www.larentis.eu/switch/
jQuery jCropJcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.http://github.com/tapmodo/Jcrop
Bootstrap X-editableIn-place editing with Twitter Bootstrap.http://vitalets.github.io/x-e…
Bootstrap Extended ModalsResponsive, Stackable, AJAX and more.http://jschr.github.com/boots…
jQuery Multi SelectThis plugin is a drop-in replacement for the standard select element with multiple attribute activated.http://loudev.com/
jQuery SparklinesThis jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.http://omnipotent.net/jquery….
jQuery Input MaskjQuery Input Mask is a jquery plugin which create an input mask. An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers.http://github.com/RobinHerbot…
jQuery Easy Pie ChartLightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas elementhttp://rendro.github.io/easy-…
jQuery Input IP Address ControlDuring user input field, this plugin controls the format of IPv4 or IPv6 addresses.https://code.google.com/p/jqu…
jQuery UI SortablejQuery UI Sortablehttp://jqueryui.com/sortable/
Pace – Page Progress Barn automatic web page progress bar. Pace will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress. For more info check the plugin documentation.http://github.hubspot.com/pace
jQuery BlockUIThe jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browserhttp://jquery.malsup.com/block/
jQuery CookieA simple, lightweight jQuery plugin for reading, writing and deleting cookies.https://github.com/carhartl/j…
jQuery PulsatejQuery Pulsate provides animated pulsating effect that’s useful for focussing attention to a certain part of your webpage in a subtle way.http://kilianvalkhof.com/jque…
RespondA fast & lightweight polyfill for min/max-width and CSS3 Media Queries (for IE 6-8, and more)https://github.com/scottjehl/…
ExcanvasModern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pageshttp://excanvas.sourceforge.net/
jQuery BackstretchA simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element.http://srobbin.com/jquery-plu…
jQuery CountdownA jQuery plugin that sets a div or span to show a countdown to a given time.http://keith-wood.name/countd…
jQuery Bootpad for BootstrapDynamic pagination jQuery plugin. Works well with twitter bootstrap or standalone.http://botmonster.com/jquery-…
Colorpicker for BootstrapAdd color picker to field or to any other elementhttp://www.eyecon.ro/bootstra…
Datepicker for BootstrapAdd datepicker picker to field or to any other elementhttps://github.com/eternicode…
Bootstrap DatetimepickerThis project is a fork of bootstrap-datetimepicker project which doesn’t include Time part. Some others parts has been improved as for example the load process which now accepts the ISO-8601 format.http://www.malot.fr/bootstrap…
Date Range Picker for BootstrapThis date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dateshttps://github.com/dangrossma…
Bootstrap TimepickerEasily select a time for a text input using your mouse or keyboards arrow keys.http://jdewit.github.com/boot…
Clockface TimepickerClockface is a simple timepicker for Twitter Bootstraphttp://vitalets.github.com/cl…
Bootstrap GrowlPretty simple jQuery plugin that turns standard Bootstrap alerts into “Growl-like” notifications.https://github.com/ifightcrim…
Bootstrap TabdropVery usefull script when your tabs do not fit in a single row. This script takes the not fitting tabs and makes a new dropdown tab. In the dropdown there are all the tabs that do not fit.http://www.eyecon.ro/bootstra…
Bootstrap Select SplitterTransforms SELECT containing one or more OPTGROUP in two chained SELECT.https://github.com/xavierfauc…
jQuery MiniColorsA tiny color picker built on jQueryhttps://github.com/claviska/j…
jQuery Tags InputMagically convert a simple text input into a cool tag list with this jQuery pluginhttps://github.com/xoxco/jQue…
Bootstrap WYSIWYG5Simple WYSIWYG Editor for Bootstraphttp://jhollingworth.github.c…
CKEditorCKEditor is a ready-for-use HTML text editor designed to simplify web content creationhttp://ckeditor.com/
DataTablesDataTables for Twitter Bootstraphttp://www.datatables.net/
Bootstrap File InputThe file upload plugin allows you to create a visually appealing file or image upload widgetshttp://jasny.github.io/bootst…
FancyBoxFancyBox is a tool for displaying images, html content and multi-mediahttp://fancybox.net/
FlotFlot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.http://www.flotcharts.org/
gmaps.jsgmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of codehttp://hpneo.github.com/gmaps/
FullCalendarFullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendarhttp://arshaw.com/fullcalendar/
jQuery slimScrollslimScroll is a small (3.7KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbarhttp://rocha.la/jQuery-slimSc…
JQVMAPJQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9. Legacy support for older versions of Internet Explorer 6-8 is provided via VML.http://jqvmap.com/
jQuery File UploadFile Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQueryhttp://blueimp.github.com/jQu…
DropzoneJSDropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.http://www.dropzonejs.com/
jQuery UI Touch PunchjQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.http://touchpunch.furf.com/
Bootstrap Form WizardThis twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.https://github.com/VinceG/twi…
NestableDrag & drop hierarchical list with mouse and touch compatibility.https://github.com/dbushell/N…
jQuery Validation PluginThe jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easyhttp://bassistance.de/jquery-…
FontAwesomeThe iconic font designed for use with Twitter Bootstraphttp://fortawesome.github.com…
Simple Line IconsSimple Line Icons is 162 simple stroke icons that are great for mobile applications, websites, user interfaces, etc. All icons were converted from the same beautiful simple line icon sets released previously on GraphicBurger.http://graphicburger.com/simp…
Open SansMetornic uses Open Sans web font from google fonts: http://fonts.googleapis.com/c…http://www.google.com/webfonts

上一篇:Bootstrap 之 Metronic 模板的进修之路 – (3)源码剖析之 body 部份
下一篇:Bootstrap 之 Metronic 模板的进修之路 – (5)主题&规划设置

    原文作者:ingood
    原文地址: https://segmentfault.com/a/1190000006709967
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞