You've already forked codeigniter_test
first commit
This commit is contained in:
133
asset/js/facebox-master/examples/css/example.css
Normal file
133
asset/js/facebox-master/examples/css/example.css
Normal file
@ -0,0 +1,133 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3B5998;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.amp {
|
||||
font-family: Georgia;
|
||||
}
|
||||
|
||||
#facebox .bolder {
|
||||
background: red;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
padding: 20px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 400px;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
#main {
|
||||
margin: 0 auto;
|
||||
width: 730px;
|
||||
}
|
||||
|
||||
#shadow {
|
||||
background: transparent url(/facebox/shadow.gif) repeat-y scroll right top;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin: 2px 0px 0px 1px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
border-color: #333 #B7B7B7 rgb(59, 89, 152);
|
||||
border-style: none solid solid;
|
||||
border-width: medium 1px 1px;
|
||||
margin: -2px 1px 0px -1px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.example {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.example h2 {
|
||||
border-bottom: 1px solid #D8DFEA;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.example ul li {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #F7F7F7;
|
||||
border-top: 1px solid #EBEBEB;
|
||||
border-bottom: 1px solid #EBEBEB;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.code h3 {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.code code {
|
||||
margin: 10px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#screenshots a {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#screenshots img {
|
||||
padding: 3px;
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#footer {
|
||||
padding: 8px 10px 0px;
|
||||
color: #777;
|
||||
line-height: 16px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#footer p {
|
||||
margin: 0;
|
||||
}
|
BIN
asset/js/facebox-master/examples/images/logo.png
Normal file
BIN
asset/js/facebox-master/examples/images/logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.8 KiB |
BIN
asset/js/facebox-master/examples/images/stairs.jpg
Normal file
BIN
asset/js/facebox-master/examples/images/stairs.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 120 KiB |
241
asset/js/facebox-master/examples/index.html
Normal file
241
asset/js/facebox-master/examples/index.html
Normal file
@ -0,0 +1,241 @@
|
||||
<!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" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<title>Facebox 1.2</title>
|
||||
<link href="../src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<link href="css/example.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<script src="../lib/jquery.js" type="text/javascript"></script>
|
||||
<script src="../src/facebox.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function($) {
|
||||
$('a[rel*=facebox]').facebox({
|
||||
loadingImage : '../src/loading.gif',
|
||||
closeImage : '../src/closelabel.png'
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main">
|
||||
<div id="shadow">
|
||||
<div id="content">
|
||||
<div id="logo">
|
||||
<img src="images/logo.png"/>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h2>What is it?</h2>
|
||||
<p>
|
||||
Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h2>Why another lightbox?</h2>
|
||||
<p>
|
||||
Because we wanted, nay, <em>needed</em> a Facebook-style lightbox on <a href="http://famspam.com">FamSpam</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h2>Download</h2>
|
||||
|
||||
<p>Requires <a href="http://jquery.com">jQuery 1.2.1</a>.</p>
|
||||
<p>
|
||||
You'll need a loading image, close label, four corners, and solid border images in addition to the javascript and css files. All are included
|
||||
in the tarball.
|
||||
</p>
|
||||
<p>
|
||||
<strong><a href="releases/facebox-1.2.tar.gz">Download Facebox v1.2</a></strong>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Want to live on the edge? The code is kept in <strong><a href="http://github.com">GitHub</a></strong> at <a href="http://github.com/defunkt/facebox">http://github.com/defunkt/facebox</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="example">
|
||||
<h2>Help!</h2>
|
||||
|
||||
<p> Need help? Join our <a href="http://groups.google.com/group/facebox/">Google Groups mailing list</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h2>Images</h2>
|
||||
|
||||
<p> <a href="images/stairs.jpg" rel="facebox">View 'images/stairs.jpg' in the Facebox</a> </p>
|
||||
|
||||
<div class="code">
|
||||
<h3>The Code</h3>
|
||||
<code><a href="images/stairs.jpg" rel="facebox">text</a></code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h2>Divs</h2>
|
||||
|
||||
<p> <a href="#info" rel="facebox">View the 'info' div in the Facebox</a> </p>
|
||||
|
||||
<div class="code">
|
||||
<h3>The Code</h3>
|
||||
<code><a href="#info" rel="facebox">text</a></code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h2>Ajaxes</h2>
|
||||
|
||||
<p> <a href="remote.html" rel="facebox">View 'remote.html' in the Facebox</a> </p>
|
||||
|
||||
<div class="code">
|
||||
<h3>The Code</h3>
|
||||
<code><a href="remote.html" rel="facebox">text</a></code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h2>Load Dependencies</h2>
|
||||
|
||||
<p>Make sure jQuery is loaded before Facebox.</p>
|
||||
|
||||
<div class="code">
|
||||
<code>
|
||||
<script src="jquery.js" type="text/javascript"></script><br/>
|
||||
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/><br/>
|
||||
<script src="/facebox/facebox.js" type="text/javascript"></script>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h2>Attach It onLoad</h2>
|
||||
|
||||
<p>While calling <code>facebox()</code> on any anchor tag will do the trick, it's easier to give your Faceboxy links a <code>rel="facebox"</code> and hit them all onLoad.</p>
|
||||
|
||||
<div class="code">
|
||||
<code>
|
||||
jQuery(document).ready(function($) {<br/>
|
||||
$('a[rel*=facebox]').facebox() <br/>
|
||||
})
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h2>Extra Classes</h2>
|
||||
<p>
|
||||
You can give the facebox container an extra class (to fine-tune the display of reusable remote pages)
|
||||
with the <code>facebox[.class]</code> rel syntax.
|
||||
</p>
|
||||
<p>
|
||||
Maybe your <i>Terms and Conditions</i> can be loaded standalone or via Facebox. When loaded in Facebox,
|
||||
you might want to tweak some styles -- like making the <code>h1</code> positioned absolutely?
|
||||
We do this on FamSpam.
|
||||
</p>
|
||||
<p>
|
||||
<a href="remote.html" rel="facebox[.bolder]">
|
||||
View an an example which makes the <code>remote.html</code> page bigger and bolder using css.
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<div class="code">
|
||||
<h3>The Code</h3>
|
||||
<code><a href="remote.html" rel="facebox[.bolder]">text</a></code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h2>Controlling Facebox Programmatically</h2>
|
||||
<p>
|
||||
It's possible to attain a higher level control over Facebox by calling methods directly.
|
||||
The following will open the Facebox and insert the passed string into it:
|
||||
</p>
|
||||
|
||||
<div class="code">
|
||||
<h3>Arbitrary Text</h3>
|
||||
<code>
|
||||
jQuery.facebox('something cool');<br/>
|
||||
jQuery.facebox('something cool', 'my-groovy-style');
|
||||
</code>
|
||||
<h3>Remote files</h3>
|
||||
<code>
|
||||
jQuery.facebox({ ajax: 'remote.html' });<br/>
|
||||
jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style');
|
||||
</code>
|
||||
<h3>Image</h3>
|
||||
<code>
|
||||
jQuery.facebox({ image: 'images/stairs.jpg' });<br/>
|
||||
jQuery.facebox({ image: 'images/stairs.jpg' }, 'my-groovy-style');
|
||||
</code>
|
||||
<h3>A Page Element</h3>
|
||||
<code>
|
||||
jQuery.facebox({ div: '#box' });<br/>
|
||||
jQuery.facebox({ div: '#box' }, 'my-groovy-style');
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
If you plan to fill the Facebox with the result of an Ajax call, you'll want the loading graphic
|
||||
displayed whilst your asynchronus task runs. This is the automatic behavior if the <code>facebox()</code>
|
||||
method is passed a function.
|
||||
</p>
|
||||
|
||||
<div class="code">
|
||||
<h3>Loading Image Displayed</h3>
|
||||
<code>
|
||||
jQuery.facebox(function() { <br/>
|
||||
jQuery.get('code.js', function(data) {<br/>
|
||||
jQuery.facebox('<textarea>' + data + '</textarea>')<br/>
|
||||
})<br/>
|
||||
})
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h2>Thanks <span class="amp">&</span> Contact</h2>
|
||||
<p>
|
||||
Thanks to Facebook for the idea and style. Thanks to Mindy Tchieu for her help in getting this working.
|
||||
</p>
|
||||
<p>
|
||||
Comments, concerns, complaints, criticisms, confessions? Join our <a href="http://groups.google.com/group/facebox/">Google Groups mailing list</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<p class="right">
|
||||
<a href="http://groups.google.com/group/facebox/">Google Groups mailing list</a>
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li> Code ©2007/2008 Chris Wanstrath </li>
|
||||
<li> Style ©2007 Facebook </li>
|
||||
<li>MIT License</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="info" style="display:none;">
|
||||
<p> Hey, I'm the 'info' div! </p>
|
||||
<p> I look like this: </p>
|
||||
<code>
|
||||
<div id="info" style="display:none;"> <br/>
|
||||
text<br/>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<script src="http://static.getclicky.com/21321.js" type="text/javascript"></script>
|
||||
<noscript><p><img alt="Clicky" src="http://in.getclicky.com/21321-db3.gif" /></p></noscript>
|
||||
</body>
|
||||
</html>
|
1
asset/js/facebox-master/examples/remote.html
Normal file
1
asset/js/facebox-master/examples/remote.html
Normal file
@ -0,0 +1 @@
|
||||
I'm remote.html, a different file loaded with ajax.
|
52
asset/js/facebox-master/examples/test.html
Normal file
52
asset/js/facebox-master/examples/test.html
Normal file
@ -0,0 +1,52 @@
|
||||
<!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" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<title>Facebox 1.2</title>
|
||||
<link href="facebox.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<style>
|
||||
#facebox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
text-align: left;
|
||||
margin-top: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="facebox">
|
||||
<div class="popup">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="tl"/><td class="b"/><td class="tr"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="b"/>
|
||||
<td class="body">
|
||||
<div class="content">
|
||||
<div class="image"><img src="/facebox/stairs.jpg" /></div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a href="#" class="close">
|
||||
<img src="/images/closelabel.gif" title="close" class="close_image" />
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="b"/>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bl"/><td class="b"/><td class="br"/>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
54
asset/js/facebox-master/examples/test_programmatic.html
Normal file
54
asset/js/facebox-master/examples/test_programmatic.html
Normal file
@ -0,0 +1,54 @@
|
||||
<!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" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<title>Facebox 1.2 Programmatic Tests</title>
|
||||
<link href="facebox.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<link href="faceplant.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<script src="jquery.js" type="text/javascript"></script>
|
||||
<script src="facebox.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function($) {
|
||||
$('a[rel*=facebox]').facebox({
|
||||
loading_image : 'loading.gif',
|
||||
close_image : 'closelabel.gif'
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.my-groovy-style {
|
||||
color: yellow;
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
.my-groovy-style img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Programmatic Tests</h1>
|
||||
<a href="javascript: jQuery.facebox('something cool');">Programmatic text.</a><br/>
|
||||
<a href="javascript: jQuery.facebox('something cool', 'my-groovy-style');">Programmatic text with a style.</a><br/>
|
||||
|
||||
<a href="javascript: jQuery.facebox({image:'stairs.jpg'});">Programmatic image.</a><br/>
|
||||
<a href="javascript: jQuery.facebox({image:'stairs.jpg'}, 'my-groovy-style');">Programmatic image with a style.</a><br/>
|
||||
|
||||
<a href="javascript: jQuery.facebox({ajax:'remote.html'});">Programmatic ajax.</a><br/>
|
||||
<a href="javascript: jQuery.facebox({ajax:'remote.html'}, 'my-groovy-style');">Programmatic ajax with a style.</a><br/>
|
||||
|
||||
<a href="javascript: jQuery.facebox({div:'#box'});">Programmatic div.</a><br/>
|
||||
<a href="javascript: jQuery.facebox({div:'#box'}, 'my-groovy-style');">Programmatic div with a style.</a><br/>
|
||||
|
||||
<br/>
|
||||
|
||||
<div id="box" style="border: solid; width: 150px;">
|
||||
Watch me go into a facebox!
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
Reference in New Issue
Block a user