artdesign-box-iframe v1.0.0
#ArtDesignBoxIFrame (v1.0.0)
##jQuery PlugIn to load IFrame content
- ArtDesignBoxIFrame is a jQuery PlugIn to load IFrame content
- Full width and full height - 100%
- Class prefix to prevent conflict with classes from other CSS files
- Full style control with JS - no need CSS: icon, colors, opacity etc
- Full control of the position of close element
- Multiple instances
Full instructions, Examples and Download - www.artdesign-jquery.com/ArtDesignBoxIFrame
###Instruction
####Load files
#####First method
Define a required files in file
Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js
window.ArtDesignFilesLoader.RequiredResources([ "JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.css", "JavaScript/ColorAnimation/ColorAnimation.js", "JavaScript/ArtDesign/ArtDesignData2Options/ArtDesignData2Options.js", "JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIconsCode.js", "JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.js", "JavaScript/ArtDesign/ArtDesignBoxIFrame/ArtDesignBoxIFrame.js" ]);
Load
Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js?BasePath=Resources/
with paramBasePath
wereBasePath
is path to folderResources
.<script type="text/javascript" src="Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js?BasePath=Resources/"></script>
Then initialize a PlugIn with function
window.ArtDesignFilesLoader.Ready()
.window.ArtDesignFilesLoader.Ready(function() { $("body").ArtDesignBoxIFrame(); });
#####Second method
Load all the necessary files to run a PlugIn.
<link rel="stylesheet" href="JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.css"> <script type="text/javascript" src="JavaScript/jQuery/jQuery.js"></script> <script type="text/javascript" src="JavaScript/ColorAnimation/ColorAnimation.js"></script> <script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignData2Options/ArtDesignData2Options.js"></script> <script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIconsCode.js"></script> <script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.js"></script> <script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignBoxIFrame/ArtDesignBoxIFrame.js"></script>
Then initialize a PlugIn.
$(document).ready(function() { $("body").ArtDesignBoxIFrame(); }
####SetUp web elements
#####ArtDesignBoxIFrame
Create
<a>
and add attrdata-plugin-ad-box-iframe="box-iframe"
to<a>
.<a href="http://jquery.com" data-plugin-ad-box-iframe="box-iframe">jQuery.com</a>
9 years ago