Js Code:jquery.slidepanel.js
;(function ( $, window, document, undefined ) {
var defaults = {
orientation: 'left',
mode: 'push',
static: false
};
// The actual plugin constructor
function Slidepanel( $element, options ) {
this.$element = $element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this.init();
}
Slidepanel.prototype.init = function () {
var base = this;
if($('#slidepanel').length == 0){
var panel_html = '<div id="slidepanel" class="cb_slide_panel"><div class="wrapper"><a href="#" class="close">Close</a><div class="inner"><div class="wrapper"></div></div></div></div>';
$(panel_html).hide().appendTo($('body'));
}
this.$panel = $('#slidepanel');
this.$body = $('body');
this.$body_position = this.$body.css('position');
//hide the panel and set orientation class for display
this.$panel.hide().addClass('panel_' + this.options.orientation);
//set current trigger link to false for the current panel
this.$panel.data('slidepanel-current', false);
this.$panel.data('slidepanel-loaded', false);
//reset any defined a positions
this.$panel.css('left', '').css('right', '').css('top', '').css('bottom', '');
//set a default top value for left and right orientations
//and set the starting position based on element width
if(this.options.orientation == 'left' || this.options.orientation == 'right') {
var options = {};
options['top'] = 0;
options[this.options.orientation] = -this.$panel.width();
this.$panel.css(options);
}
//set a default left value for top and bottom orientations
//and set the starting position based on element height
if(this.options.orientation == 'top' || this.options.orientation == 'bottom') {
var options = {};
options['left'] = 0;
options[this.options.orientation] = -this.$panel.height();
this.$panel.css(options);
}
//bind click event to trigger ajax load of html content
//and panel display to any elements that have the attribute rel="panel"
$(this.$element).on('click', function(e) {
e.preventDefault();
//if the request mode is static
if(base.options.static) {
//show the panel
base.expand();
}
// if the reques mode is ajax
else {
//load the external html
base.load();
};
});
//listen for a click on the close buttons for this panel
$('.close', this.$panel).click(function(e) {
e.preventDefault();
base.collapse();
});
};
Slidepanel.prototype.load = function() {
var base = this;
//if the current trigger element is the element that just triggered a load
if(this.$panel.data('slidepanel-current') == this.$element) {
//collapse the current panel
this.collapse();
return;
} else {
//show the slide panel
this.expand();
//get the target url
var href = $(this.$element).attr('href');
//prevent an ajax request if the current URL is the the target URL
if(this.$panel.data('slidepanel-loaded') !== href){
//load the content from the target url, and update the panel html
$('.inner .wrapper', this.$panel).html('').load(href, function() {
//remove the loading indicator
base.$panel.removeClass('loading');
//set the current loaded URL to the target URL
base.$panel.data('slidepanel-loaded', href);
});
// the current URL is already loaded
} else {
//remove the loading indicator
this.$panel.removeClass('loading');
}
}
//set the current source element to this element that triggered the load
this.$panel.data('slidepanel-current', this.$element);
};
Slidepanel.prototype.expand = function() {
var base = this;
//set the css properties to animatate
var panel_options = {};
var body_options = {};
panel_options.visible = 'show';
panel_options[this.options.orientation] = 0;
body_options[this.options.orientation] = (this.options.orientation == 'top' || this.options.orientation == 'bottom') ? this.$panel.height() : this.$panel.width();
//if the animation mode is set to push, we move the body in relation to the panel
//else the panel is overlayed on top of the body
if(this.options.mode == 'push'){
//animate the body position in relation to the panel dimensions
this.$body.css('position', 'absolute').animate(body_options, 250);
}
//animate the panel into view
this.$panel.addClass('loading').animate(panel_options, 250, function() {
//show the panel's close button
$('.close', base.$panel).fadeIn(250);
});
};
Slidepanel.prototype.collapse = function() {
//hide the close button for this panel
$('.close', this.$panel).hide();
//set the css properties to animatate
var panel_options = {};
var body_options = {};
panel_options.visible = 'hide';
panel_options[this.options.orientation] = -(this.$panel.width() + 40);
body_options[this.options.orientation] = 0;
//if the animation mode is push, move the document body back to it's original position
if(this.options.mode == 'push'){
this.$body.css('position', this.$body_position).animate(body_options, 250);
}
//animate the panel out of view
this.$panel.animate(panel_options, 250).data('slidepanel-current', false);
};
$.fn['slidepanel'] = function ( options ) {
return this.each(function () {
if (!$.data(this, 'plugin_slidepanel')) {
$.data(this, 'plugin_slidepanel', new Slidepanel( this, options ));
}
});
}
})(jQuery, window);
Css Code: jquery.slidepanel.css
/* Slide Panel */
.cb_slide_panel {
background:#383838;
border-right: 1px solid #E0E0E0;
box-shadow: 1px 1px 23px rgba(0, 0, 0, 0.17), -1px -1px 0 rgba(255, 255, 255, 0.85) inset;
position: fixed;
z-index: 65000;
display: block;
}
.cb_slide_panel.panel_left, .cb_slide_panel.panel_right {
width: 278px;
height: 100%;
}
.cb_slide_panel.panel_right {
box-shadow: 1px 1px 23px rgba(0, 0, 0, 0.17), 1px 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.cb_slide_panel.panel_top, .cb_slide_panel.panel_bottom {
height: 300px;
width: 100%;
}
.cb_slide_panel.panel_top {
box-shadow: 1px 1px 23px rgba(0, 0, 0, 0.17), -1px -1px 0 rgba(255, 255, 255, 0.85) inset;
}
.cb_slide_panel.panel_bottom {
box-shadow: 1px 1px 23px rgba(0, 0, 0, 0.17), 1px 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.cb_slide_panel a.close {
background: #383838;
border: 1px solid #E0E0E0;
height: 40px;
position: absolute;
text-indent: -9999em;
width: 40px;
display: block;
}
.cb_slide_panel.panel_left a.close {
right: -42px;
top: 20px;
}
.cb_slide_panel.panel_right a.close {
left: -42px;
top: 20px;
}
.cb_slide_panel.panel_top a.close {
bottom: -41px;
left: 20px;
}
.cb_slide_panel.panel_bottom a.close {
top: -41px;
left: 20px;
}
.cb_slide_panel a.close:hover {
background-position: -40px 0;
}
.cb_slide_panel .inner { /*-- For inner body -- */
padding: 0px 0 0 0px;
width: 248px;
}
.cb_slide_panel.loading .inner {
min-height: 300px;
background: url(../images/ajax-loader.gif) no-repeat scroll 50% 50% transparent
}
.cb_slide_panel h1 {
color: #FFFFFF;
font-size: 1.2em;
margin: -0.15em 0 20px;
text-shadow: 0 1px 0 #000000;
}
.cb_slide_panel h2 {
border-bottom: 1px solid #276BB3;
color: #FFFFFF;
font-size: 14px;
margin: 0;
padding: 1px 0 0;
text-decoration: none;
text-shadow: 0 1px 0 #1F5287;
}
.cb_slide_panel ul {
padding: 0 0 0 10px;
list-style-type: none;
}
.cb_slide_panel ul li {
}
.cb_slide_panel ul li a {
color: #91aac4;
text-decoration: none;
}
.cb_slide_panel ul li a:hover {
color: #fff;
}
PHP Page: External.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<link href='css/PanelSlide/jquery.slidepanel.css' rel='stylesheet' type='text/css' />
</head>
<body>
<?php
include('config.php');
$userid= $_SESSION['SESS_ID'];
$result = mysql_query("SELECT * FROM user where identificationcode ='09-13906'");
while($row = mysql_fetch_array($result))
{
echo "<div id='container' style='background:url(http://wallpoper.com/images/00/42/74/22/textures-backgrounds_00427422.jpg);background-size:100% 200%; border:0px solid silver;width:100%;height:300px;margin:0px;' class='cb_slide_panel'>";
echo "<p style='margin-left:10px;margin-bottom:10px;margin-top:10px;'>Welcome back, " .$row['name']. "</font><a href='external.html' data-slidepanel='panel' style='float:right;margin-right:10px;text-decoration:none;'>Edit Profile</a></p>";
echo "<img src=".$row['image']." width='200px' height='200px' style='border:2px solid gray; margin-left:20px;'>";
echo "</div>";
}
?>
</body>
</html>
And The Main Page where to apply the slide and call external.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IFSU-CMS My Uploads</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- For the Slide panel -->
<!--Include jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--Include the slidepanel plugin -->
<script type="text/javascript" src="js/PanelSlide/jquery.slidepanel.js"></script>
<!--Add the css -->
<link rel="stylesheet" type="text/css" href="css/PanelSlide/jquery.slidepanel.css">
<script type="text/javascript">
$(document).ready(function(){
$('[data-slidepanel]').slidepanel(
{
orientation: 'top',
mode: 'push'
}
);
});
</script>
<!-- End of the Slide panel -->
</head>
<body>
<a href='external.php' data-slidepanel='panel' style='float:right;margin-right:10px;text-decoration:none;'>View Profile</a>
</body>
</html>
每次加载主页面时，请帮我自动加载面板。
我在这个链接上有这个插件...请看看我的演示文稿是否杂乱而且不清楚。 http://codebomber.com/jquery/slidepanel/#install