### Example CKEditor Installation URL Source: https://github.com/ysshels/adminlte2/blob/master/plugins/ckeditor/README.md An example of the URL to access the CKEditor samples page after installation. ```text http://www.example.com/ckeditor/samples/index.html ``` -------------------------------- ### Install AdminLTE with Composer Source: https://github.com/ysshels/adminlte2/blob/master/README.md Install the AdminLTE package using Composer. Specify the version constraint for compatibility. ```bash composer require "almasaeed2010/adminlte=~2.0" ``` -------------------------------- ### Install AdminLTE with Bower Source: https://github.com/ysshels/adminlte2/blob/master/README.md Install the AdminLTE package using the Bower package manager. ```bash bower install admin-lte ``` -------------------------------- ### Install AdminLTE with npm Source: https://github.com/ysshels/adminlte2/blob/master/README.md Install the AdminLTE package using the npm package manager. Use the --save flag to add it to your project's dependencies. ```bash npm install --save admin-lte ``` -------------------------------- ### Verify CKEditor Installation Source: https://github.com/ysshels/adminlte2/blob/master/plugins/ckeditor/README.md Use this URL to check if CKEditor has been installed correctly. Replace placeholders with your actual site and installation path. ```text http:////samples/index.html ``` -------------------------------- ### Sparkline Bar Chart Examples Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/inline.html Shows how to create bar charts using inline HTML data and how to format tooltips with custom value lookups. ```javascript $('.sparkbar').sparkline('html', { type: 'bar' }); ``` ```javascript $('.barformat').sparkline( [1, 3, 5, 3, 8], { type: 'bar', tooltipFormat: '{{value:levels}} - {{value}}', tooltipValueLookups: { levels: $.range_map({ ':2': 'Low', '3:6': 'Medium', '7:': 'High' }) } } ); ``` -------------------------------- ### Solid Box Examples Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/components.html Demonstrates the usage of solid boxes with different color variations. These boxes are used to group content with a distinct background color. ```HTML
...
``` ```HTML
...
``` ```HTML
...
``` ```HTML
...
``` ```HTML
...
``` ```HTML
...
``` -------------------------------- ### Expandable Box Example (Initially Collapsed) Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/components.html A box that is initially collapsed and can be expanded. It uses the 'collapsed-box' class and a collapse button with a plus icon. ```HTML

Expandable

The body of the box
``` -------------------------------- ### Morris.js Donut Chart Example Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/morris.html Generates a Donut chart to visualize proportions of a whole. This example shows sales data categorized into download, in-store, and mail-order. ```javascript var donut = new Morris.Donut({ element: 'sales-chart', resize: true, colors: ["#3c8dbc", "#f56954", "#00a65a"], data: [ {label: "Download Sales", value: 12}, {label: "In-Store Sales", value: 30}, {label: "Mail-Order Sales", value: 20} ], hideHover: 'auto' }); ``` -------------------------------- ### Morris.js Bar Chart Example Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/morris.html Implements a Bar chart to compare values across categories. This example displays CPU and Disk usage over several years. ```javascript var bar = new Morris.Bar({ element: 'bar-chart', resize: true, data: [ {y: '2006', a: 100, b: 90}, {y: '2007', a: 75, b: 65}, {y: '2008', a: 50, b: 40}, {y: '2009', a: 75, b: 65}, {y: '2010', a: 50, b: 40}, {y: '2011', a: 75, b: 65}, {y: '2012', a: 100, b: 90} ], barColors: ['#00a65a', '#f56954'], xkey: 'y', ykeys: ['a', 'b'], labels: ['CPU', 'DISK'], hideHover: 'auto' }); ``` -------------------------------- ### Direct Chat with Solid Box Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/components.html This example demonstrates how to apply the 'solid-box' class to the Direct Chat component for a different visual style. The core structure and functionality remain the same. ```html

Direct Chat

3
Alexander Pierce 23 Jan 2:00 pm
message user image
Is this template really for free? That's unbelievable!
Sarah Bullock 23 Jan 2:05 pm
message user image
You better believe it!
``` -------------------------------- ### Sparkline Discrete Chart Examples Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/inline.html Illustrates discrete charts, suitable for showing individual data points. Examples include basic usage and charts with a threshold indicator. ```javascript $('.discrete1').sparkline('html', { type: 'discrete', lineColor: 'blue', xwidth: 18 }); ``` ```javascript $('#discrete2').sparkline('html', { type: 'discrete', lineColor: 'blue', thresholdColor: 'red', thresholdValue: 4 }); ``` -------------------------------- ### Initialize KeyTable on Plain HTML Table Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/KeyTable/examples/html.html This Javascript code initializes KeyTable on an HTML table with the ID 'example' by adding the 'KeyTable' class and then instantiating KeyTable. This method is deprecated. ```javascript $(document).ready(function() { $('#example').addClass('KeyTable'); new $.fn.dataTable.KeyTable(); } ); ``` -------------------------------- ### Sparkline Tri-state Chart Examples Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/inline.html Demonstrates tri-state charts, which are useful for showing positive, negative, or neutral values. Includes examples with default and custom color maps. ```javascript $('.sparktristate').sparkline('html', { type: 'tristate' }); ``` ```javascript $('.sparktristatecols').sparkline('html', { type: 'tristate', colorMap: { '-2': '#fa7', '2': '#44f' } }); ``` -------------------------------- ### Initialize AutoFill Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/AutoFill/Readme.txt Initializes the AutoFill extension for a DataTable instance. This is the basic setup required to enable the AutoFill functionality. ```javascript $(document).ready( function () { var table = $('#example').dataTable(); new $.fn.dataTable.AutoFill( table ); } ); ``` -------------------------------- ### Profit Margin Chart Initialization Source: https://github.com/ysshels/adminlte2/blob/master/test.html Initializes a profit margin bar chart using Chart.js. This example reuses the same data and options as the general bar chart. ```javascript var profitChartCanvas = $("#profit-margin").get(0).getContext("2d"); var profitChart = new Chart(profitChartCanvas); profitChart.Bar(barChartData, barChartOptions); ``` -------------------------------- ### Sparkline Line Chart Examples Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/inline.html Demonstrates various line chart configurations, including basic inline data, larger charts, customized appearance, and normal range indicators. ```javascript $('.sparkline-1').sparkline(); ``` ```javascript $('.largeline').sparkline('html', { type: 'line', height: '2.5em', width: '4em' }); ``` ```javascript $('#linecustom').sparkline('html', { height: '1.5em', width: '8em', lineColor: '#f00', fillColor: '#ffa', minSpotColor: false, maxSpotColor: false, spotColor: '#77f', spotRadius: 3 }); ``` ```javascript $('#normalline').sparkline('html', { fillColor: false, normalRangeMin: -1, normalRangeMax: 8 }); ``` ```javascript $('#normalExample').sparkline('html', { fillColor: false, normalRangeMin: 80, normalRangeMax: 95, normalRangeColor: '#4f4' }); ``` -------------------------------- ### Initialize Plugin Communication Source: https://github.com/ysshels/adminlte2/blob/master/plugins/ckeditor/plugins/wsc/dialogs/ciframe.html Sets an interval to periodically send data to the master and starts listening for post messages. This function is typically called on window load. ```javascript function onLoad() { interval = window.setInterval( sendData2Master, 100 ); listenPostMessage(); } ``` -------------------------------- ### Configure Ion Range Slider (Default) Source: https://github.com/ysshels/adminlte2/blob/master/pages/UI/sliders.html Initializes an Ion Range Slider with default configuration. This is useful for quick setup when default values are sufficient. ```javascript $("#range_2").ionRangeSlider(); ``` -------------------------------- ### Box Variants Markup Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/components.html Examples of different box variants using contextual classes like box-default, box-primary, box-info, etc. ```html
...
...
...
...
...
...
``` -------------------------------- ### Sidebar Construction Example Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/components.html This HTML structure defines the main sidebar. It includes optional user panels, search forms, and a hierarchical menu structure with support for multilevel links. ```html
User Image

User Name

Online
``` -------------------------------- ### Available AdminLTE Options Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/adminlte-options.html A comprehensive list of available AdminLTE options for customization. Ensure required plugins like SlimScroll are loaded before app.js if options depend on them. ```javascript { //Add slimscroll to navbar menus //This requires you to load the slimscroll plugin //in every page before app.js navbarMenuSlimscroll: true, navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar navbarMenuHeight: "200px", //The height of the inner menu //General animation speed for JS animated elements such as box collapse/expand and //sidebar treeview slide up/down. This options accepts an integer as milliseconds, //'fast', 'normal', or 'slow' animationSpeed: 500, //Sidebar push menu toggle button selector sidebarToggleSelector: "[data-toggle='offcanvas']", //Activate sidebar push menu sidebarPushMenu: true, //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin) sidebarSlimScroll: true, //Enable sidebar expand on hover effect for sidebar mini //This option is forced to true if both the fixed layout and sidebar mini //are used together sidebarExpandOnHover: false, //BoxRefresh Plugin enableBoxRefresh: true, //Bootstrap.js tooltip enableBSToppltip: true, BSTooltipSelector: "[data-toggle='tooltip']", //Enable Fast Click. Fastclick.js creates a more //native touch experience with touch devices. If you //choose to enable the plugin, make sure you load the script //before AdminLTE's app.js enableFastclick: true, //Control Sidebar Options enableControlSidebar: true, controlSidebarOptions: { //Which button should trigger the open/close event toggleBtnSelector: "[data-toggle='control-sidebar']", //The sidebar selector selector: ".control-sidebar", //Enable slide over content slide: true }, //Box Widget Plugin. Enable this plugin //to allow boxes to be collapsed and/or removed enableBoxWidget: true, //Box Widget plugin options boxWidgetOptions: { boxWidgetIcons: { //Collapse icon collapse: 'fa-minus', //Open icon open: 'fa-plus', //Remove icon remove: 'fa-times' }, boxWidgetSelectors: { //Remove button selector remove: '[data-widget="remove"]', //Collapse button selector collapse: '[data-widget="collapse"]' } }, //Direct Chat plugin options directChat: { //Enable direct chat by default enable: true, //The button to open and close the chat contacts pane contactToggleSelector: '[data-widget="chat-pane-toggle"]' }, //Define the set of colors to use globally around the website colors: { lightBlue: "#3c8dbc", red: "#f56954", green: "#00a65a", aqua: "#00c0ef", yellow: "#f39c12", blue: "#0073b7", navy: "#001F3F", teal: "#39CCCC", olive: "#3D9970", lime: "#01FF70", orange: "#FF851B", fuchsia: "#F012BE", purple: "#8E24AA", maroon: "#D81B60", black: "#222222", gray: "#d2d6de" }, //The standard screen sizes that bootstrap uses. //If you change these in the variables.less file, change //them here too. screenSizes: { xs: 480, sm: 768, md: 992, lg: 1200 } } ``` -------------------------------- ### Sparkline Box Plot Examples Source: https://github.com/ysshels/adminlte2/blob/master/pages/charts/inline.html Provides examples of box plots, including raw data input and options for showing outliers and specifying tooltip field order. ```javascript $('.sparkboxplot').sparkline('html', { type: 'box' }); ``` ```javascript $('.sparkboxplotraw').sparkline( [1, 3, 5, 8, 10, 15, 18], { type: 'box', raw: true, showOutliers: true, target: 6 } ); ``` ```javascript $('.boxfieldorder').sparkline('html', { type: 'box', tooltipFormatFieldlist: ['med', 'lq', 'uq'], tooltipFormatFieldlistKey: 'field' }); ``` -------------------------------- ### Initialize DataTables with Responsive Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/Responsive/examples/display-control/auto.html Initializes a DataTable with the Responsive extension enabled. This allows for automatic column hiding based on screen size. ```javascript $(document).ready(function() { $('#example').DataTable(); } ); ``` -------------------------------- ### Server-side Processing Script (PHP Example) Source: https://github.com/ysshels/adminlte2/blob/master/plugins/datatables/extensions/ColReorder/examples/colvis.html An example server-side processing script using PHP for DataTables. This script handles data retrieval and filtering for dynamic tables. Adapt this to your server-side language and environment. ```php

Removable

The body of the box
``` -------------------------------- ### Initialize Color Picker with Addon Source: https://github.com/ysshels/adminlte2/blob/master/pages/forms/advanced.html Initializes the color picker plugin for an element with the class 'my-colorpicker2', including an addon. ```javascript //color picker with addon $(".my-colorpicker2").colorpicker(); ``` -------------------------------- ### Collapsable Box Example Source: https://github.com/ysshels/adminlte2/blob/master/documentation/build/include/components.html A standard box that can be collapsed and expanded using the collapse widget. ```HTML

Collapsable

The body of the box
``` -------------------------------- ### Initialize CKEditor Source: https://github.com/ysshels/adminlte2/blob/master/pages/forms/editors.html Replace a textarea with a CKEditor instance using default configuration. Ensure CKEditor is loaded before calling this. ```javascript $(function () { // Replace the