Add html files
This commit is contained in:
102
include/jQuery/ckeditor/plugins/autogrow/samples/autogrow.html
Executable file
102
include/jQuery/ckeditor/plugins/autogrow/samples/autogrow.html
Executable file
@@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>AutoGrow Plugin — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/old/sample.css">
|
||||
<meta name="ckeditor-sample-name" content="AutoGrow plugin">
|
||||
<meta name="ckeditor-sample-group" content="Plugins">
|
||||
<meta name="ckeditor-sample-description" content="Using the AutoGrow plugin in order to make the editor grow to fit the size of its content.">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/old/index.html">CKEditor Samples</a> » Using AutoGrow Plugin
|
||||
</h1>
|
||||
<div class="warning deprecated">
|
||||
This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/autogrow.html">brand new version in CKEditor SDK</a>.
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to configure CKEditor instances to use the
|
||||
<strong>AutoGrow</strong> (<code>autogrow</code>) plugin that lets the editor window expand
|
||||
and shrink depending on the amount and size of content entered in the editing area.
|
||||
</p>
|
||||
<p>
|
||||
In its default implementation the <strong>AutoGrow feature</strong> can expand the
|
||||
CKEditor window infinitely in order to avoid introducing scrollbars to the editing area.
|
||||
</p>
|
||||
<p>
|
||||
It is also possible to set a maximum height for the editor window. Once CKEditor
|
||||
editing area reaches the value in pixels specified in the
|
||||
<code><a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-autoGrow_maxHeight">autoGrow_maxHeight</a></code>
|
||||
configuration setting, scrollbars will be added and the editor window will no longer expand.
|
||||
</p>
|
||||
<p>
|
||||
To add a CKEditor instance using the <code>autogrow</code> plugin and its
|
||||
<code>autoGrow_maxHeight</code> attribute, insert the following JavaScript call to your code:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( '<em>textarea_id</em>', {
|
||||
<strong>extraPlugins: 'autogrow',</strong>
|
||||
autoGrow_maxHeight: 800,
|
||||
|
||||
// Remove the Resize plugin as it does not make sense to use it in conjunction with the AutoGrow plugin.
|
||||
removePlugins: 'resize'
|
||||
});</pre>
|
||||
<p>
|
||||
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
|
||||
the <code><textarea></code> element to be replaced with CKEditor. The maximum height should
|
||||
be given in pixels.
|
||||
</p>
|
||||
</div>
|
||||
<form action="../../../samples/sample_posteddata.php" method="post">
|
||||
<p>
|
||||
<label for="editor1">
|
||||
CKEditor using the <code>autogrow</code> plugin with its default configuration:
|
||||
</label>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<script>
|
||||
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
extraPlugins: 'autogrow',
|
||||
removePlugins: 'resize'
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<p>
|
||||
<label for="editor2">
|
||||
CKEditor using the <code>autogrow</code> plugin with maximum height set to 400 pixels:
|
||||
</label>
|
||||
<textarea cols="80" id="editor2" name="editor2" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<script>
|
||||
|
||||
CKEDITOR.replace( 'editor2', {
|
||||
extraPlugins: 'autogrow',
|
||||
autoGrow_maxHeight: 400,
|
||||
removePlugins: 'resize'
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Submit">
|
||||
</p>
|
||||
</form>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
66
include/jQuery/ckeditor/plugins/imagepaste/docs/install.html
Executable file
66
include/jQuery/ckeditor/plugins/imagepaste/docs/install.html
Executable file
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Image paste plugin</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Image paste Plugin for CKEditor</h1>
|
||||
|
||||
<h2>Introduction</h2>
|
||||
<p>This is a plugin that automatically uploads to the server the images pasted from the clipboard with Firefox in <a href="http://www.ckeditor.com">CKEditor</a>.</p>
|
||||
|
||||
<h3 id="contact">Author:</h3>
|
||||
<p><a href="mailto:amla70@gmail.com">Alfonso Martínez de Lizarrondo</a></p>
|
||||
|
||||
<h3>Version history: </h3>
|
||||
<ol>
|
||||
<li>1.0: 28-September-2011. First public version.</li>
|
||||
<li>1.1: 7-October-2013. Compatibility with CKEditor 4. Sorry to everyone that has tried to use it before, but I didn't realize that it was broken all along as it's a simple fix that I did long ago in the commercial version.<br>
|
||||
At the same time, I'm removing the useless "webkit-fake-url" crap that Safari generates but that it can't be used for anything.</li>
|
||||
</ol>
|
||||
|
||||
<h2>Installation</h2>
|
||||
<h3>1. Copying the files</h3>
|
||||
<p>Extract the contents of the zip in you plugins directory, so it ends up like
|
||||
this<br>
|
||||
<!--<img src="installation.png" alt="Screenshot of installation" width="311" height="346" longdesc="#install">-->
|
||||
</p>
|
||||
<pre id="--install">
|
||||
ckeditor\
|
||||
...
|
||||
images\
|
||||
lang\
|
||||
plugins\
|
||||
...
|
||||
imagepaste\
|
||||
plugin.js
|
||||
docs\
|
||||
install.html
|
||||
...
|
||||
skins\
|
||||
themes\
|
||||
</pre>
|
||||
<h3>2. Adding it to CKEditor</h3>
|
||||
<p>Now add the plugin in your <em>config.js</em> or custom js configuration
|
||||
file:
|
||||
<code>config.extraPlugins='imagepaste'; </code>
|
||||
</p>
|
||||
|
||||
<h3>3. Configuration</h3>
|
||||
<p>You have to configure the filebrowserImageUploadUrl entry as you might have already done to allow the user to upload images. You can get a simple script to use as a guide for your code <a href="http://alfonsoml.blogspot.com.es/2013/08/a-basic-upload-script-for-ckeditor.html">in this post in my blog</a>.</p>
|
||||
|
||||
<h3>4. Use it</h3>
|
||||
<p>Using Firefox, paste an image into the body of CKEditor. That image will be uploaded to the server and it will use the correct URL instead of "data:".</p>
|
||||
|
||||
<!--
|
||||
<h2>Final notes</h2>
|
||||
-->
|
||||
|
||||
<h2>Disclaimers</h2>
|
||||
<p>CKEditor is © CKSource.com</p>
|
||||
</body>
|
||||
</html>
|
||||
107
include/jQuery/ckeditor/plugins/tableresize/dev/tableresize.html
Executable file
107
include/jQuery/ckeditor/plugins/tableresize/dev/tableresize.html
Executable file
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>TableResize Plugin dev sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/sample.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
TableResize Plugin - dev sample
|
||||
</h1>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10">
|
||||
<table style="width: 500px;" border="1">
|
||||
<caption>
|
||||
A sample table</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Column 1</td>
|
||||
<td>
|
||||
Column 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
You can resize a table column.</td>
|
||||
<td>
|
||||
Hover your mouse over its border.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Watch the cursor change.</td>
|
||||
<td>
|
||||
Now click and drag to resize.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</textarea>
|
||||
|
||||
<div id="inline" contenteditable="true">
|
||||
<table style="width: 500px;" border="1">
|
||||
<caption>
|
||||
A sample table</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Column 1</td>
|
||||
<td>
|
||||
Column 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
You can resize a table column.</td>
|
||||
<td>
|
||||
Hover your mouse over its border.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Watch the cursor change.</td>
|
||||
<td>
|
||||
Now click and drag to resize.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<table style="width: 500px;" border="1">
|
||||
<caption>
|
||||
A sample table</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Column 1</td>
|
||||
<td>
|
||||
Column 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
You can resize a table column.</td>
|
||||
<td>
|
||||
Hover your mouse over its border.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Watch the cursor change.</td>
|
||||
<td>
|
||||
Now click and drag to resize.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<script>
|
||||
CKEDITOR.disableAutoInline = true;
|
||||
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
extraPlugins: 'tableresize'
|
||||
} );
|
||||
|
||||
CKEDITOR.inline( 'inline', {
|
||||
extraPlugins: 'tableresize'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
104
include/jQuery/ckeditor/plugins/tableresize/samples/tableresize.html
Executable file
104
include/jQuery/ckeditor/plugins/tableresize/samples/tableresize.html
Executable file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Using TableResize Plugin — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/sample.css">
|
||||
<meta name="ckeditor-sample-name" content="TableResize plugin">
|
||||
<meta name="ckeditor-sample-group" content="Plugins">
|
||||
<meta name="ckeditor-sample-description" content="Using the TableResize plugin to enable table column resizing.">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/index.html">CKEditor Samples</a> » Using the TableResize Plugin
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to configure CKEditor instances to use the
|
||||
<strong>TableResize</strong> (<code>tableresize</code>) plugin that allows
|
||||
the user to edit table columns by using the mouse.
|
||||
</p>
|
||||
<p>
|
||||
The TableResize plugin makes it possible to modify table column width. Hover
|
||||
your mouse over the column border to see the cursor change to indicate that
|
||||
the column can be resized. Click and drag your mouse to set the desired width.
|
||||
</p>
|
||||
<p>
|
||||
By default the plugin is turned off. To add a CKEditor instance using the
|
||||
TableResize plugin, insert the following JavaScript call into your code:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( '<em>textarea_id</em>', {
|
||||
<strong>extraPlugins: 'tableresize'</strong>
|
||||
});</pre>
|
||||
<p>
|
||||
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
|
||||
the <code><textarea></code> element to be replaced with CKEditor.
|
||||
</p>
|
||||
</div>
|
||||
<form action="../../../samples/sample_posteddata.php" method="post">
|
||||
<p>
|
||||
<label for="editor1">
|
||||
CKEditor using the <code>tableresize</code> plugin:
|
||||
</label>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10">
|
||||
<table style="width: 500px;" border="1">
|
||||
<caption>
|
||||
A sample table</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Column 1</td>
|
||||
<td>
|
||||
Column 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
You can resize a table column.</td>
|
||||
<td>
|
||||
Hover your mouse over its border.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Watch the cursor change.</td>
|
||||
<td>
|
||||
Now click and drag to resize.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</textarea>
|
||||
<script>
|
||||
|
||||
// This call can be placed at any point after the
|
||||
// <textarea>, or inside a <head><script> in a
|
||||
// window.onload event handler.
|
||||
|
||||
// Replace the <textarea id="editor"> with an CKEditor
|
||||
// instance, using default configurations.
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
extraPlugins: 'tableresize'
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Submit">
|
||||
</p>
|
||||
</form>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
82
include/jQuery/ckeditor/samples/ajax.html
Executable file
82
include/jQuery/ckeditor/samples/ajax.html
Executable file
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ajax — CKEditor Sample</title>
|
||||
<script src="../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="sample.css">
|
||||
<script>
|
||||
|
||||
var editor, html = '';
|
||||
|
||||
function createEditor() {
|
||||
if ( editor )
|
||||
return;
|
||||
|
||||
// Create a new editor inside the <div id="editor">, setting its value to html
|
||||
var config = {};
|
||||
editor = CKEDITOR.appendTo( 'editor', config, html );
|
||||
}
|
||||
|
||||
function removeEditor() {
|
||||
if ( !editor )
|
||||
return;
|
||||
|
||||
// Retrieve the editor contents. In an Ajax application, this data would be
|
||||
// sent to the server or used in any other way.
|
||||
document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData();
|
||||
document.getElementById( 'contents' ).style.display = '';
|
||||
|
||||
// Destroy the editor.
|
||||
editor.destroy();
|
||||
editor = null;
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="index.html">CKEditor Samples</a> » Create and Destroy Editor Instances for Ajax Applications
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to create and destroy CKEditor instances on the fly. After the removal of CKEditor the content created inside the editing
|
||||
area will be displayed in a <code><div></code> element.
|
||||
</p>
|
||||
<p>
|
||||
For details of how to create this setup check the source code of this sample page
|
||||
for JavaScript code responsible for the creation and destruction of a CKEditor instance.
|
||||
</p>
|
||||
</div>
|
||||
<p>Click the buttons to create and remove a CKEditor instance.</p>
|
||||
<p>
|
||||
<input onclick="createEditor();" type="button" value="Create Editor">
|
||||
<input onclick="removeEditor();" type="button" value="Remove Editor">
|
||||
</p>
|
||||
<!-- This div will hold the editor. -->
|
||||
<div id="editor">
|
||||
</div>
|
||||
<div id="contents" style="display: none">
|
||||
<p>
|
||||
Edited Contents:
|
||||
</p>
|
||||
<!-- This div will be used to display the editor contents. -->
|
||||
<div id="editorcontents">
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
207
include/jQuery/ckeditor/samples/api.html
Executable file
207
include/jQuery/ckeditor/samples/api.html
Executable file
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>API Usage — CKEditor Sample</title>
|
||||
<script src="../ckeditor.js"></script>
|
||||
<link href="sample.css" rel="stylesheet">
|
||||
<script>
|
||||
|
||||
// The instanceReady event is fired, when an instance of CKEditor has finished
|
||||
// its initialization.
|
||||
CKEDITOR.on( 'instanceReady', function( ev ) {
|
||||
// Show the editor name and description in the browser status bar.
|
||||
document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';
|
||||
|
||||
// Show this sample buttons.
|
||||
document.getElementById( 'eButtons' ).style.display = 'block';
|
||||
});
|
||||
|
||||
function InsertHTML() {
|
||||
// Get the editor instance that we want to interact with.
|
||||
var editor = CKEDITOR.instances.editor1;
|
||||
var value = document.getElementById( 'htmlArea' ).value;
|
||||
|
||||
// Check the active editing mode.
|
||||
if ( editor.mode == 'wysiwyg' )
|
||||
{
|
||||
// Insert HTML code.
|
||||
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
|
||||
editor.insertHtml( value );
|
||||
}
|
||||
else
|
||||
alert( 'You must be in WYSIWYG mode!' );
|
||||
}
|
||||
|
||||
function InsertText() {
|
||||
// Get the editor instance that we want to interact with.
|
||||
var editor = CKEDITOR.instances.editor1;
|
||||
var value = document.getElementById( 'txtArea' ).value;
|
||||
|
||||
// Check the active editing mode.
|
||||
if ( editor.mode == 'wysiwyg' )
|
||||
{
|
||||
// Insert as plain text.
|
||||
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertText
|
||||
editor.insertText( value );
|
||||
}
|
||||
else
|
||||
alert( 'You must be in WYSIWYG mode!' );
|
||||
}
|
||||
|
||||
function SetContents() {
|
||||
// Get the editor instance that we want to interact with.
|
||||
var editor = CKEDITOR.instances.editor1;
|
||||
var value = document.getElementById( 'htmlArea' ).value;
|
||||
|
||||
// Set editor contents (replace current contents).
|
||||
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
|
||||
editor.setData( value );
|
||||
}
|
||||
|
||||
function GetContents() {
|
||||
// Get the editor instance that you want to interact with.
|
||||
var editor = CKEDITOR.instances.editor1;
|
||||
|
||||
// Get editor contents
|
||||
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData
|
||||
alert( editor.getData() );
|
||||
}
|
||||
|
||||
function ExecuteCommand( commandName ) {
|
||||
// Get the editor instance that we want to interact with.
|
||||
var editor = CKEDITOR.instances.editor1;
|
||||
|
||||
// Check the active editing mode.
|
||||
if ( editor.mode == 'wysiwyg' )
|
||||
{
|
||||
// Execute the command.
|
||||
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-execCommand
|
||||
editor.execCommand( commandName );
|
||||
}
|
||||
else
|
||||
alert( 'You must be in WYSIWYG mode!' );
|
||||
}
|
||||
|
||||
function CheckDirty() {
|
||||
// Get the editor instance that we want to interact with.
|
||||
var editor = CKEDITOR.instances.editor1;
|
||||
// Checks whether the current editor contents present changes when compared
|
||||
// to the contents loaded into the editor at startup
|
||||
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-checkDirty
|
||||
alert( editor.checkDirty() );
|
||||
}
|
||||
|
||||
function ResetDirty() {
|
||||
// Get the editor instance that we want to interact with.
|
||||
var editor = CKEDITOR.instances.editor1;
|
||||
// Resets the "dirty state" of the editor (see CheckDirty())
|
||||
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resetDirty
|
||||
editor.resetDirty();
|
||||
alert( 'The "IsDirty" status has been reset' );
|
||||
}
|
||||
|
||||
function Focus() {
|
||||
CKEDITOR.instances.editor1.focus();
|
||||
}
|
||||
|
||||
function onFocus() {
|
||||
document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b>';
|
||||
}
|
||||
|
||||
function onBlur() {
|
||||
document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="index.html">CKEditor Samples</a> » Using CKEditor JavaScript API
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to use the
|
||||
<a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.editor">CKEditor JavaScript API</a>
|
||||
to interact with the editor at runtime.
|
||||
</p>
|
||||
<p>
|
||||
For details on how to create this setup check the source code of this sample page.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- This <div> holds alert messages to be display in the sample page. -->
|
||||
<div id="alerts">
|
||||
<noscript>
|
||||
<p>
|
||||
<strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
|
||||
support, like yours, you should still see the contents (HTML data) and you should
|
||||
be able to edit it normally, without a rich editor interface.
|
||||
</p>
|
||||
</noscript>
|
||||
</div>
|
||||
<form action="../../../samples/sample_posteddata.php" method="post">
|
||||
<textarea cols="100" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
|
||||
<script>
|
||||
// Replace the <textarea id="editor1"> with an CKEditor instance.
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
on: {
|
||||
focus: onFocus,
|
||||
blur: onBlur,
|
||||
|
||||
// Check for availability of corresponding plugins.
|
||||
pluginsLoaded: function( evt ) {
|
||||
var doc = CKEDITOR.document, ed = evt.editor;
|
||||
if ( !ed.getCommand( 'bold' ) )
|
||||
doc.getById( 'exec-bold' ).hide();
|
||||
if ( !ed.getCommand( 'link' ) )
|
||||
doc.getById( 'exec-link' ).hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<p id="eMessage">
|
||||
</p>
|
||||
|
||||
<div id="eButtons" style="display: none">
|
||||
<input id="exec-bold" onclick="ExecuteCommand('bold');" type="button" value="Execute "bold" Command">
|
||||
<input id="exec-link" onclick="ExecuteCommand('link');" type="button" value="Execute "link" Command">
|
||||
<input onclick="Focus();" type="button" value="Focus">
|
||||
<br><br>
|
||||
<input onclick="InsertHTML();" type="button" value="Insert HTML">
|
||||
<input onclick="SetContents();" type="button" value="Set Editor Contents">
|
||||
<input onclick="GetContents();" type="button" value="Get Editor Contents (HTML)">
|
||||
<br>
|
||||
<textarea cols="100" id="htmlArea" rows="3"><h2>Test</h2><p>This is some <a href="/Test1.html">sample</a> HTML code.</p></textarea>
|
||||
<br>
|
||||
<br>
|
||||
<input onclick="InsertText();" type="button" value="Insert Text">
|
||||
<br>
|
||||
<textarea cols="100" id="txtArea" rows="3"> First line with some leading whitespaces.
|
||||
|
||||
Second line of text preceded by two line breaks.</textarea>
|
||||
<br>
|
||||
<br>
|
||||
<input onclick="CheckDirty();" type="button" value="checkDirty()">
|
||||
<input onclick="ResetDirty();" type="button" value="resetDirty()">
|
||||
</div>
|
||||
</form>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
56
include/jQuery/ckeditor/samples/appendto.html
Executable file
56
include/jQuery/ckeditor/samples/appendto.html
Executable file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Append To Page Element Using JavaScript Code — CKEditor Sample</title>
|
||||
<script src="../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="sample.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="index.html">CKEditor Samples</a> » Append To Page Element Using JavaScript Code
|
||||
</h1>
|
||||
<div id="section1">
|
||||
<div class="description">
|
||||
<p>
|
||||
The <code><a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR-method-appendTo">CKEDITOR.appendTo()</a></code> method serves to to place editors inside existing DOM elements. Unlike <code><a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR-method-replace">CKEDITOR.replace()</a></code>,
|
||||
a target container to be replaced is no longer necessary. A new editor
|
||||
instance is inserted directly wherever it is desired.
|
||||
</p>
|
||||
<pre class="samples">CKEDITOR.appendTo( '<em>container_id</em>',
|
||||
{ /* Configuration options to be used. */ }
|
||||
'Editor content to be used.'
|
||||
);</pre>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// This call can be placed at any point after the
|
||||
// DOM element to append CKEditor to or inside the <head><script>
|
||||
// in a window.onload event handler.
|
||||
|
||||
// Append a CKEditor instance using the default configuration and the
|
||||
// provided content to the <div> element of ID "section1".
|
||||
CKEDITOR.appendTo( 'section1',
|
||||
null,
|
||||
'<p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>'
|
||||
);
|
||||
|
||||
</script>
|
||||
</div>
|
||||
<br>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
401
include/jQuery/ckeditor/samples/datafiltering.html
Executable file
401
include/jQuery/ckeditor/samples/datafiltering.html
Executable file
File diff suppressed because one or more lines are too long
141
include/jQuery/ckeditor/samples/divreplace.html
Executable file
141
include/jQuery/ckeditor/samples/divreplace.html
Executable file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Replace DIV — CKEditor Sample</title>
|
||||
<script src="../ckeditor.js"></script>
|
||||
<link href="sample.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
div.editable
|
||||
{
|
||||
border: solid 2px transparent;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
div.editable:hover
|
||||
{
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
|
||||
// Uncomment the following code to test the "Timeout Loading Method".
|
||||
// CKEDITOR.loadFullCoreTimeout = 5;
|
||||
|
||||
window.onload = function() {
|
||||
// Listen to the double click event.
|
||||
if ( window.addEventListener )
|
||||
document.body.addEventListener( 'dblclick', onDoubleClick, false );
|
||||
else if ( window.attachEvent )
|
||||
document.body.attachEvent( 'ondblclick', onDoubleClick );
|
||||
|
||||
};
|
||||
|
||||
function onDoubleClick( ev ) {
|
||||
// Get the element which fired the event. This is not necessarily the
|
||||
// element to which the event has been attached.
|
||||
var element = ev.target || ev.srcElement;
|
||||
|
||||
// Find out the div that holds this element.
|
||||
var name;
|
||||
|
||||
do {
|
||||
element = element.parentNode;
|
||||
}
|
||||
while ( element && ( name = element.nodeName.toLowerCase() ) &&
|
||||
( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' );
|
||||
|
||||
if ( name == 'div' && element.className.indexOf( 'editable' ) != -1 )
|
||||
replaceDiv( element );
|
||||
}
|
||||
|
||||
var editor;
|
||||
|
||||
function replaceDiv( div ) {
|
||||
if ( editor )
|
||||
editor.destroy();
|
||||
|
||||
editor = CKEDITOR.replace( div );
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="index.html">CKEditor Samples</a> » Replace DIV with CKEditor on the Fly
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to automatically replace <code><div></code> elements
|
||||
with a CKEditor instance on the fly, following user's doubleclick. The content
|
||||
that was previously placed inside the <code><div></code> element will now
|
||||
be moved into CKEditor editing area.
|
||||
</p>
|
||||
<p>
|
||||
For details on how to create this setup check the source code of this sample page.
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
Double-click any of the following <code><div></code> elements to transform them into
|
||||
editor instances.
|
||||
</p>
|
||||
<div class="editable">
|
||||
<h3>
|
||||
Part 1
|
||||
</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
|
||||
semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
|
||||
rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
|
||||
nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
|
||||
eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
|
||||
</p>
|
||||
</div>
|
||||
<div class="editable">
|
||||
<h3>
|
||||
Part 2
|
||||
</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
|
||||
semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
|
||||
rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
|
||||
nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
|
||||
eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
|
||||
</p>
|
||||
<p>
|
||||
Donec velit. Mauris massa. Vestibulum non nulla. Nam suscipit arcu nec elit. Phasellus
|
||||
sollicitudin iaculis ante. Ut non mauris et sapien tincidunt adipiscing. Vestibulum
|
||||
vitae leo. Suspendisse nec mi tristique nulla laoreet vulputate.
|
||||
</p>
|
||||
</div>
|
||||
<div class="editable">
|
||||
<h3>
|
||||
Part 3
|
||||
</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
|
||||
semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
|
||||
rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
|
||||
nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
|
||||
eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
|
||||
</p>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
119
include/jQuery/ckeditor/samples/index.html
Executable file
119
include/jQuery/ckeditor/samples/index.html
Executable file
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKEditor Samples</title>
|
||||
<link rel="stylesheet" href="sample.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
CKEditor Samples
|
||||
</h1>
|
||||
<div class="twoColumns">
|
||||
<div class="twoColumnsLeft">
|
||||
<h2 class="samples">
|
||||
Basic Samples
|
||||
</h2>
|
||||
<dl class="samples">
|
||||
<dt><a class="samples" href="replacebyclass.html">Replace textarea elements by class name</a></dt>
|
||||
<dd>Automatic replacement of all textarea elements of a given class with a CKEditor instance.</dd>
|
||||
|
||||
<dt><a class="samples" href="replacebycode.html">Replace textarea elements by code</a></dt>
|
||||
<dd>Replacement of textarea elements with CKEditor instances by using a JavaScript call.</dd>
|
||||
|
||||
<dt><a class="samples" href="jquery.html">Create editors with jQuery</a></dt>
|
||||
<dd>Creating standard and inline CKEditor instances with jQuery adapter.</dd>
|
||||
</dl>
|
||||
|
||||
<h2 class="samples">
|
||||
Basic Customization
|
||||
</h2>
|
||||
<dl class="samples">
|
||||
<dt><a class="samples" href="uicolor.html">User Interface color</a></dt>
|
||||
<dd>Changing CKEditor User Interface color and adding a toolbar button that lets the user set the UI color.</dd>
|
||||
|
||||
<dt><a class="samples" href="uilanguages.html">User Interface languages</a></dt>
|
||||
<dd>Changing CKEditor User Interface language and adding a drop-down list that lets the user choose the UI language.</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
<h2 class="samples">Plugins</h2>
|
||||
<dl class="samples">
|
||||
<dt><a class="samples" href="plugins/wysiwygarea/fullpage.html">Full page support</a></dt>
|
||||
<dd>CKEditor inserted with a JavaScript call and used to edit the whole page from <html> to </html>.</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="twoColumnsRight">
|
||||
<h2 class="samples">
|
||||
Inline Editing
|
||||
</h2>
|
||||
<dl class="samples">
|
||||
<dt><a class="samples" href="inlineall.html">Massive inline editor creation</a></dt>
|
||||
<dd>Turn all elements with <code>contentEditable = true</code> attribute into inline editors.</dd>
|
||||
|
||||
<dt><a class="samples" href="inlinebycode.html">Convert element into an inline editor by code</a></dt>
|
||||
<dd>Conversion of DOM elements into inline CKEditor instances by using a JavaScript call.</dd>
|
||||
|
||||
<dt><a class="samples" href="inlinetextarea.html">Replace textarea with inline editor</a> <span class="new">New!</span></dt>
|
||||
<dd>A form with a textarea that is replaced by an inline editor at runtime.</dd>
|
||||
|
||||
|
||||
</dl>
|
||||
|
||||
<h2 class="samples">
|
||||
Advanced Samples
|
||||
</h2>
|
||||
<dl class="samples">
|
||||
<dt><a class="samples" href="datafiltering.html">Data filtering and features activation</a> <span class="new">New!</span></dt>
|
||||
<dd>Data filtering and automatic features activation basing on configuration.</dd>
|
||||
|
||||
<dt><a class="samples" href="divreplace.html">Replace DIV elements on the fly</a></dt>
|
||||
<dd>Transforming a <code>div</code> element into an instance of CKEditor with a mouse click.</dd>
|
||||
|
||||
<dt><a class="samples" href="appendto.html">Append editor instances</a></dt>
|
||||
<dd>Appending editor instances to existing DOM elements.</dd>
|
||||
|
||||
<dt><a class="samples" href="ajax.html">Create and destroy editor instances for Ajax applications</a></dt>
|
||||
<dd>Creating and destroying CKEditor instances on the fly and saving the contents entered into the editor window.</dd>
|
||||
|
||||
<dt><a class="samples" href="api.html">Basic usage of the API</a></dt>
|
||||
<dd>Using the CKEditor JavaScript API to interact with the editor at runtime.</dd>
|
||||
|
||||
<dt><a class="samples" href="xhtmlstyle.html">XHTML-compliant style</a></dt>
|
||||
<dd>Configuring CKEditor to produce XHTML 1.1 compliant attributes and styles.</dd>
|
||||
|
||||
<dt><a class="samples" href="readonly.html">Read-only mode</a></dt>
|
||||
<dd>Using the readOnly API to block introducing changes to the editor contents.</dd>
|
||||
|
||||
<dt><a class="samples" href="tabindex.html">"Tab" key-based navigation</a></dt>
|
||||
<dd>Navigating among editor instances with tab key.</dd>
|
||||
|
||||
|
||||
|
||||
<dt><a class="samples" href="plugins/dialog/dialog.html">Using the JavaScript API to customize dialog windows</a></dt>
|
||||
<dd>Using the dialog windows API to customize dialog windows without changing the original editor code.</dd>
|
||||
|
||||
<dt><a class="samples" href="plugins/enterkey/enterkey.html">Using the "Enter" key in CKEditor</a></dt>
|
||||
<dd>Configuring the behavior of <em>Enter</em> and <em>Shift+Enter</em> keys.</dd>
|
||||
|
||||
<dt><a class="samples" href="plugins/toolbar/toolbar.html">Toolbar Configurations</a></dt>
|
||||
<dd>Configuring CKEditor to display full or custom toolbar layout.</dd>
|
||||
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
311
include/jQuery/ckeditor/samples/inlineall.html
Executable file
311
include/jQuery/ckeditor/samples/inlineall.html
Executable file
@@ -0,0 +1,311 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Massive inline editing — CKEditor Sample</title>
|
||||
<script src="../ckeditor.js"></script>
|
||||
<script>
|
||||
|
||||
// This code is generally not necessary, but it is here to demonstrate
|
||||
// how to customize specific editor instances on the fly. This fits well
|
||||
// this demo because we have editable elements (like headers) that
|
||||
// require less features.
|
||||
|
||||
// The "instanceCreated" event is fired for every editor instance created.
|
||||
CKEDITOR.on( 'instanceCreated', function( event ) {
|
||||
var editor = event.editor,
|
||||
element = editor.element;
|
||||
|
||||
// Customize editors for headers and tag list.
|
||||
// These editors don't need features like smileys, templates, iframes etc.
|
||||
if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {
|
||||
// Customize the editor configurations on "configLoaded" event,
|
||||
// which is fired after the configuration file loading and
|
||||
// execution. This makes it possible to change the
|
||||
// configurations before the editor initialization takes place.
|
||||
editor.on( 'configLoaded', function() {
|
||||
|
||||
// Remove unnecessary plugins to make the editor simpler.
|
||||
editor.config.removePlugins = 'colorbutton,find,flash,font,' +
|
||||
'forms,iframe,image,newpage,removeformat,' +
|
||||
'smiley,specialchar,stylescombo,templates';
|
||||
|
||||
// Rearrange the layout of the toolbar.
|
||||
editor.config.toolbarGroups = [
|
||||
{ name: 'editing', groups: [ 'basicstyles', 'links' ] },
|
||||
{ name: 'undo' },
|
||||
{ name: 'clipboard', groups: [ 'selection', 'clipboard' ] },
|
||||
{ name: 'about' }
|
||||
];
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
<link href="sample.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
/* The following styles are just to make the page look nice. */
|
||||
|
||||
/* Workaround to show Arial Black in Firefox. */
|
||||
@font-face
|
||||
{
|
||||
font-family: 'arial-black';
|
||||
src: local('Arial Black');
|
||||
}
|
||||
|
||||
*[contenteditable="true"]
|
||||
{
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#container
|
||||
{
|
||||
width: 960px;
|
||||
margin: 30px auto 0;
|
||||
}
|
||||
|
||||
#header
|
||||
{
|
||||
overflow: hidden;
|
||||
padding: 0 0 30px;
|
||||
border-bottom: 5px solid #05B2D2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#headerLeft,
|
||||
#headerRight
|
||||
{
|
||||
width: 49%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#headerLeft
|
||||
{
|
||||
float: left;
|
||||
padding: 10px 1px 1px;
|
||||
}
|
||||
|
||||
#headerLeft h2,
|
||||
#headerLeft h3
|
||||
{
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#headerLeft h2
|
||||
{
|
||||
font-family: "Arial Black",arial-black;
|
||||
font-size: 4.6em;
|
||||
line-height: 1.1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#headerLeft h3
|
||||
{
|
||||
font-size: 2.3em;
|
||||
line-height: 1.1;
|
||||
margin: .2em 0 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#headerRight
|
||||
{
|
||||
float: right;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
#headerRight p
|
||||
{
|
||||
line-height: 1.8;
|
||||
text-align: justify;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#headerRight p + p
|
||||
{
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#headerRight > div
|
||||
{
|
||||
padding: 20px;
|
||||
margin: 0 0 0 30px;
|
||||
font-size: 1.4em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#columns
|
||||
{
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
#columns > div
|
||||
{
|
||||
float: left;
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
#columns #column1 > div
|
||||
{
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
#columns #column3 > div
|
||||
{
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
#columns > div > div
|
||||
{
|
||||
margin: 0px 10px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
#columns blockquote
|
||||
{
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
#tagLine
|
||||
{
|
||||
border-top: 5px solid #05B2D2;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#taglist {
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
margin: 0 0 0 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h1 class="samples"><a href="index.html">CKEditor Samples</a> » Massive inline editing</h1>
|
||||
<div class="description">
|
||||
<p>This sample page demonstrates the inline editing feature - CKEditor instances will be created automatically from page elements with <strong>contentEditable</strong> attribute set to value <strong>true</strong>:</p>
|
||||
<pre class="samples"><div <strong>contenteditable="true</strong>" > ... </div></pre>
|
||||
<p>Click inside of any element below to start editing.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
<div id="headerLeft">
|
||||
<h2 id="sampleTitle" contenteditable="true">
|
||||
CKEditor<br> Goes Inline!
|
||||
</h2>
|
||||
<h3 contenteditable="true">
|
||||
Lorem ipsum dolor sit amet dolor duis blandit vestibulum faucibus a, tortor.
|
||||
</h3>
|
||||
</div>
|
||||
<div id="headerRight">
|
||||
<div contenteditable="true">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
|
||||
</p>
|
||||
<p>
|
||||
Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="columns">
|
||||
<div id="column1">
|
||||
<div contenteditable="true">
|
||||
<h3>
|
||||
Fusce vitae porttitor
|
||||
</h3>
|
||||
<p>
|
||||
<strong>
|
||||
Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor.
|
||||
</strong>
|
||||
</p>
|
||||
<p>
|
||||
Proin nunc justo felis mollis tincidunt, risus risus pede, posuere cubilia Curae, Nullam euismod, enim. Etiam nibh ultricies dolor ac dignissim erat volutpat. Vivamus fermentum <a href="http://ckeditor.com/">nisl nulla sem in</a> metus. Maecenas wisi. Donec nec erat volutpat.
|
||||
</p>
|
||||
<blockquote>
|
||||
<p>
|
||||
Fusce vitae porttitor a, euismod convallis nisl, blandit risus tortor, pretium.
|
||||
Vehicula vitae, imperdiet vel, ornare enim vel sodales rutrum
|
||||
</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>
|
||||
Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin fringilla. Phasellus ultrices, velit ac arcu.
|
||||
</p>
|
||||
</blockquote>
|
||||
<p>Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.</p>
|
||||
<p><s>Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.</s></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="column2">
|
||||
<div contenteditable="true">
|
||||
<h3>
|
||||
Integer condimentum sit amet
|
||||
</h3>
|
||||
<p>
|
||||
<strong>Aenean nonummy a, mattis varius. Cras aliquet.</strong>
|
||||
Praesent <a href="http://ckeditor.com/">magna non mattis ac, rhoncus nunc</a>, rhoncus eget, cursus pulvinar mollis.</p>
|
||||
<p>Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.</p>
|
||||
<p>Integer condimentum sit amet, tempor elit odio, a dolor non ante at sapien. Sed ac lectus. Nulla ligula quis eleifend mi, id leo velit pede cursus arcu id nulla ac lectus. Phasellus vestibulum. Nunc viverra enim quis diam.</p>
|
||||
</div>
|
||||
<div contenteditable="true">
|
||||
<h3>
|
||||
Praesent wisi accumsan sit amet nibh
|
||||
</h3>
|
||||
<p>Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.</p>
|
||||
<p style="margin-left: 40px; ">Integer faucibus scelerisque. Proin faucibus at, aliquet vulputate, odio at eros. Fusce <a href="http://ckeditor.com/">gravida, erat vitae augue</a>. Fusce urna fringilla gravida.</p>
|
||||
<p>In hac habitasse platea dictumst. Praesent wisi accumsan sit amet nibh. Maecenas orci luctus a, lacinia quam sem, posuere commodo, odio condimentum tempor, pede semper risus. Suspendisse pede. In hac habitasse platea dictumst. Nam sed laoreet sit amet erat. Integer.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="column3">
|
||||
<div contenteditable="true">
|
||||
<p>
|
||||
<img src="assets/inlineall/logo.png" alt="CKEditor logo" style="float:left">
|
||||
</p>
|
||||
<p>Quisque justo neque, mattis sed, fermentum ultrices <strong>posuere cubilia Curae</strong>, Vestibulum elit metus, quis placerat ut, lectus. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi.</p>
|
||||
<h3>
|
||||
Nullam laoreet vel consectetuer tellus suscipit
|
||||
</h3>
|
||||
<ul>
|
||||
<li>Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis.</li>
|
||||
<li>Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi.</li>
|
||||
<li>Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</li>
|
||||
</ul>
|
||||
<p>Quisque justo neque, mattis sed, <a href="http://ckeditor.com/">fermentum ultrices posuere cubilia</a> Curae, Vestibulum elit metus, quis placerat ut, lectus.</p>
|
||||
<p>Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis.</p>
|
||||
<p>Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi. Sed in nonummy faucibus turpis. Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tagLine">
|
||||
Tags of this article:
|
||||
<p id="taglist" contenteditable="true">
|
||||
inline, editing, floating, CKEditor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">
|
||||
http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a>
|
||||
- Frederico Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
121
include/jQuery/ckeditor/samples/inlinebycode.html
Executable file
121
include/jQuery/ckeditor/samples/inlinebycode.html
Executable file
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Inline Editing by Code — CKEditor Sample</title>
|
||||
<script src="../ckeditor.js"></script>
|
||||
<link href="sample.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
#editable
|
||||
{
|
||||
padding: 10px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="index.html">CKEditor Samples</a> » Inline Editing by Code
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to create an inline editor instance of CKEditor. It is created
|
||||
with a JavaScript call using the following code:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
// This property tells CKEditor to not activate every element with contenteditable=true element.
|
||||
CKEDITOR.disableAutoInline = true;
|
||||
|
||||
var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );
|
||||
</pre>
|
||||
<p>
|
||||
Note that <code>editable</code> in the code above is the <code>id</code>
|
||||
attribute of the <code><div></code> element to be converted into an inline instance.
|
||||
</p>
|
||||
</div>
|
||||
<div id="editable" contenteditable="true">
|
||||
<h1><img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg" /> Apollo 11</h1>
|
||||
|
||||
<p><b>Apollo 11</b> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
|
||||
|
||||
<p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5 kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
|
||||
|
||||
<h2>Broadcasting and <em>quotes</em> <a id="quotes" name="quotes"></a></h2>
|
||||
|
||||
<p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>One small step for [a] man, one giant leap for mankind.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a speech before the United States Congress:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
|
||||
|
||||
<table align="right" border="1" bordercolor="#ccc" cellpadding="5" cellspacing="0" style="border-collapse:collapse;margin:10px 0 10px 15px;">
|
||||
<caption><strong>Mission crew</strong></caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Position</th>
|
||||
<th scope="col">Astronaut</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Commander</td>
|
||||
<td>Neil A. Armstrong</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Command Module Pilot</td>
|
||||
<td>Michael Collins</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lunar Module Pilot</td>
|
||||
<td>Edwin "Buzz" E. Aldrin, Jr.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>'s Apollo program. The Apollo spacecraft had three parts:</p>
|
||||
|
||||
<ol>
|
||||
<li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
|
||||
<li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
|
||||
<li><strong>Lunar Module</strong> for landing on the Moon.</li>
|
||||
</ol>
|
||||
|
||||
<p>After being sent to the Moon by the Saturn V's upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p>
|
||||
|
||||
<hr />
|
||||
<p style="text-align: right;"><small>Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a></small></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// We need to turn off the automatic editor creation first.
|
||||
CKEDITOR.disableAutoInline = true;
|
||||
|
||||
var editor = CKEDITOR.inline( 'editable' );
|
||||
</script>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p contenteditable="true">
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">
|
||||
http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a>
|
||||
- Frederico Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
110
include/jQuery/ckeditor/samples/inlinetextarea.html
Executable file
110
include/jQuery/ckeditor/samples/inlinetextarea.html
Executable file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Replace Textarea with Inline Editor — CKEditor Sample</title>
|
||||
<script src="../ckeditor.js"></script>
|
||||
<link href="sample.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
/* Style the CKEditor element to look like a textfield */
|
||||
.cke_textarea_inline
|
||||
{
|
||||
padding: 10px;
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
|
||||
border: 1px solid gray;
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="index.html">CKEditor Samples</a> » Replace Textarea with Inline Editor
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
You can also create an inline editor from a <code>textarea</code>
|
||||
element. In this case the <code>textarea</code> will be replaced
|
||||
by a <code>div</code> element with inline editing enabled.
|
||||
</p>
|
||||
<pre class="samples">
|
||||
// "article-body" is the name of a textarea element.
|
||||
var editor = CKEDITOR.inline( 'article-body' );
|
||||
</pre>
|
||||
</div>
|
||||
<form action="sample_posteddata.php" method="post">
|
||||
<h2>This is a sample form with some fields</h2>
|
||||
<p>
|
||||
Title:<br>
|
||||
<input type="text" name="title" value="Sample Form"></p>
|
||||
<p>
|
||||
Article Body (Textarea converted to CKEditor):<br>
|
||||
<textarea name="article-body" style="height: 200px">
|
||||
<h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
|
||||
|
||||
<table align="right" border="1" bordercolor="#ccc" cellpadding="5" cellspacing="0" style="border-collapse:collapse;margin:10px 0 10px 15px;">
|
||||
<caption><strong>Mission crew</strong></caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Position</th>
|
||||
<th scope="col">Astronaut</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Commander</td>
|
||||
<td>Neil A. Armstrong</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Command Module Pilot</td>
|
||||
<td>Michael Collins</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lunar Module Pilot</td>
|
||||
<td>Edwin "Buzz" E. Aldrin, Jr.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>'s Apollo program. The Apollo spacecraft had three parts:</p>
|
||||
|
||||
<ol>
|
||||
<li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
|
||||
<li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
|
||||
<li><strong>Lunar Module</strong> for landing on the Moon.</li>
|
||||
</ol>
|
||||
|
||||
<p>After being sent to the Moon by the Saturn V's upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p>
|
||||
|
||||
<hr />
|
||||
<p style="text-align: right;"><small>Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a></small></p>
|
||||
</textarea>
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Submit">
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
CKEDITOR.inline( 'article-body' );
|
||||
</script>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">
|
||||
http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a>
|
||||
- Frederico Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
100
include/jQuery/ckeditor/samples/jquery.html
Executable file
100
include/jQuery/ckeditor/samples/jquery.html
Executable file
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery Adapter — CKEditor Sample</title>
|
||||
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script src="../ckeditor.js"></script>
|
||||
<script src="../adapters/jquery.js"></script>
|
||||
<link href="sample.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
#editable
|
||||
{
|
||||
padding: 10px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
|
||||
CKEDITOR.disableAutoInline = true;
|
||||
|
||||
$( document ).ready( function() {
|
||||
$( '#editor1' ).ckeditor(); // Use CKEDITOR.replace() if element is <textarea>.
|
||||
$( '#editable' ).ckeditor(); // Use CKEDITOR.inline().
|
||||
} );
|
||||
|
||||
function setValue() {
|
||||
$( '#editor1' ).val( $( 'input#val' ).val() );
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="index.html" id="a-test">CKEditor Samples</a> » Create Editors with jQuery
|
||||
</h1>
|
||||
<form action="sample_posteddata.php" method="post">
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to use the <a href="http://docs.ckeditor.com/#!/guide/dev_jquery">jQuery adapter</a>.
|
||||
Note that you have to include both CKEditor and jQuery scripts before including the adapter.
|
||||
</p>
|
||||
|
||||
<pre class="samples">
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="/ckeditor/ckeditor.js"></script>
|
||||
<script src="/ckeditor/adapters/jquery.js"></script>
|
||||
</pre>
|
||||
|
||||
<p>Then you can replace HTML elements with a CKEditor instance using the <code>ckeditor()</code> method.</p>
|
||||
|
||||
<pre class="samples">
|
||||
$( document ).ready( function() {
|
||||
$( 'textarea#editor1' ).ckeditor();
|
||||
} );
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<h2 class="samples">Inline Example</h2>
|
||||
|
||||
<div id="editable" contenteditable="true">
|
||||
<p><img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg"/><b>Apollo 11</b> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
|
||||
<p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5 kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.
|
||||
<p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p>
|
||||
<blockquote><p>One small step for [a] man, one giant leap for mankind.</p></blockquote> <p>Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a speech before the United States Congress:</p> <blockquote><p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p></blockquote>
|
||||
</div>
|
||||
|
||||
<br style="clear: both">
|
||||
|
||||
<h2 class="samples">Classic (iframe-based) Example</h2>
|
||||
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10">
|
||||
<h2>Technical details <a id="tech-details" name="tech-details"></a></h2> <table align="right" border="1" bordercolor="#ccc" cellpadding="5" cellspacing="0" style="border-collapse:collapse;margin:10px 0 10px 15px;"> <caption><strong>Mission crew</strong></caption> <thead> <tr> <th scope="col">Position</th> <th scope="col">Astronaut</th> </tr> </thead> <tbody> <tr> <td>Commander</td> <td>Neil A. Armstrong</td> </tr> <tr> <td>Command Module Pilot</td> <td>Michael Collins</td> </tr> <tr> <td>Lunar Module Pilot</td> <td>Edwin &quot;Buzz&quot; E. Aldrin, Jr.</td> </tr> </tbody> </table> <p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p> <ol> <li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li> <li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li> <li><strong>Lunar Module</strong> for landing on the Moon.</li> </ol> <p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p> <hr/> <p style="text-align: right;"><small>Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a></small></p>
|
||||
</textarea>
|
||||
|
||||
<p style="overflow: hidden">
|
||||
<input style="float: left" type="submit" value="Submit">
|
||||
<span style="float: right">
|
||||
<input type="text" id="val" value="I'm using jQuery val()!" size="30">
|
||||
<input onclick="setValue();" type="button" value="Set value">
|
||||
</span>
|
||||
</p>
|
||||
</form>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
187
include/jQuery/ckeditor/samples/plugins/dialog/dialog.html
Executable file
187
include/jQuery/ckeditor/samples/plugins/dialog/dialog.html
Executable file
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Using API to Customize Dialog Windows — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/sample.css">
|
||||
<meta name="ckeditor-sample-name" content="Using the JavaScript API to customize dialog windows">
|
||||
<meta name="ckeditor-sample-group" content="Advanced Samples">
|
||||
<meta name="ckeditor-sample-description" content="Using the dialog windows API to customize dialog windows without changing the original editor code.">
|
||||
<style>
|
||||
|
||||
.cke_button__mybutton_icon
|
||||
{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.cke_button__mybutton_label
|
||||
{
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
|
||||
CKEDITOR.on( 'instanceCreated', function( ev ){
|
||||
var editor = ev.editor;
|
||||
|
||||
// Listen for the "pluginsLoaded" event, so we are sure that the
|
||||
// "dialog" plugin has been loaded and we are able to do our
|
||||
// customizations.
|
||||
editor.on( 'pluginsLoaded', function() {
|
||||
|
||||
// If our custom dialog has not been registered, do that now.
|
||||
if ( !CKEDITOR.dialog.exists( 'myDialog' ) ) {
|
||||
// We need to do the following trick to find out the dialog
|
||||
// definition file URL path. In the real world, you would simply
|
||||
// point to an absolute path directly, like "/mydir/mydialog.js".
|
||||
var href = document.location.href.split( '/' );
|
||||
href.pop();
|
||||
href.push( 'assets/my_dialog.js' );
|
||||
href = href.join( '/' );
|
||||
|
||||
// Finally, register the dialog.
|
||||
CKEDITOR.dialog.add( 'myDialog', href );
|
||||
}
|
||||
|
||||
// Register the command used to open the dialog.
|
||||
editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) );
|
||||
|
||||
// Add the a custom toolbar buttons, which fires the above
|
||||
// command..
|
||||
editor.ui.add( 'MyButton', CKEDITOR.UI_BUTTON, {
|
||||
label: 'My Dialog',
|
||||
command: 'myDialogCmd'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// When opening a dialog, its "definition" is created for it, for
|
||||
// each editor instance. The "dialogDefinition" event is then
|
||||
// fired. We should use this event to make customizations to the
|
||||
// definition of existing dialogs.
|
||||
CKEDITOR.on( 'dialogDefinition', function( ev ) {
|
||||
// Take the dialog name and its definition from the event data.
|
||||
var dialogName = ev.data.name;
|
||||
var dialogDefinition = ev.data.definition;
|
||||
|
||||
// Check if the definition is from the dialog we're
|
||||
// interested on (the "Link" dialog).
|
||||
if ( dialogName == 'myDialog' && ev.editor.name == 'editor2' ) {
|
||||
// Get a reference to the "Link Info" tab.
|
||||
var infoTab = dialogDefinition.getContents( 'tab1' );
|
||||
|
||||
// Add a new text field to the "tab1" tab page.
|
||||
infoTab.add( {
|
||||
type: 'text',
|
||||
label: 'My Custom Field',
|
||||
id: 'customField',
|
||||
'default': 'Sample!',
|
||||
validate: function() {
|
||||
if ( ( /\d/ ).test( this.getValue() ) )
|
||||
return 'My Custom Field must not contain digits';
|
||||
}
|
||||
});
|
||||
|
||||
// Remove the "select1" field from the "tab1" tab.
|
||||
infoTab.remove( 'select1' );
|
||||
|
||||
// Set the default value for "input1" field.
|
||||
var input1 = infoTab.get( 'input1' );
|
||||
input1[ 'default' ] = 'www.example.com';
|
||||
|
||||
// Remove the "tab2" tab page.
|
||||
dialogDefinition.removeContents( 'tab2' );
|
||||
|
||||
// Add a new tab to the "Link" dialog.
|
||||
dialogDefinition.addContents( {
|
||||
id: 'customTab',
|
||||
label: 'My Tab',
|
||||
accessKey: 'M',
|
||||
elements: [
|
||||
{
|
||||
id: 'myField1',
|
||||
type: 'text',
|
||||
label: 'My Text Field'
|
||||
},
|
||||
{
|
||||
id: 'myField2',
|
||||
type: 'text',
|
||||
label: 'Another Text Field'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Provide the focus handler to start initial focus in "customField" field.
|
||||
dialogDefinition.onFocus = function() {
|
||||
var urlField = this.getContentElement( 'tab1', 'customField' );
|
||||
urlField.select();
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
var config = {
|
||||
extraPlugins: 'dialog',
|
||||
toolbar: [ [ 'MyButton' ] ]
|
||||
};
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/index.html">CKEditor Samples</a> » Using CKEditor Dialog API
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to use the
|
||||
<a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.dialog">CKEditor Dialog API</a>
|
||||
to customize CKEditor dialog windows without changing the original editor code.
|
||||
The following customizations are being done in the example below:
|
||||
</p>
|
||||
<p>
|
||||
For details on how to create this setup check the source code of this sample page.
|
||||
</p>
|
||||
</div>
|
||||
<p>A custom dialog is added to the editors using the <code>pluginsLoaded</code> event, from an external <a target="_blank" href="assets/my_dialog.js">dialog definition file</a>:</p>
|
||||
<ol>
|
||||
<li><strong>Creating a custom dialog window</strong> – "My Dialog" dialog window opened with the "My Dialog" toolbar button.</li>
|
||||
<li><strong>Creating a custom button</strong> – Add button to open the dialog with "My Dialog" toolbar button.</li>
|
||||
</ol>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<script>
|
||||
// Replace the <textarea id="editor1"> with an CKEditor instance.
|
||||
CKEDITOR.replace( 'editor1', config );
|
||||
</script>
|
||||
<p>The below editor modify the dialog definition of the above added dialog using the <code>dialogDefinition</code> event:</p>
|
||||
<ol>
|
||||
<li><strong>Adding dialog tab</strong> – Add new tab "My Tab" to dialog window.</li>
|
||||
<li><strong>Removing a dialog window tab</strong> – Remove "Second Tab" page from the dialog window.</li>
|
||||
<li><strong>Adding dialog window fields</strong> – Add "My Custom Field" to the dialog window.</li>
|
||||
<li><strong>Removing dialog window field</strong> – Remove "Select Field" selection field from the dialog window.</li>
|
||||
<li><strong>Setting default values for dialog window fields</strong> – Set default value of "Text Field" text field. </li>
|
||||
<li><strong>Setup initial focus for dialog window</strong> – Put initial focus on "My Custom Field" text field. </li>
|
||||
</ol>
|
||||
<textarea cols="80" id="editor2" name="editor2" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<script>
|
||||
|
||||
// Replace the <textarea id="editor1"> with an CKEditor instance.
|
||||
CKEDITOR.replace( 'editor2', config );
|
||||
|
||||
</script>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
103
include/jQuery/ckeditor/samples/plugins/enterkey/enterkey.html
Executable file
103
include/jQuery/ckeditor/samples/plugins/enterkey/enterkey.html
Executable file
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>ENTER Key Configuration — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link href="../../../samples/sample.css" rel="stylesheet">
|
||||
<meta name="ckeditor-sample-name" content="Using the "Enter" key in CKEditor">
|
||||
<meta name="ckeditor-sample-group" content="Advanced Samples">
|
||||
<meta name="ckeditor-sample-description" content="Configuring the behavior of <em>Enter</em> and <em>Shift+Enter</em> keys.">
|
||||
<script>
|
||||
|
||||
var editor;
|
||||
|
||||
function changeEnter() {
|
||||
// If we already have an editor, let's destroy it first.
|
||||
if ( editor )
|
||||
editor.destroy( true );
|
||||
|
||||
// Create the editor again, with the appropriate settings.
|
||||
editor = CKEDITOR.replace( 'editor1', {
|
||||
extraPlugins: 'enterkey',
|
||||
enterMode: Number( document.getElementById( 'xEnter' ).value ),
|
||||
shiftEnterMode: Number( document.getElementById( 'xShiftEnter' ).value )
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = changeEnter;
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/index.html">CKEditor Samples</a> » ENTER Key Configuration
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to configure the <em>Enter</em> and <em>Shift+Enter</em> keys
|
||||
to perform actions specified in the
|
||||
<a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-enterMode"><code>enterMode</code></a>
|
||||
and <a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-shiftEnterMode"><code>shiftEnterMode</code></a>
|
||||
parameters, respectively.
|
||||
You can choose from the following options:
|
||||
</p>
|
||||
<ul class="samples">
|
||||
<li><strong><code>ENTER_P</code></strong> – new <code><p></code> paragraphs are created;</li>
|
||||
<li><strong><code>ENTER_BR</code></strong> – lines are broken with <code><br></code> elements;</li>
|
||||
<li><strong><code>ENTER_DIV</code></strong> – new <code><div></code> blocks are created.</li>
|
||||
</ul>
|
||||
<p>
|
||||
The sample code below shows how to configure CKEditor to create a <code><div></code> block when <em>Enter</em> key is pressed.
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( '<em>textarea_id</em>', {
|
||||
<strong>enterMode: CKEDITOR.ENTER_DIV</strong>
|
||||
});</pre>
|
||||
<p>
|
||||
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
|
||||
the <code><textarea></code> element to be replaced.
|
||||
</p>
|
||||
</div>
|
||||
<div style="float: left; margin-right: 20px">
|
||||
When <em>Enter</em> is pressed:<br>
|
||||
<select id="xEnter" onchange="changeEnter();">
|
||||
<option selected="selected" value="1">Create a new <P> (recommended)</option>
|
||||
<option value="3">Create a new <DIV></option>
|
||||
<option value="2">Break the line with a <BR></option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="float: left">
|
||||
When <em>Shift+Enter</em> is pressed:<br>
|
||||
<select id="xShiftEnter" onchange="changeEnter();">
|
||||
<option value="1">Create a new <P></option>
|
||||
<option value="3">Create a new <DIV></option>
|
||||
<option selected="selected" value="2">Break the line with a <BR> (recommended)</option>
|
||||
</select>
|
||||
</div>
|
||||
<br style="clear: both">
|
||||
<form action="../../../samples/sample_posteddata.php" method="post">
|
||||
<p>
|
||||
<br>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10">This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</textarea>
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Submit">
|
||||
</p>
|
||||
</form>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
232
include/jQuery/ckeditor/samples/plugins/toolbar/toolbar.html
Executable file
232
include/jQuery/ckeditor/samples/plugins/toolbar/toolbar.html
Executable file
@@ -0,0 +1,232 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Toolbar Configuration — CKEditor Sample</title>
|
||||
<meta name="ckeditor-sample-name" content="Toolbar Configurations">
|
||||
<meta name="ckeditor-sample-group" content="Advanced Samples">
|
||||
<meta name="ckeditor-sample-description" content="Configuring CKEditor to display full or custom toolbar layout.">
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link href="../../../samples/sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/index.html">CKEditor Samples</a> » Toolbar Configuration
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample page demonstrates editor with loaded <a href="#fullToolbar">full toolbar</a> (all registered buttons) and, if
|
||||
current editor's configuration modifies default settings, also editor with <a href="#currentToolbar">modified toolbar</a>.
|
||||
</p>
|
||||
|
||||
<p>Since CKEditor 4 there are two ways to configure toolbar buttons.</p>
|
||||
|
||||
<h2 class="samples">By <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbar">config.toolbar</a></h2>
|
||||
|
||||
<p>
|
||||
You can explicitly define which buttons are displayed in which groups and in which order.
|
||||
This is the more precise setting, but less flexible. If newly added plugin adds its
|
||||
own button you'll have to add it manually to your <code>config.toolbar</code> setting as well.
|
||||
</p>
|
||||
|
||||
<p>To add a CKEditor instance with custom toolbar setting, insert the following JavaScript call to your code:</p>
|
||||
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( <em>'textarea_id'</em>, {
|
||||
<strong>toolbar:</strong> [
|
||||
{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }, // Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
|
||||
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ], // Defines toolbar group without name.
|
||||
'/', // Line break - next group will be placed in new line.
|
||||
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
|
||||
]
|
||||
});</pre>
|
||||
|
||||
<h2 class="samples">By <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbarGroups">config.toolbarGroups</a></h2>
|
||||
|
||||
<p>
|
||||
You can define which groups of buttons (like e.g. <code>basicstyles</code>, <code>clipboard</code>
|
||||
and <code>forms</code>) are displayed and in which order. Registered buttons are associated
|
||||
with toolbar groups by <code>toolbar</code> property in their definition.
|
||||
This setting's advantage is that you don't have to modify toolbar configuration
|
||||
when adding/removing plugins which register their own buttons.
|
||||
</p>
|
||||
|
||||
<p>To add a CKEditor instance with custom toolbar groups setting, insert the following JavaScript call to your code:</p>
|
||||
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( <em>'textarea_id'</em>, {
|
||||
<strong>toolbarGroups:</strong> [
|
||||
{ name: 'document', groups: [ 'mode', 'document' ] }, // Displays document group with its two subgroups.
|
||||
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, // Group's name will be used to create voice label.
|
||||
'/', // Line break - next group will be placed in new line.
|
||||
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
|
||||
{ name: 'links' }
|
||||
]
|
||||
|
||||
// NOTE: Remember to leave 'toolbar' property with the default value (null).
|
||||
});</pre>
|
||||
</div>
|
||||
|
||||
<div id="currentToolbar" style="display: none">
|
||||
<h2 class="samples">Current toolbar configuration</h2>
|
||||
<p>Below you can see editor with current toolbar definition.</p>
|
||||
<textarea cols="80" id="editorCurrent" name="editorCurrent" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<pre id="editorCurrentCfg" class="samples"></pre>
|
||||
</div>
|
||||
|
||||
<div id="fullToolbar">
|
||||
<h2 class="samples">Full toolbar configuration</h2>
|
||||
<p>Below you can see editor with full toolbar, generated automatically by the editor.</p>
|
||||
<p>
|
||||
<strong>Note</strong>: To create editor instance with full toolbar you don't have to set anything.
|
||||
Just leave <code>toolbar</code> and <code>toolbarGroups</code> with the default, <code>null</code> values.
|
||||
</p>
|
||||
<textarea cols="80" id="editorFull" name="editorFull" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<pre id="editorFullCfg" class="samples"></pre>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var buttonsNames;
|
||||
|
||||
CKEDITOR.config.extraPlugins = 'toolbar';
|
||||
|
||||
CKEDITOR.on( 'instanceReady', function( evt ) {
|
||||
var editor = evt.editor,
|
||||
editorCurrent = editor.name == 'editorCurrent',
|
||||
defaultToolbar = !( editor.config.toolbar || editor.config.toolbarGroups || editor.config.removeButtons ),
|
||||
pre = CKEDITOR.document.getById( editor.name + 'Cfg' ),
|
||||
output = '';
|
||||
|
||||
if ( editorCurrent ) {
|
||||
// If default toolbar configuration has been modified, show "current toolbar" section.
|
||||
if ( !defaultToolbar )
|
||||
CKEDITOR.document.getById( 'currentToolbar' ).show();
|
||||
else
|
||||
return;
|
||||
}
|
||||
|
||||
if ( !buttonsNames )
|
||||
buttonsNames = createButtonsNamesHash( editor.ui.items );
|
||||
|
||||
// Toolbar isn't set explicitly, so it was created automatically from toolbarGroups.
|
||||
if ( !editor.config.toolbar ) {
|
||||
output +=
|
||||
'// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.\n' +
|
||||
dumpToolbarConfiguration( editor ) +
|
||||
'\n\n' +
|
||||
'// Toolbar groups configuration.\n' +
|
||||
dumpToolbarConfiguration( editor, true )
|
||||
}
|
||||
// Toolbar groups doesn't count in this case - print only toolbar.
|
||||
else {
|
||||
output += '// Toolbar configuration.\n' +
|
||||
dumpToolbarConfiguration( editor );
|
||||
}
|
||||
|
||||
// Recreate to avoid old IE from loosing whitespaces on filling <pre> content.
|
||||
var preOutput = pre.getOuterHtml().replace( /(?=<\/)/, output );
|
||||
CKEDITOR.dom.element.createFromHtml( preOutput ).replace( pre );
|
||||
} );
|
||||
|
||||
CKEDITOR.replace( 'editorCurrent', { height: 100 } );
|
||||
CKEDITOR.replace( 'editorFull', {
|
||||
// Reset toolbar settings, so full toolbar will be generated automatically.
|
||||
toolbar: null,
|
||||
toolbarGroups: null,
|
||||
removeButtons: null,
|
||||
height: 100
|
||||
} );
|
||||
|
||||
function dumpToolbarConfiguration( editor, printGroups ) {
|
||||
var output = [],
|
||||
toolbar = editor.toolbar;
|
||||
|
||||
for ( var i = 0; i < toolbar.length; ++i ) {
|
||||
var group = dumpToolbarGroup( toolbar[ i ], printGroups );
|
||||
if ( group )
|
||||
output.push( group );
|
||||
}
|
||||
|
||||
return 'config.toolbar' + ( printGroups ? 'Groups' : '' ) + ' = [\n\t' + output.join( ',\n\t' ) + '\n];';
|
||||
}
|
||||
|
||||
function dumpToolbarGroup( group, printGroups ) {
|
||||
var output = [];
|
||||
|
||||
if ( typeof group == 'string' )
|
||||
return '\'' + group + '\'';
|
||||
if ( CKEDITOR.tools.isArray( group ) )
|
||||
return dumpToolbarItems( group );
|
||||
// Skip group when printing entire toolbar configuration and there are no items in this group.
|
||||
if ( !printGroups && !group.items )
|
||||
return;
|
||||
|
||||
if ( group.name )
|
||||
output.push( 'name: \'' + group.name + '\'' );
|
||||
|
||||
if ( group.groups )
|
||||
output.push( 'groups: ' + dumpToolbarItems( group.groups ) );
|
||||
|
||||
if ( !printGroups )
|
||||
output.push( 'items: ' + dumpToolbarItems( group.items ) );
|
||||
|
||||
return '{ ' + output.join( ', ' ) + ' }';
|
||||
}
|
||||
|
||||
function dumpToolbarItems( items ) {
|
||||
if ( typeof items == 'string' )
|
||||
return '\'' + items + '\'';
|
||||
|
||||
var names = [],
|
||||
i, item;
|
||||
|
||||
for ( var i = 0; i < items.length; ++i ) {
|
||||
item = items[ i ];
|
||||
if ( typeof item == 'string' )
|
||||
names.push( item );
|
||||
else {
|
||||
if ( item.type == CKEDITOR.UI_SEPARATOR )
|
||||
names.push( '-' );
|
||||
else
|
||||
names.push( buttonsNames[ item.name ] );
|
||||
}
|
||||
}
|
||||
|
||||
return '[ \'' + names.join( '\', \'' ) + '\' ]';
|
||||
}
|
||||
|
||||
// Creates { 'lowercased': 'LowerCased' } buttons names hash.
|
||||
function createButtonsNamesHash( items ) {
|
||||
var hash = {},
|
||||
name;
|
||||
|
||||
for ( name in items ) {
|
||||
hash[ items[ name ].name ] = name;
|
||||
}
|
||||
|
||||
return hash;
|
||||
}
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
77
include/jQuery/ckeditor/samples/plugins/wysiwygarea/fullpage.html
Executable file
77
include/jQuery/ckeditor/samples/plugins/wysiwygarea/fullpage.html
Executable file
File diff suppressed because one or more lines are too long
73
include/jQuery/ckeditor/samples/readonly.html
Executable file
73
include/jQuery/ckeditor/samples/readonly.html
Executable file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Using the CKEditor Read-Only API — CKEditor Sample</title>
|
||||
<script src="../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="sample.css">
|
||||
<script>
|
||||
|
||||
var editor;
|
||||
|
||||
// The instanceReady event is fired, when an instance of CKEditor has finished
|
||||
// its initialization.
|
||||
CKEDITOR.on( 'instanceReady', function( ev ) {
|
||||
editor = ev.editor;
|
||||
|
||||
// Show this "on" button.
|
||||
document.getElementById( 'readOnlyOn' ).style.display = '';
|
||||
|
||||
// Event fired when the readOnly property changes.
|
||||
editor.on( 'readOnly', function() {
|
||||
document.getElementById( 'readOnlyOn' ).style.display = this.readOnly ? 'none' : '';
|
||||
document.getElementById( 'readOnlyOff' ).style.display = this.readOnly ? '' : 'none';
|
||||
});
|
||||
});
|
||||
|
||||
function toggleReadOnly( isReadOnly ) {
|
||||
// Change the read-only state of the editor.
|
||||
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setReadOnly
|
||||
editor.setReadOnly( isReadOnly );
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="index.html">CKEditor Samples</a> » Using the CKEditor Read-Only API
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to use the
|
||||
<code><a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setReadOnly">setReadOnly</a></code>
|
||||
API to put editor into the read-only state that makes it impossible for users to change the editor contents.
|
||||
</p>
|
||||
<p>
|
||||
For details on how to create this setup check the source code of this sample page.
|
||||
</p>
|
||||
</div>
|
||||
<form action="sample_posteddata.php" method="post">
|
||||
<p>
|
||||
<textarea class="ckeditor" id="editor1" name="editor1" cols="100" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
</p>
|
||||
<p>
|
||||
<input id="readOnlyOn" onclick="toggleReadOnly();" type="button" value="Make it read-only" style="display:none">
|
||||
<input id="readOnlyOff" onclick="toggleReadOnly( false );" type="button" value="Make it editable again" style="display:none">
|
||||
</p>
|
||||
</form>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
57
include/jQuery/ckeditor/samples/replacebyclass.html
Executable file
57
include/jQuery/ckeditor/samples/replacebyclass.html
Executable file
File diff suppressed because one or more lines are too long
56
include/jQuery/ckeditor/samples/replacebycode.html
Executable file
56
include/jQuery/ckeditor/samples/replacebycode.html
Executable file
File diff suppressed because one or more lines are too long
75
include/jQuery/ckeditor/samples/tabindex.html
Executable file
75
include/jQuery/ckeditor/samples/tabindex.html
Executable file
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>TAB Key-Based Navigation — CKEditor Sample</title>
|
||||
<script src="../ckeditor.js"></script>
|
||||
<link href="sample.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
.cke_focused,
|
||||
.cke_editable.cke_focused
|
||||
{
|
||||
outline: 3px dotted blue !important;
|
||||
*border: 3px dotted blue !important; /* For IE7 */
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
|
||||
CKEDITOR.on( 'instanceReady', function( evt ) {
|
||||
var editor = evt.editor;
|
||||
editor.setData( 'This editor has it\'s tabIndex set to <strong>' + editor.tabIndex + '</strong>' );
|
||||
|
||||
// Apply focus class name.
|
||||
editor.on( 'focus', function() {
|
||||
editor.container.addClass( 'cke_focused' );
|
||||
});
|
||||
editor.on( 'blur', function() {
|
||||
editor.container.removeClass( 'cke_focused' );
|
||||
});
|
||||
|
||||
// Put startup focus on the first editor in tab order.
|
||||
if ( editor.tabIndex == 1 )
|
||||
editor.focus();
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="index.html">CKEditor Samples</a> » TAB Key-Based Navigation
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how tab key navigation among editor instances is
|
||||
affected by the <code>tabIndex</code> attribute from
|
||||
the original page element. Use TAB key to move between the editors.
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
<textarea class="ckeditor" cols="80" id="editor4" rows="10" tabindex="1"></textarea>
|
||||
</p>
|
||||
<div class="ckeditor" contenteditable="true" id="editor1" tabindex="4"></div>
|
||||
<p>
|
||||
<textarea class="ckeditor" cols="80" id="editor2" rows="10" tabindex="2"></textarea>
|
||||
</p>
|
||||
<p>
|
||||
<textarea class="ckeditor" cols="80" id="editor3" rows="10" tabindex="3"></textarea>
|
||||
</p>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
69
include/jQuery/ckeditor/samples/uicolor.html
Executable file
69
include/jQuery/ckeditor/samples/uicolor.html
Executable file
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>UI Color Picker — CKEditor Sample</title>
|
||||
<script src="../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="sample.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="index.html">CKEditor Samples</a> » UI Color
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to automatically replace <code><textarea></code> elements
|
||||
with a CKEditor instance with an option to change the color of its user interface.<br>
|
||||
<strong>Note:</strong>The UI skin color feature depends on the CKEditor skin
|
||||
compatibility. The Moono and Kama skins are examples of skins that work with it.
|
||||
</p>
|
||||
</div>
|
||||
<form action="sample_posteddata.php" method="post">
|
||||
<p>
|
||||
This editor instance has a UI color value defined in configuration to change the skin color,
|
||||
To specify the color of the user interface, set the <code>uiColor</code> property:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( '<em>textarea_id</em>', {
|
||||
<strong>uiColor: '#14B8C4'</strong>
|
||||
});</pre>
|
||||
<p>
|
||||
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
|
||||
the <code><textarea></code> element to be replaced.
|
||||
</p>
|
||||
<p>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<script>
|
||||
|
||||
// Replace the <textarea id="editor"> with an CKEditor
|
||||
// instance, using default configurations.
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
uiColor: '#14B8C4',
|
||||
toolbar: [
|
||||
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
|
||||
[ 'FontSize', 'TextColor', 'BGColor' ]
|
||||
]
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Submit">
|
||||
</p>
|
||||
</form>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
119
include/jQuery/ckeditor/samples/uilanguages.html
Executable file
119
include/jQuery/ckeditor/samples/uilanguages.html
Executable file
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>User Interface Globalization — CKEditor Sample</title>
|
||||
<script src="../ckeditor.js"></script>
|
||||
<script src="assets/uilanguages/languages.js"></script>
|
||||
<link rel="stylesheet" href="sample.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="index.html">CKEditor Samples</a> » User Interface Languages
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to automatically replace <code><textarea></code> elements
|
||||
with a CKEditor instance with an option to change the language of its user interface.
|
||||
</p>
|
||||
<p>
|
||||
It pulls the language list from CKEditor <code>_languages.js</code> file that contains the list of supported languages and creates
|
||||
a drop-down list that lets the user change the UI language.
|
||||
</p>
|
||||
<p>
|
||||
By default, CKEditor automatically localizes the editor to the language of the user.
|
||||
The UI language can be controlled with two configuration options:
|
||||
<code><a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-language">language</a></code> and
|
||||
<code><a class="samples" href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-defaultLanguage">
|
||||
defaultLanguage</a></code>. The <code>defaultLanguage</code> setting specifies the
|
||||
default CKEditor language to be used when a localization suitable for user's settings is not available.
|
||||
</p>
|
||||
<p>
|
||||
To specify the user interface language that will be used no matter what language is
|
||||
specified in user's browser or operating system, set the <code>language</code> property:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( '<em>textarea_id</em>', {
|
||||
// Load the German interface.
|
||||
<strong>language: 'de'</strong>
|
||||
});</pre>
|
||||
<p>
|
||||
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
|
||||
the <code><textarea></code> element to be replaced.
|
||||
</p>
|
||||
</div>
|
||||
<form action="sample_posteddata.php" method="post">
|
||||
<p>
|
||||
Available languages (<span id="count"> </span> languages!):<br>
|
||||
<script>
|
||||
|
||||
document.write( '<select disabled="disabled" id="languages" onchange="createEditor( this.value );">' );
|
||||
|
||||
// Get the language list from the _languages.js file.
|
||||
for ( var i = 0 ; i < window.CKEDITOR_LANGS.length ; i++ ) {
|
||||
document.write(
|
||||
'<option value="' + window.CKEDITOR_LANGS[i].code + '">' +
|
||||
window.CKEDITOR_LANGS[i].name +
|
||||
'</option>' );
|
||||
}
|
||||
|
||||
document.write( '</select>' );
|
||||
|
||||
</script>
|
||||
<br>
|
||||
<span style="color: #888888">
|
||||
(You may see strange characters if your system does not support the selected language)
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<script>
|
||||
|
||||
// Set the number of languages.
|
||||
document.getElementById( 'count' ).innerHTML = window.CKEDITOR_LANGS.length;
|
||||
|
||||
var editor;
|
||||
|
||||
function createEditor( languageCode ) {
|
||||
if ( editor )
|
||||
editor.destroy();
|
||||
|
||||
// Replace the <textarea id="editor"> with an CKEditor
|
||||
// instance, using default configurations.
|
||||
editor = CKEDITOR.replace( 'editor1', {
|
||||
language: languageCode,
|
||||
|
||||
on: {
|
||||
instanceReady: function() {
|
||||
// Wait for the editor to be ready to set
|
||||
// the language combo.
|
||||
var languages = document.getElementById( 'languages' );
|
||||
languages.value = this.langCode;
|
||||
languages.disabled = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// At page startup, load the default language:
|
||||
createEditor( '' );
|
||||
|
||||
</script>
|
||||
</p>
|
||||
</form>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
231
include/jQuery/ckeditor/samples/xhtmlstyle.html
Executable file
231
include/jQuery/ckeditor/samples/xhtmlstyle.html
Executable file
@@ -0,0 +1,231 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or http://ckeditor.com/license
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>XHTML Compliant Output — CKEditor Sample</title>
|
||||
<meta name="ckeditor-sample-required-plugins" content="sourcearea">
|
||||
<script src="../ckeditor.js"></script>
|
||||
<script src="../samples/sample.js"></script>
|
||||
<link href="sample.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="index.html">CKEditor Samples</a> » Producing XHTML Compliant Output
|
||||
</h1>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to configure CKEditor to output valid
|
||||
<a class="samples" href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a> code.
|
||||
Deprecated elements (<code><font></code>, <code><u></code>) or attributes
|
||||
(<code>size</code>, <code>face</code>) will be replaced with XHTML compliant code.
|
||||
</p>
|
||||
<p>
|
||||
To add a CKEditor instance outputting valid XHTML code, load the editor using a standard
|
||||
JavaScript call and define CKEditor features to use the XHTML compliant elements and styles.
|
||||
</p>
|
||||
<p>
|
||||
A snippet of the configuration code can be seen below; check the source of this page for
|
||||
full definition:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( '<em>textarea_id</em>', {
|
||||
contentsCss: 'assets/outputxhtml.css',
|
||||
|
||||
coreStyles_bold: {
|
||||
element: 'span',
|
||||
attributes: { 'class': 'Bold' }
|
||||
},
|
||||
coreStyles_italic: {
|
||||
element: 'span',
|
||||
attributes: { 'class': 'Italic' }
|
||||
},
|
||||
|
||||
...
|
||||
});</pre>
|
||||
</div>
|
||||
<form action="sample_posteddata.php" method="post">
|
||||
<p>
|
||||
<label for="editor1">
|
||||
Editor 1:
|
||||
</label>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <span class="Bold">sample text</span>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<script>
|
||||
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
/*
|
||||
* Style sheet for the contents
|
||||
*/
|
||||
contentsCss: 'assets/outputxhtml/outputxhtml.css',
|
||||
|
||||
/*
|
||||
* Special allowed content rules for spans used by
|
||||
* font face, size, and color buttons.
|
||||
*
|
||||
* Note: all rules have been written separately so
|
||||
* it was possible to specify required classes.
|
||||
*/
|
||||
extraAllowedContent: 'span(!FontColor1);span(!FontColor2);span(!FontColor3);' +
|
||||
'span(!FontColor1BG);span(!FontColor2BG);span(!FontColor3BG);' +
|
||||
'span(!FontComic);span(!FontCourier);span(!FontTimes);' +
|
||||
'span(!FontSmaller);span(!FontLarger);span(!FontSmall);span(!FontBig);span(!FontDouble)',
|
||||
|
||||
/*
|
||||
* Core styles.
|
||||
*/
|
||||
coreStyles_bold: {
|
||||
element: 'span',
|
||||
attributes: { 'class': 'Bold' }
|
||||
},
|
||||
coreStyles_italic: {
|
||||
element: 'span',
|
||||
attributes: { 'class': 'Italic' }
|
||||
},
|
||||
coreStyles_underline: {
|
||||
element: 'span',
|
||||
attributes: { 'class': 'Underline' }
|
||||
},
|
||||
coreStyles_strike: {
|
||||
element: 'span',
|
||||
attributes: { 'class': 'StrikeThrough' },
|
||||
overrides: 'strike'
|
||||
},
|
||||
coreStyles_subscript: {
|
||||
element: 'span',
|
||||
attributes: { 'class': 'Subscript' },
|
||||
overrides: 'sub'
|
||||
},
|
||||
coreStyles_superscript: {
|
||||
element: 'span',
|
||||
attributes: { 'class': 'Superscript' },
|
||||
overrides: 'sup'
|
||||
},
|
||||
|
||||
/*
|
||||
* Font face.
|
||||
*/
|
||||
|
||||
// List of fonts available in the toolbar combo. Each font definition is
|
||||
// separated by a semi-colon (;). We are using class names here, so each font
|
||||
// is defined by {Combo Label}/{Class Name}.
|
||||
font_names: 'Comic Sans MS/FontComic;Courier New/FontCourier;Times New Roman/FontTimes',
|
||||
|
||||
// Define the way font elements will be applied to the document. The "span"
|
||||
// element will be used. When a font is selected, the font name defined in the
|
||||
// above list is passed to this definition with the name "Font", being it
|
||||
// injected in the "class" attribute.
|
||||
// We must also instruct the editor to replace span elements that are used to
|
||||
// set the font (Overrides).
|
||||
font_style: {
|
||||
element: 'span',
|
||||
attributes: { 'class': '#(family)' },
|
||||
overrides: [
|
||||
{
|
||||
element: 'span',
|
||||
attributes: {
|
||||
'class': /^Font(?:Comic|Courier|Times)$/
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/*
|
||||
* Font sizes.
|
||||
*/
|
||||
fontSize_sizes: 'Smaller/FontSmaller;Larger/FontLarger;8pt/FontSmall;14pt/FontBig;Double Size/FontDouble',
|
||||
fontSize_style: {
|
||||
element: 'span',
|
||||
attributes: { 'class': '#(size)' },
|
||||
overrides: [
|
||||
{
|
||||
element: 'span',
|
||||
attributes: {
|
||||
'class': /^Font(?:Smaller|Larger|Small|Big|Double)$/
|
||||
}
|
||||
}
|
||||
]
|
||||
} ,
|
||||
|
||||
/*
|
||||
* Font colors.
|
||||
*/
|
||||
colorButton_enableMore: false,
|
||||
|
||||
colorButton_colors: 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00',
|
||||
colorButton_foreStyle: {
|
||||
element: 'span',
|
||||
attributes: { 'class': '#(color)' },
|
||||
overrides: [
|
||||
{
|
||||
element: 'span',
|
||||
attributes: {
|
||||
'class': /^FontColor(?:1|2|3)$/
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
colorButton_backStyle: {
|
||||
element: 'span',
|
||||
attributes: { 'class': '#(color)BG' },
|
||||
overrides: [
|
||||
{
|
||||
element: 'span',
|
||||
attributes: {
|
||||
'class': /^FontColor(?:1|2|3)BG$/
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/*
|
||||
* Indentation.
|
||||
*/
|
||||
indentClasses: [ 'Indent1', 'Indent2', 'Indent3' ],
|
||||
|
||||
/*
|
||||
* Paragraph justification.
|
||||
*/
|
||||
justifyClasses: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull' ],
|
||||
|
||||
/*
|
||||
* Styles combo.
|
||||
*/
|
||||
stylesSet: [
|
||||
{ name: 'Strong Emphasis', element: 'strong' },
|
||||
{ name: 'Emphasis', element: 'em' },
|
||||
|
||||
{ name: 'Computer Code', element: 'code' },
|
||||
{ name: 'Keyboard Phrase', element: 'kbd' },
|
||||
{ name: 'Sample Text', element: 'samp' },
|
||||
{ name: 'Variable', element: 'var' },
|
||||
|
||||
{ name: 'Deleted Text', element: 'del' },
|
||||
{ name: 'Inserted Text', element: 'ins' },
|
||||
|
||||
{ name: 'Cited Work', element: 'cite' },
|
||||
{ name: 'Inline Quotation', element: 'q' }
|
||||
]
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Submit">
|
||||
</p>
|
||||
</form>
|
||||
<div id="footer">
|
||||
<hr>
|
||||
<p>
|
||||
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
||||
</p>
|
||||
<p id="copy">
|
||||
Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
50
include/jQuery/jquery-ui/demos/accordion/collapsible.html
Executable file
50
include/jQuery/jquery-ui/demos/accordion/collapsible.html
Executable file
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion - Collapse content</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#accordion" ).accordion({
|
||||
collapsible: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
|
||||
</div>
|
||||
<h3>Section 2</h3>
|
||||
<div>
|
||||
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
|
||||
</div>
|
||||
<h3>Section 3</h3>
|
||||
<div>
|
||||
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
|
||||
<ul>
|
||||
<li>List item one</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Section 4</h3>
|
||||
<div>
|
||||
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the <code>collapsible</code> option to true. Click on the currently open section to collapse its content pane.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
64
include/jQuery/jquery-ui/demos/accordion/custom-icons.html
Executable file
64
include/jQuery/jquery-ui/demos/accordion/custom-icons.html
Executable file
@@ -0,0 +1,64 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion - Customize icons</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
var icons = {
|
||||
header: "ui-icon-circle-arrow-e",
|
||||
activeHeader: "ui-icon-circle-arrow-s"
|
||||
};
|
||||
$( "#accordion" ).accordion({
|
||||
icons: icons
|
||||
});
|
||||
$( "#toggle" ).button().click(function() {
|
||||
if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
|
||||
$( "#accordion" ).accordion( "option", "icons", null );
|
||||
} else {
|
||||
$( "#accordion" ).accordion( "option", "icons", icons );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
|
||||
</div>
|
||||
<h3>Section 2</h3>
|
||||
<div>
|
||||
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
|
||||
</div>
|
||||
<h3>Section 3</h3>
|
||||
<div>
|
||||
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
|
||||
<ul>
|
||||
<li>List item one</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Section 4</h3>
|
||||
<div>
|
||||
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="toggle">Toggle icons</button>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Customize the header icons with the <code>icons</code> option, which accepts classes for the header's default and active (open) state. Use any class from the UI CSS framework, or create custom classes with background images.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
80
include/jQuery/jquery-ui/demos/accordion/default.html
Executable file
80
include/jQuery/jquery-ui/demos/accordion/default.html
Executable file
@@ -0,0 +1,80 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#accordion" ).accordion();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
<p>
|
||||
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
|
||||
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
|
||||
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
|
||||
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
|
||||
</p>
|
||||
</div>
|
||||
<h3>Section 2</h3>
|
||||
<div>
|
||||
<p>
|
||||
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
|
||||
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
|
||||
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
|
||||
suscipit faucibus urna.
|
||||
</p>
|
||||
</div>
|
||||
<h3>Section 3</h3>
|
||||
<div>
|
||||
<p>
|
||||
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
|
||||
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
|
||||
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
|
||||
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
|
||||
</p>
|
||||
<ul>
|
||||
<li>List item one</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Section 4</h3>
|
||||
<div>
|
||||
<p>
|
||||
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
|
||||
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
|
||||
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
|
||||
mauris vel est.
|
||||
</p>
|
||||
<p>
|
||||
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
|
||||
inceptos himenaeos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
|
||||
Optionally, toggle sections open/closed on mouseover.
|
||||
</p>
|
||||
<p>
|
||||
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
|
||||
usable without JavaScript.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
72
include/jQuery/jquery-ui/demos/accordion/fillspace.html
Executable file
72
include/jQuery/jquery-ui/demos/accordion/fillspace.html
Executable file
@@ -0,0 +1,72 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion - Fill space</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#accordion-resizer {
|
||||
padding: 10px;
|
||||
width: 350px;
|
||||
height: 220px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#accordion" ).accordion({
|
||||
heightStyle: "fill"
|
||||
});
|
||||
});
|
||||
$(function() {
|
||||
$( "#accordion-resizer" ).resizable({
|
||||
minHeight: 140,
|
||||
minWidth: 200,
|
||||
resize: function() {
|
||||
$( "#accordion" ).accordion( "refresh" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3 class="docs">Resize the outer container:</h3>
|
||||
|
||||
<div id="accordion-resizer" class="ui-widget-content">
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
|
||||
</div>
|
||||
<h3>Section 2</h3>
|
||||
<div>
|
||||
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
|
||||
</div>
|
||||
<h3>Section 3</h3>
|
||||
<div>
|
||||
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
|
||||
<ul>
|
||||
<li>List item one</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Section 4</h3>
|
||||
<div>
|
||||
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space. To fill the vertical space allocated by its container, set the <code>heightStyle</code> option to <code>"fill"</code>, and the script will automatically set the dimensions of the accordion to the height of its parent container.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
148
include/jQuery/jquery-ui/demos/accordion/hoverintent.html
Executable file
148
include/jQuery/jquery-ui/demos/accordion/hoverintent.html
Executable file
@@ -0,0 +1,148 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion - Open on hoverintent</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#accordion" ).accordion({
|
||||
event: "click hoverintent"
|
||||
});
|
||||
});
|
||||
|
||||
/*
|
||||
* hoverIntent | Copyright 2011 Brian Cherne
|
||||
* http://cherne.net/brian/resources/jquery.hoverIntent.html
|
||||
* modified by the jQuery UI team
|
||||
*/
|
||||
$.event.special.hoverintent = {
|
||||
setup: function() {
|
||||
$( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
|
||||
},
|
||||
teardown: function() {
|
||||
$( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
|
||||
},
|
||||
handler: function( event ) {
|
||||
var currentX, currentY, timeout,
|
||||
args = arguments,
|
||||
target = $( event.target ),
|
||||
previousX = event.pageX,
|
||||
previousY = event.pageY;
|
||||
|
||||
function track( event ) {
|
||||
currentX = event.pageX;
|
||||
currentY = event.pageY;
|
||||
};
|
||||
|
||||
function clear() {
|
||||
target
|
||||
.unbind( "mousemove", track )
|
||||
.unbind( "mouseout", clear );
|
||||
clearTimeout( timeout );
|
||||
}
|
||||
|
||||
function handler() {
|
||||
var prop,
|
||||
orig = event;
|
||||
|
||||
if ( ( Math.abs( previousX - currentX ) +
|
||||
Math.abs( previousY - currentY ) ) < 7 ) {
|
||||
clear();
|
||||
|
||||
event = $.Event( "hoverintent" );
|
||||
for ( prop in orig ) {
|
||||
if ( !( prop in event ) ) {
|
||||
event[ prop ] = orig[ prop ];
|
||||
}
|
||||
}
|
||||
// Prevent accessing the original event since the new event
|
||||
// is fired asynchronously and the old event is no longer
|
||||
// usable (#6028)
|
||||
delete event.originalEvent;
|
||||
|
||||
target.trigger( event );
|
||||
} else {
|
||||
previousX = currentX;
|
||||
previousY = currentY;
|
||||
timeout = setTimeout( handler, 100 );
|
||||
}
|
||||
}
|
||||
|
||||
timeout = setTimeout( handler, 100 );
|
||||
target.bind({
|
||||
mousemove: track,
|
||||
mouseout: clear
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
<p>
|
||||
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
|
||||
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
|
||||
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
|
||||
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
|
||||
</p>
|
||||
</div>
|
||||
<h3>Section 2</h3>
|
||||
<div>
|
||||
<p>
|
||||
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
|
||||
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
|
||||
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
|
||||
suscipit faucibus urna.
|
||||
</p>
|
||||
</div>
|
||||
<h3>Section 3</h3>
|
||||
<div>
|
||||
<p>
|
||||
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
|
||||
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
|
||||
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
|
||||
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
|
||||
</p>
|
||||
<ul>
|
||||
<li>List item one</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Section 4</h3>
|
||||
<div>
|
||||
<p>
|
||||
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
|
||||
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
|
||||
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
|
||||
mauris vel est.
|
||||
</p>
|
||||
<p>
|
||||
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
|
||||
inceptos himenaeos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
|
||||
Optionally, toggle sections open/closed on mouseover.
|
||||
</p>
|
||||
<p>
|
||||
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
|
||||
usable without JavaScript.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
20
include/jQuery/jquery-ui/demos/accordion/index.html
Executable file
20
include/jQuery/jquery-ui/demos/accordion/index.html
Executable file
@@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="fillspace.html">Fill space</a></li>
|
||||
<li><a href="no-auto-height.html">No auto height</a></li>
|
||||
<li><a href="collapsible.html">Collapse content</a></li>
|
||||
<li><a href="hoverintent.html">Open on hoverintent</a></li>
|
||||
<li><a href="custom-icons.html">Customize icons</a></li>
|
||||
<li><a href="sortable.html">Sortable</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
50
include/jQuery/jquery-ui/demos/accordion/no-auto-height.html
Executable file
50
include/jQuery/jquery-ui/demos/accordion/no-auto-height.html
Executable file
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion - No auto height</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#accordion" ).accordion({
|
||||
heightStyle: "content"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
|
||||
</div>
|
||||
<h3>Section 2</h3>
|
||||
<div>
|
||||
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
|
||||
</div>
|
||||
<h3>Section 3</h3>
|
||||
<div>
|
||||
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
|
||||
<ul>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Setting <code>heightStyle: "content"</code> allows the accordion panels to keep their native height.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
74
include/jQuery/jquery-ui/demos/accordion/sortable.html
Executable file
74
include/jQuery/jquery-ui/demos/accordion/sortable.html
Executable file
@@ -0,0 +1,74 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion - Sortable</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.sortable.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
/* IE has layout issues when sorting (see #5413) */
|
||||
.group { zoom: 1 }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#accordion" )
|
||||
.accordion({
|
||||
header: "> div > h3"
|
||||
})
|
||||
.sortable({
|
||||
axis: "y",
|
||||
handle: "h3",
|
||||
stop: function( event, ui ) {
|
||||
// IE doesn't register the blur when sorting
|
||||
// so trigger focusout handlers to remove .ui-state-focus
|
||||
ui.item.children( "h3" ).triggerHandler( "focusout" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<div class="group">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Section 2</h3>
|
||||
<div>
|
||||
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Section 3</h3>
|
||||
<div>
|
||||
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
|
||||
<ul>
|
||||
<li>List item one</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Section 4</h3>
|
||||
<div>
|
||||
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Drag the header to re-order panels.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
45
include/jQuery/jquery-ui/demos/addClass/default.html
Executable file
45
include/jQuery/jquery-ui/demos/addClass/default.html
Executable file
@@ -0,0 +1,45 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects - addClass demo</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.toggler { width: 500px; height: 200px; position: relative; }
|
||||
#button { padding: .5em 1em; text-decoration: none; }
|
||||
#effect { width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
|
||||
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#button" ).click(function() {
|
||||
$( "#effect" ).addClass( "newClass", 1000, callback );
|
||||
return false;
|
||||
});
|
||||
|
||||
function callback() {
|
||||
setTimeout(function() {
|
||||
$( "#effect" ).removeClass( "newClass" );
|
||||
}, 1500 );
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="toggler">
|
||||
<div id="effect" class="ui-corner-all">
|
||||
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
14
include/jQuery/jquery-ui/demos/addClass/index.html
Executable file
14
include/jQuery/jquery-ui/demos/addClass/index.html
Executable file
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
55
include/jQuery/jquery-ui/demos/animate/default.html
Executable file
55
include/jQuery/jquery-ui/demos/animate/default.html
Executable file
@@ -0,0 +1,55 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects - Animate demo</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.toggler { width: 500px; height: 200px; position: relative; }
|
||||
#button { padding: .5em 1em; text-decoration: none; }
|
||||
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
|
||||
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
var state = true;
|
||||
$( "#button" ).click(function() {
|
||||
if ( state ) {
|
||||
$( "#effect" ).animate({
|
||||
backgroundColor: "#aa0000",
|
||||
color: "#fff",
|
||||
width: 500
|
||||
}, 1000 );
|
||||
} else {
|
||||
$( "#effect" ).animate({
|
||||
backgroundColor: "#fff",
|
||||
color: "#000",
|
||||
width: 240
|
||||
}, 1000 );
|
||||
}
|
||||
state = !state;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="toggler">
|
||||
<div id="effect" class="ui-widget-content ui-corner-all">
|
||||
<h3 class="ui-widget-header ui-corner-all">Animate</h3>
|
||||
<p>
|
||||
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Click the button above to preview the effect.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
14
include/jQuery/jquery-ui/demos/animate/index.html
Executable file
14
include/jQuery/jquery-ui/demos/animate/index.html
Executable file
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
67
include/jQuery/jquery-ui/demos/autocomplete/categories.html
Executable file
67
include/jQuery/jquery-ui/demos/autocomplete/categories.html
Executable file
@@ -0,0 +1,67 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Categories</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.ui-autocomplete-category {
|
||||
font-weight: bold;
|
||||
padding: .2em .4em;
|
||||
margin: .8em 0 .2em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$.widget( "custom.catcomplete", $.ui.autocomplete, {
|
||||
_renderMenu: function( ul, items ) {
|
||||
var that = this,
|
||||
currentCategory = "";
|
||||
$.each( items, function( index, item ) {
|
||||
if ( item.category != currentCategory ) {
|
||||
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
|
||||
currentCategory = item.category;
|
||||
}
|
||||
that._renderItemData( ul, item );
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$(function() {
|
||||
var data = [
|
||||
{ label: "anders", category: "" },
|
||||
{ label: "andreas", category: "" },
|
||||
{ label: "antal", category: "" },
|
||||
{ label: "annhhx10", category: "Products" },
|
||||
{ label: "annk K12", category: "Products" },
|
||||
{ label: "annttop C13", category: "Products" },
|
||||
{ label: "anders andersson", category: "People" },
|
||||
{ label: "andreas andersson", category: "People" },
|
||||
{ label: "andreas johnson", category: "People" }
|
||||
];
|
||||
|
||||
$( "#search" ).catcomplete({
|
||||
delay: 0,
|
||||
source: data
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<label for="search">Search: </label>
|
||||
<input id="search">
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A categorized search result. Try typing "a" or "n".</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
213
include/jQuery/jquery-ui/demos/autocomplete/combobox.html
Executable file
213
include/jQuery/jquery-ui/demos/autocomplete/combobox.html
Executable file
@@ -0,0 +1,213 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Combobox</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<script src="../../ui/jquery.ui.tooltip.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.custom-combobox {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.custom-combobox-toggle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin-left: -1px;
|
||||
padding: 0;
|
||||
/* support: IE7 */
|
||||
*height: 1.7em;
|
||||
*top: 0.1em;
|
||||
}
|
||||
.custom-combobox-input {
|
||||
margin: 0;
|
||||
padding: 0.3em;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function( $ ) {
|
||||
$.widget( "custom.combobox", {
|
||||
_create: function() {
|
||||
this.wrapper = $( "<span>" )
|
||||
.addClass( "custom-combobox" )
|
||||
.insertAfter( this.element );
|
||||
|
||||
this.element.hide();
|
||||
this._createAutocomplete();
|
||||
this._createShowAllButton();
|
||||
},
|
||||
|
||||
_createAutocomplete: function() {
|
||||
var selected = this.element.children( ":selected" ),
|
||||
value = selected.val() ? selected.text() : "";
|
||||
|
||||
this.input = $( "<input>" )
|
||||
.appendTo( this.wrapper )
|
||||
.val( value )
|
||||
.attr( "title", "" )
|
||||
.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
|
||||
.autocomplete({
|
||||
delay: 0,
|
||||
minLength: 0,
|
||||
source: $.proxy( this, "_source" )
|
||||
})
|
||||
.tooltip({
|
||||
tooltipClass: "ui-state-highlight"
|
||||
});
|
||||
|
||||
this._on( this.input, {
|
||||
autocompleteselect: function( event, ui ) {
|
||||
ui.item.option.selected = true;
|
||||
this._trigger( "select", event, {
|
||||
item: ui.item.option
|
||||
});
|
||||
},
|
||||
|
||||
autocompletechange: "_removeIfInvalid"
|
||||
});
|
||||
},
|
||||
|
||||
_createShowAllButton: function() {
|
||||
var input = this.input,
|
||||
wasOpen = false;
|
||||
|
||||
$( "<a>" )
|
||||
.attr( "tabIndex", -1 )
|
||||
.attr( "title", "Show All Items" )
|
||||
.tooltip()
|
||||
.appendTo( this.wrapper )
|
||||
.button({
|
||||
icons: {
|
||||
primary: "ui-icon-triangle-1-s"
|
||||
},
|
||||
text: false
|
||||
})
|
||||
.removeClass( "ui-corner-all" )
|
||||
.addClass( "custom-combobox-toggle ui-corner-right" )
|
||||
.mousedown(function() {
|
||||
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
|
||||
})
|
||||
.click(function() {
|
||||
input.focus();
|
||||
|
||||
// Close if already visible
|
||||
if ( wasOpen ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Pass empty string as value to search for, displaying all results
|
||||
input.autocomplete( "search", "" );
|
||||
});
|
||||
},
|
||||
|
||||
_source: function( request, response ) {
|
||||
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
|
||||
response( this.element.children( "option" ).map(function() {
|
||||
var text = $( this ).text();
|
||||
if ( this.value && ( !request.term || matcher.test(text) ) )
|
||||
return {
|
||||
label: text,
|
||||
value: text,
|
||||
option: this
|
||||
};
|
||||
}) );
|
||||
},
|
||||
|
||||
_removeIfInvalid: function( event, ui ) {
|
||||
|
||||
// Selected an item, nothing to do
|
||||
if ( ui.item ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Search for a match (case-insensitive)
|
||||
var value = this.input.val(),
|
||||
valueLowerCase = value.toLowerCase(),
|
||||
valid = false;
|
||||
this.element.children( "option" ).each(function() {
|
||||
if ( $( this ).text().toLowerCase() === valueLowerCase ) {
|
||||
this.selected = valid = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Found a match, nothing to do
|
||||
if ( valid ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove invalid value
|
||||
this.input
|
||||
.val( "" )
|
||||
.attr( "title", value + " didn't match any item" )
|
||||
.tooltip( "open" );
|
||||
this.element.val( "" );
|
||||
this._delay(function() {
|
||||
this.input.tooltip( "close" ).attr( "title", "" );
|
||||
}, 2500 );
|
||||
this.input.data( "ui-autocomplete" ).term = "";
|
||||
},
|
||||
|
||||
_destroy: function() {
|
||||
this.wrapper.remove();
|
||||
this.element.show();
|
||||
}
|
||||
});
|
||||
})( jQuery );
|
||||
|
||||
$(function() {
|
||||
$( "#combobox" ).combobox();
|
||||
$( "#toggle" ).click(function() {
|
||||
$( "#combobox" ).toggle();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-widget">
|
||||
<label>Your preferred programming language: </label>
|
||||
<select id="combobox">
|
||||
<option value="">Select one...</option>
|
||||
<option value="ActionScript">ActionScript</option>
|
||||
<option value="AppleScript">AppleScript</option>
|
||||
<option value="Asp">Asp</option>
|
||||
<option value="BASIC">BASIC</option>
|
||||
<option value="C">C</option>
|
||||
<option value="C++">C++</option>
|
||||
<option value="Clojure">Clojure</option>
|
||||
<option value="COBOL">COBOL</option>
|
||||
<option value="ColdFusion">ColdFusion</option>
|
||||
<option value="Erlang">Erlang</option>
|
||||
<option value="Fortran">Fortran</option>
|
||||
<option value="Groovy">Groovy</option>
|
||||
<option value="Haskell">Haskell</option>
|
||||
<option value="Java">Java</option>
|
||||
<option value="JavaScript">JavaScript</option>
|
||||
<option value="Lisp">Lisp</option>
|
||||
<option value="Perl">Perl</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value="Python">Python</option>
|
||||
<option value="Ruby">Ruby</option>
|
||||
<option value="Scala">Scala</option>
|
||||
<option value="Scheme">Scheme</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="toggle">Show underlying select</button>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.</p>
|
||||
<p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p>
|
||||
<p>This is not a supported or even complete widget. Its purely for demoing what autocomplete can do with a bit of customization. <a href="http://www.learningjquery.com/2010/06/a-jquery-ui-combobox-under-the-hood">For a detailed explanation of how the widget works, check out this Learning jQuery article.</a></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
90
include/jQuery/jquery-ui/demos/autocomplete/custom-data.html
Executable file
90
include/jQuery/jquery-ui/demos/autocomplete/custom-data.html
Executable file
@@ -0,0 +1,90 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Custom data and display</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#project-label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
#project-icon {
|
||||
float: left;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
#project-description {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
var projects = [
|
||||
{
|
||||
value: "jquery",
|
||||
label: "jQuery",
|
||||
desc: "the write less, do more, JavaScript library",
|
||||
icon: "jquery_32x32.png"
|
||||
},
|
||||
{
|
||||
value: "jquery-ui",
|
||||
label: "jQuery UI",
|
||||
desc: "the official user interface library for jQuery",
|
||||
icon: "jqueryui_32x32.png"
|
||||
},
|
||||
{
|
||||
value: "sizzlejs",
|
||||
label: "Sizzle JS",
|
||||
desc: "a pure-JavaScript CSS selector engine",
|
||||
icon: "sizzlejs_32x32.png"
|
||||
}
|
||||
];
|
||||
|
||||
$( "#project" ).autocomplete({
|
||||
minLength: 0,
|
||||
source: projects,
|
||||
focus: function( event, ui ) {
|
||||
$( "#project" ).val( ui.item.label );
|
||||
return false;
|
||||
},
|
||||
select: function( event, ui ) {
|
||||
$( "#project" ).val( ui.item.label );
|
||||
$( "#project-id" ).val( ui.item.value );
|
||||
$( "#project-description" ).html( ui.item.desc );
|
||||
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
|
||||
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
|
||||
return $( "<li>" )
|
||||
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
|
||||
.appendTo( ul );
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="project-label">Select a project (type "j" for a start):</div>
|
||||
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
|
||||
<input id="project">
|
||||
<input type="hidden" id="project-id">
|
||||
<p id="project-description"></p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>You can use your own custom data formats and displays by simply overriding the default focus and select actions.</p>
|
||||
<p>Try typing "j" to get a list of projects or just press the down arrow.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
58
include/jQuery/jquery-ui/demos/autocomplete/default.html
Executable file
58
include/jQuery/jquery-ui/demos/autocomplete/default.html
Executable file
@@ -0,0 +1,58 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
var availableTags = [
|
||||
"ActionScript",
|
||||
"AppleScript",
|
||||
"Asp",
|
||||
"BASIC",
|
||||
"C",
|
||||
"C++",
|
||||
"Clojure",
|
||||
"COBOL",
|
||||
"ColdFusion",
|
||||
"Erlang",
|
||||
"Fortran",
|
||||
"Groovy",
|
||||
"Haskell",
|
||||
"Java",
|
||||
"JavaScript",
|
||||
"Lisp",
|
||||
"Perl",
|
||||
"PHP",
|
||||
"Python",
|
||||
"Ruby",
|
||||
"Scala",
|
||||
"Scheme"
|
||||
];
|
||||
$( "#tags" ).autocomplete({
|
||||
source: availableTags
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="tags">Tags: </label>
|
||||
<input id="tags">
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
|
||||
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
56
include/jQuery/jquery-ui/demos/autocomplete/folding.html
Executable file
56
include/jQuery/jquery-ui/demos/autocomplete/folding.html
Executable file
@@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Accent folding</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];
|
||||
|
||||
var accentMap = {
|
||||
"á": "a",
|
||||
"ö": "o"
|
||||
};
|
||||
var normalize = function( term ) {
|
||||
var ret = "";
|
||||
for ( var i = 0; i < term.length; i++ ) {
|
||||
ret += accentMap[ term.charAt(i) ] || term.charAt(i);
|
||||
}
|
||||
return ret;
|
||||
};
|
||||
|
||||
$( "#developer" ).autocomplete({
|
||||
source: function( request, response ) {
|
||||
var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
|
||||
response( $.grep( names, function( value ) {
|
||||
value = value.label || value.value || value;
|
||||
return matcher.test( value ) || matcher.test( normalize( value ) );
|
||||
}) );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-widget">
|
||||
<form>
|
||||
<label for="developer">Developer: </label>
|
||||
<input id="developer">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented.</p>
|
||||
<p>Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
25
include/jQuery/jquery-ui/demos/autocomplete/index.html
Executable file
25
include/jQuery/jquery-ui/demos/autocomplete/index.html
Executable file
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="remote.html">Remote datasource</a></li>
|
||||
<li><a href="remote-with-cache.html">Remote with caching</a></li>
|
||||
<li><a href="remote-jsonp.html">Remote JSONP datasource</a></li>
|
||||
<li><a href="maxheight.html">Scrollable results</a></li>
|
||||
<li><a href="combobox.html">Combobox</a></li>
|
||||
<li><a href="custom-data.html">Custom data and display</a></li>
|
||||
<li><a href="xml.html">XML data parsed once</a></li>
|
||||
<li><a href="categories.html">Categories</a></li>
|
||||
<li><a href="folding.html">Accent folding</a></li>
|
||||
<li><a href="multiple.html">Multiple values</a></li>
|
||||
<li><a href="multiple-remote.html">Multiple, remote</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
71
include/jQuery/jquery-ui/demos/autocomplete/maxheight.html
Executable file
71
include/jQuery/jquery-ui/demos/autocomplete/maxheight.html
Executable file
@@ -0,0 +1,71 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Scrollable results</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.ui-autocomplete {
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
/* prevent horizontal scrollbar */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
/* IE 6 doesn't support max-height
|
||||
* we use height instead, but this forces the menu to always be this tall
|
||||
*/
|
||||
* html .ui-autocomplete {
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
var availableTags = [
|
||||
"ActionScript",
|
||||
"AppleScript",
|
||||
"Asp",
|
||||
"BASIC",
|
||||
"C",
|
||||
"C++",
|
||||
"Clojure",
|
||||
"COBOL",
|
||||
"ColdFusion",
|
||||
"Erlang",
|
||||
"Fortran",
|
||||
"Groovy",
|
||||
"Haskell",
|
||||
"Java",
|
||||
"JavaScript",
|
||||
"Lisp",
|
||||
"Perl",
|
||||
"PHP",
|
||||
"Python",
|
||||
"Ruby",
|
||||
"Scala",
|
||||
"Scheme"
|
||||
];
|
||||
$( "#tags" ).autocomplete({
|
||||
source: availableTags
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="tags">Tags: </label>
|
||||
<input id="tags">
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large. Try typing "a" or "s" above to get a long list of results that you can scroll through.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
80
include/jQuery/jquery-ui/demos/autocomplete/multiple-remote.html
Executable file
80
include/jQuery/jquery-ui/demos/autocomplete/multiple-remote.html
Executable file
@@ -0,0 +1,80 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Multiple, remote</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.ui-autocomplete-loading {
|
||||
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
function split( val ) {
|
||||
return val.split( /,\s*/ );
|
||||
}
|
||||
function extractLast( term ) {
|
||||
return split( term ).pop();
|
||||
}
|
||||
|
||||
$( "#birds" )
|
||||
// don't navigate away from the field on tab when selecting an item
|
||||
.bind( "keydown", function( event ) {
|
||||
if ( event.keyCode === $.ui.keyCode.TAB &&
|
||||
$( this ).data( "ui-autocomplete" ).menu.active ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
})
|
||||
.autocomplete({
|
||||
source: function( request, response ) {
|
||||
$.getJSON( "search.php", {
|
||||
term: extractLast( request.term )
|
||||
}, response );
|
||||
},
|
||||
search: function() {
|
||||
// custom minLength
|
||||
var term = extractLast( this.value );
|
||||
if ( term.length < 2 ) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
focus: function() {
|
||||
// prevent value inserted on focus
|
||||
return false;
|
||||
},
|
||||
select: function( event, ui ) {
|
||||
var terms = split( this.value );
|
||||
// remove the current input
|
||||
terms.pop();
|
||||
// add the selected item
|
||||
terms.push( ui.item.value );
|
||||
// add placeholder to get the comma-and-space at the end
|
||||
terms.push( "" );
|
||||
this.value = terms.join( ", " );
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">Birds: </label>
|
||||
<input id="birds" size="50">
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.</p>
|
||||
<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
93
include/jQuery/jquery-ui/demos/autocomplete/multiple.html
Executable file
93
include/jQuery/jquery-ui/demos/autocomplete/multiple.html
Executable file
@@ -0,0 +1,93 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Multiple values</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
var availableTags = [
|
||||
"ActionScript",
|
||||
"AppleScript",
|
||||
"Asp",
|
||||
"BASIC",
|
||||
"C",
|
||||
"C++",
|
||||
"Clojure",
|
||||
"COBOL",
|
||||
"ColdFusion",
|
||||
"Erlang",
|
||||
"Fortran",
|
||||
"Groovy",
|
||||
"Haskell",
|
||||
"Java",
|
||||
"JavaScript",
|
||||
"Lisp",
|
||||
"Perl",
|
||||
"PHP",
|
||||
"Python",
|
||||
"Ruby",
|
||||
"Scala",
|
||||
"Scheme"
|
||||
];
|
||||
function split( val ) {
|
||||
return val.split( /,\s*/ );
|
||||
}
|
||||
function extractLast( term ) {
|
||||
return split( term ).pop();
|
||||
}
|
||||
|
||||
$( "#tags" )
|
||||
// don't navigate away from the field on tab when selecting an item
|
||||
.bind( "keydown", function( event ) {
|
||||
if ( event.keyCode === $.ui.keyCode.TAB &&
|
||||
$( this ).data( "ui-autocomplete" ).menu.active ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
})
|
||||
.autocomplete({
|
||||
minLength: 0,
|
||||
source: function( request, response ) {
|
||||
// delegate back to autocomplete, but extract the last term
|
||||
response( $.ui.autocomplete.filter(
|
||||
availableTags, extractLast( request.term ) ) );
|
||||
},
|
||||
focus: function() {
|
||||
// prevent value inserted on focus
|
||||
return false;
|
||||
},
|
||||
select: function( event, ui ) {
|
||||
var terms = split( this.value );
|
||||
// remove the current input
|
||||
terms.pop();
|
||||
// add the selected item
|
||||
terms.push( ui.item.value );
|
||||
// add placeholder to get the comma-and-space at the end
|
||||
terms.push( "" );
|
||||
this.value = terms.join( ", " );
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="tags">Tag programming languages: </label>
|
||||
<input id="tags" size="50">
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p>
|
||||
<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
82
include/jQuery/jquery-ui/demos/autocomplete/remote-jsonp.html
Executable file
82
include/jQuery/jquery-ui/demos/autocomplete/remote-jsonp.html
Executable file
@@ -0,0 +1,82 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.ui-autocomplete-loading {
|
||||
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
|
||||
}
|
||||
#city { width: 25em; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
function log( message ) {
|
||||
$( "<div>" ).text( message ).prependTo( "#log" );
|
||||
$( "#log" ).scrollTop( 0 );
|
||||
}
|
||||
|
||||
$( "#city" ).autocomplete({
|
||||
source: function( request, response ) {
|
||||
$.ajax({
|
||||
url: "http://ws.geonames.org/searchJSON",
|
||||
dataType: "jsonp",
|
||||
data: {
|
||||
featureClass: "P",
|
||||
style: "full",
|
||||
maxRows: 12,
|
||||
name_startsWith: request.term
|
||||
},
|
||||
success: function( data ) {
|
||||
response( $.map( data.geonames, function( item ) {
|
||||
return {
|
||||
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
|
||||
value: item.name
|
||||
}
|
||||
}));
|
||||
}
|
||||
});
|
||||
},
|
||||
minLength: 2,
|
||||
select: function( event, ui ) {
|
||||
log( ui.item ?
|
||||
"Selected: " + ui.item.label :
|
||||
"Nothing selected, input was " + this.value);
|
||||
},
|
||||
open: function() {
|
||||
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
|
||||
},
|
||||
close: function() {
|
||||
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="city">Your city: </label>
|
||||
<input id="city">
|
||||
Powered by <a href="http://geonames.org">geonames.org</a>
|
||||
</div>
|
||||
|
||||
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
|
||||
Result:
|
||||
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p>
|
||||
<p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
52
include/jQuery/jquery-ui/demos/autocomplete/remote-with-cache.html
Executable file
52
include/jQuery/jquery-ui/demos/autocomplete/remote-with-cache.html
Executable file
@@ -0,0 +1,52 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Remote with caching</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.ui-autocomplete-loading {
|
||||
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
var cache = {};
|
||||
$( "#birds" ).autocomplete({
|
||||
minLength: 2,
|
||||
source: function( request, response ) {
|
||||
var term = request.term;
|
||||
if ( term in cache ) {
|
||||
response( cache[ term ] );
|
||||
return;
|
||||
}
|
||||
|
||||
$.getJSON( "search.php", request, function( data, status, xhr ) {
|
||||
cache[ term ] = data;
|
||||
response( data );
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">Birds: </label>
|
||||
<input id="birds">
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
|
||||
<p>Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
55
include/jQuery/jquery-ui/demos/autocomplete/remote.html
Executable file
55
include/jQuery/jquery-ui/demos/autocomplete/remote.html
Executable file
@@ -0,0 +1,55 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Remote datasource</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.ui-autocomplete-loading {
|
||||
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
function log( message ) {
|
||||
$( "<div>" ).text( message ).prependTo( "#log" );
|
||||
$( "#log" ).scrollTop( 0 );
|
||||
}
|
||||
|
||||
$( "#birds" ).autocomplete({
|
||||
source: "search.php",
|
||||
minLength: 2,
|
||||
select: function( event, ui ) {
|
||||
log( ui.item ?
|
||||
"Selected: " + ui.item.value + " aka " + ui.item.id :
|
||||
"Nothing selected, input was " + this.value );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">Birds: </label>
|
||||
<input id="birds">
|
||||
</div>
|
||||
|
||||
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
|
||||
Result:
|
||||
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
|
||||
<p>The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
66
include/jQuery/jquery-ui/demos/autocomplete/xml.html
Executable file
66
include/jQuery/jquery-ui/demos/autocomplete/xml.html
Executable file
@@ -0,0 +1,66 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - XML data parsed once</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
function log( message ) {
|
||||
$( "<div/>" ).text( message ).prependTo( "#log" );
|
||||
$( "#log" ).attr( "scrollTop", 0 );
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: "london.xml",
|
||||
dataType: "xml",
|
||||
success: function( xmlResponse ) {
|
||||
var data = $( "geoname", xmlResponse ).map(function() {
|
||||
return {
|
||||
value: $( "name", this ).text() + ", " +
|
||||
( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
|
||||
id: $( "geonameId", this ).text()
|
||||
};
|
||||
}).get();
|
||||
$( "#birds" ).autocomplete({
|
||||
source: data,
|
||||
minLength: 0,
|
||||
select: function( event, ui ) {
|
||||
log( ui.item ?
|
||||
"Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
|
||||
"Nothing selected, input was " + this.value );
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">London matches: </label>
|
||||
<input id="birds" />
|
||||
</div>
|
||||
|
||||
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
|
||||
Result:
|
||||
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.</p>
|
||||
<p>This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
37
include/jQuery/jquery-ui/demos/button/checkbox.html
Executable file
37
include/jQuery/jquery-ui/demos/button/checkbox.html
Executable file
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Checkboxes</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#check" ).button();
|
||||
$( "#format" ).buttonset();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#format { margin-top: 2em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<input type="checkbox" id="check" /><label for="check">Toggle</label>
|
||||
|
||||
<div id="format">
|
||||
<input type="checkbox" id="check1" /><label for="check1">B</label>
|
||||
<input type="checkbox" id="check2" /><label for="check2">I</label>
|
||||
<input type="checkbox" id="check3" /><label for="check3">U</label>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p>
|
||||
<p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
34
include/jQuery/jquery-ui/demos/button/default.html
Executable file
34
include/jQuery/jquery-ui/demos/button/default.html
Executable file
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "input[type=submit], a, button" )
|
||||
.button()
|
||||
.click(function( event ) {
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button>A button element</button>
|
||||
|
||||
<input type="submit" value="A submit button">
|
||||
|
||||
<a href="#">An anchor</a>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
49
include/jQuery/jquery-ui/demos/button/icons.html
Executable file
49
include/jQuery/jquery-ui/demos/button/icons.html
Executable file
@@ -0,0 +1,49 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Icons</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "button:first" ).button({
|
||||
icons: {
|
||||
primary: "ui-icon-locked"
|
||||
},
|
||||
text: false
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-locked"
|
||||
}
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-gear",
|
||||
secondary: "ui-icon-triangle-1-s"
|
||||
}
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-gear",
|
||||
secondary: "ui-icon-triangle-1-s"
|
||||
},
|
||||
text: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button>Button with icon only</button>
|
||||
<button>Button with icon on the left</button>
|
||||
<button>Button with two icons</button>
|
||||
<button>Button with two icons and no text</button>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Some buttons with various combinations of text and icons.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
19
include/jQuery/jquery-ui/demos/button/index.html
Executable file
19
include/jQuery/jquery-ui/demos/button/index.html
Executable file
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="radio.html">Radios</a></li>
|
||||
<li><a href="checkbox.html">Checkboxes</a></li>
|
||||
<li><a href="icons.html">Icons</a></li>
|
||||
<li><a href="toolbar.html">Toolbar</a></li>
|
||||
<li><a href="splitbutton.html">Split Button</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
32
include/jQuery/jquery-ui/demos/button/radio.html
Executable file
32
include/jQuery/jquery-ui/demos/button/radio.html
Executable file
@@ -0,0 +1,32 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Radios</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#radio" ).buttonset();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form>
|
||||
<div id="radio">
|
||||
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
|
||||
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
|
||||
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A set of three radio buttons transformed into a button set.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
69
include/jQuery/jquery-ui/demos/button/splitbutton.html
Executable file
69
include/jQuery/jquery-ui/demos/button/splitbutton.html
Executable file
@@ -0,0 +1,69 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Split button</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.ui-menu { position: absolute; width: 100px; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#rerun" )
|
||||
.button()
|
||||
.click(function() {
|
||||
alert( "Running the last action" );
|
||||
})
|
||||
.next()
|
||||
.button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-triangle-1-s"
|
||||
}
|
||||
})
|
||||
.click(function() {
|
||||
var menu = $( this ).parent().next().show().position({
|
||||
my: "left top",
|
||||
at: "left bottom",
|
||||
of: this
|
||||
});
|
||||
$( document ).one( "click", function() {
|
||||
menu.hide();
|
||||
});
|
||||
return false;
|
||||
})
|
||||
.parent()
|
||||
.buttonset()
|
||||
.next()
|
||||
.hide()
|
||||
.menu();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<button id="rerun">Run last action</button>
|
||||
<button id="select">Select an action</button>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="#">Open...</a></li>
|
||||
<li><a href="#">Save</a></li>
|
||||
<li><a href="#">Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>An example of a split button built with two buttons: A plain button with just text, one with only a primary icon
|
||||
and no text. Both are grouped together in a set.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
118
include/jQuery/jquery-ui/demos/button/toolbar.html
Executable file
118
include/jQuery/jquery-ui/demos/button/toolbar.html
Executable file
@@ -0,0 +1,118 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Toolbar</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#toolbar {
|
||||
padding: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
/* support: IE7 */
|
||||
*+html #toolbar {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#beginning" ).button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-seek-start"
|
||||
}
|
||||
});
|
||||
$( "#rewind" ).button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-seek-prev"
|
||||
}
|
||||
});
|
||||
$( "#play" ).button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-play"
|
||||
}
|
||||
})
|
||||
.click(function() {
|
||||
var options;
|
||||
if ( $( this ).text() === "play" ) {
|
||||
options = {
|
||||
label: "pause",
|
||||
icons: {
|
||||
primary: "ui-icon-pause"
|
||||
}
|
||||
};
|
||||
} else {
|
||||
options = {
|
||||
label: "play",
|
||||
icons: {
|
||||
primary: "ui-icon-play"
|
||||
}
|
||||
};
|
||||
}
|
||||
$( this ).button( "option", options );
|
||||
});
|
||||
$( "#stop" ).button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-stop"
|
||||
}
|
||||
})
|
||||
.click(function() {
|
||||
$( "#play" ).button( "option", {
|
||||
label: "play",
|
||||
icons: {
|
||||
primary: "ui-icon-play"
|
||||
}
|
||||
});
|
||||
});
|
||||
$( "#forward" ).button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-seek-next"
|
||||
}
|
||||
});
|
||||
$( "#end" ).button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-seek-end"
|
||||
}
|
||||
});
|
||||
$( "#shuffle" ).button();
|
||||
$( "#repeat" ).buttonset();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="toolbar" class="ui-widget-header ui-corner-all">
|
||||
<button id="beginning">go to beginning</button>
|
||||
<button id="rewind">rewind</button>
|
||||
<button id="play">play</button>
|
||||
<button id="stop">stop</button>
|
||||
<button id="forward">fast forward</button>
|
||||
<button id="end">go to end</button>
|
||||
|
||||
<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
|
||||
|
||||
<span id="repeat">
|
||||
<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
|
||||
<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
|
||||
<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
|
||||
an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
29
include/jQuery/jquery-ui/demos/datepicker/alt-field.html
Executable file
29
include/jQuery/jquery-ui/demos/datepicker/alt-field.html
Executable file
@@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Populate alternate field</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#datepicker" ).datepicker({
|
||||
altField: "#alternate",
|
||||
altFormat: "DD, d MM, yy"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"> <input type="text" id="alternate" size="30"/></p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Populate an alternate field with its own date format whenever a date is selected using the <code>altField</code> and <code>altFormat</code> options. This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
51
include/jQuery/jquery-ui/demos/datepicker/animation.html
Executable file
51
include/jQuery/jquery-ui/demos/datepicker/animation.html
Executable file
@@ -0,0 +1,51 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Animations</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-blind.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-bounce.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-clip.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-drop.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-fold.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-slide.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#datepicker" ).datepicker();
|
||||
$( "#anim" ).change(function() {
|
||||
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Date: <input type="text" id="datepicker" size="30"/></p>
|
||||
|
||||
<p>Animations:<br />
|
||||
<select id="anim">
|
||||
<option value="show">Show (default)</option>
|
||||
<option value="slideDown">Slide down</option>
|
||||
<option value="fadeIn">Fade in</option>
|
||||
<option value="blind">Blind (UI Effect)</option>
|
||||
<option value="bounce">Bounce (UI Effect)</option>
|
||||
<option value="clip">Clip (UI Effect)</option>
|
||||
<option value="drop">Drop (UI Effect)</option>
|
||||
<option value="fold">Fold (UI Effect)</option>
|
||||
<option value="slide">Slide (UI Effect)</option>
|
||||
<option value="">None</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Use different animations when opening or closing the datepicker. Choose an animation from the dropdown, then click on the input to see its effect. You can use one of the three standard animations or any of the UI Effects.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
28
include/jQuery/jquery-ui/demos/datepicker/buttonbar.html
Executable file
28
include/jQuery/jquery-ui/demos/datepicker/buttonbar.html
Executable file
@@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Display button bar</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#datepicker" ).datepicker({
|
||||
showButtonPanel: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Display a button for selecting Today's date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
40
include/jQuery/jquery-ui/demos/datepicker/date-formats.html
Executable file
40
include/jQuery/jquery-ui/demos/datepicker/date-formats.html
Executable file
@@ -0,0 +1,40 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Format date</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#datepicker" ).datepicker();
|
||||
$( "#format" ).change(function() {
|
||||
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Date: <input type="text" id="datepicker" size="30"/></p>
|
||||
|
||||
<p>Format options:<br />
|
||||
<select id="format">
|
||||
<option value="mm/dd/yy">Default - mm/dd/yy</option>
|
||||
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
|
||||
<option value="d M, y">Short - d M, y</option>
|
||||
<option value="d MM, y">Medium - d MM, y</option>
|
||||
<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
|
||||
<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
44
include/jQuery/jquery-ui/demos/datepicker/date-range.html
Executable file
44
include/jQuery/jquery-ui/demos/datepicker/date-range.html
Executable file
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Select a Date Range</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#from" ).datepicker({
|
||||
defaultDate: "+1w",
|
||||
changeMonth: true,
|
||||
numberOfMonths: 3,
|
||||
onClose: function( selectedDate ) {
|
||||
$( "#to" ).datepicker( "option", "minDate", selectedDate );
|
||||
}
|
||||
});
|
||||
$( "#to" ).datepicker({
|
||||
defaultDate: "+1w",
|
||||
changeMonth: true,
|
||||
numberOfMonths: 3,
|
||||
onClose: function( selectedDate ) {
|
||||
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<label for="from">From</label>
|
||||
<input type="text" id="from" name="from"/>
|
||||
<label for="to">to</label>
|
||||
<input type="text" id="to" name="to"/>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Select the date range to search for.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
26
include/jQuery/jquery-ui/demos/datepicker/default.html
Executable file
26
include/jQuery/jquery-ui/demos/datepicker/default.html
Executable file
@@ -0,0 +1,26 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#datepicker" ).datepicker();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
29
include/jQuery/jquery-ui/demos/datepicker/dropdown-month-year.html
Executable file
29
include/jQuery/jquery-ui/demos/datepicker/dropdown-month-year.html
Executable file
@@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Display month & year menus</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#datepicker" ).datepicker({
|
||||
changeMonth: true,
|
||||
changeYear: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
30
include/jQuery/jquery-ui/demos/datepicker/icon-trigger.html
Executable file
30
include/jQuery/jquery-ui/demos/datepicker/icon-trigger.html
Executable file
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Icon trigger</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#datepicker" ).datepicker({
|
||||
showOn: "button",
|
||||
buttonImage: "images/calendar.gif",
|
||||
buttonImageOnly: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Click the icon next to the input field to show the datepicker. Set the datepicker to open on focus (default behavior), on icon click, or both.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
27
include/jQuery/jquery-ui/demos/datepicker/index.html
Executable file
27
include/jQuery/jquery-ui/demos/datepicker/index.html
Executable file
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="date-formats.html">Format date</a></li>
|
||||
<li><a href="min-max.html">Restrict date range</a></li>
|
||||
<li><a href="localization.html">Localize calendar</a></li>
|
||||
<li><a href="alt-field.html">Populate alternate field</a></li>
|
||||
<li><a href="inline.html">Display inline</a></li>
|
||||
<li><a href="buttonbar.html">Display button bar</a></li>
|
||||
<li><a href="dropdown-month-year.html">Display month & year menus</a></li>
|
||||
<li><a href="other-months.html">Dates in other months</a></li>
|
||||
<li><a href="show-week.html">Show week of the year</a></li>
|
||||
<li><a href="multiple-calendars.html">Display multiple months</a></li>
|
||||
<li><a href="icon-trigger.html">Icon trigger</a></li>
|
||||
<li><a href="animation.html">Animations</a></li>
|
||||
<li><a href="date-range.html">Date Range</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
26
include/jQuery/jquery-ui/demos/datepicker/inline.html
Executable file
26
include/jQuery/jquery-ui/demos/datepicker/inline.html
Executable file
@@ -0,0 +1,26 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Display inline</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#datepicker" ).datepicker();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Date: <div id="datepicker"></div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
41
include/jQuery/jquery-ui/demos/datepicker/localization.html
Executable file
41
include/jQuery/jquery-ui/demos/datepicker/localization.html
Executable file
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Localize calendar</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<script src="jquery.ui.datepicker-ar.js"></script>
|
||||
<script src="jquery.ui.datepicker-fr.js"></script>
|
||||
<script src="jquery.ui.datepicker-he.js"></script>
|
||||
<script src="jquery.ui.datepicker-zh-TW.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
|
||||
$( "#locale" ).change(function() {
|
||||
$( "#datepicker" ).datepicker( "option",
|
||||
$.datepicker.regional[ $( this ).val() ] );
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"/>
|
||||
<select id="locale">
|
||||
<option value="ar">Arabic (‫(العربية</option>
|
||||
<option value="zh-TW">Chinese Traditional (繁體中文)</option>
|
||||
<option value="">English</option>
|
||||
<option value="fr" selected="selected">French (Français)</option>
|
||||
<option value="he">Hebrew (‫(עברית</option>
|
||||
</select></p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Localize the datepicker calendar language and format (English / Western formatting is the default). The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
26
include/jQuery/jquery-ui/demos/datepicker/min-max.html
Executable file
26
include/jQuery/jquery-ui/demos/datepicker/min-max.html
Executable file
@@ -0,0 +1,26 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Restrict date range</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
29
include/jQuery/jquery-ui/demos/datepicker/multiple-calendars.html
Executable file
29
include/jQuery/jquery-ui/demos/datepicker/multiple-calendars.html
Executable file
@@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Display multiple months</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#datepicker" ).datepicker({
|
||||
numberOfMonths: 3,
|
||||
showButtonPanel: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
30
include/jQuery/jquery-ui/demos/datepicker/other-months.html
Executable file
30
include/jQuery/jquery-ui/demos/datepicker/other-months.html
Executable file
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Dates in other months</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#datepicker" ).datepicker({
|
||||
showOtherMonths: true,
|
||||
selectOtherMonths: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The datepicker can show dates that come from other than the main month
|
||||
being displayed. These other dates can also be made selectable.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
32
include/jQuery/jquery-ui/demos/datepicker/show-week.html
Executable file
32
include/jQuery/jquery-ui/demos/datepicker/show-week.html
Executable file
@@ -0,0 +1,32 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Show week of the year</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#datepicker" ).datepicker({
|
||||
showWeek: true,
|
||||
firstDay: 1
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The datepicker can show the week of the year. The default calculation follows
|
||||
the ISO 8601 definition: the week starts on Monday, the first week of the year
|
||||
contains the first Thursday of the year. This means that some days from one
|
||||
year may be placed into weeks 'belonging' to another year.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
52
include/jQuery/jquery-ui/demos/dialog/animated.html
Executable file
52
include/jQuery/jquery-ui/demos/dialog/animated.html
Executable file
@@ -0,0 +1,52 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog - Animation</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.dialog.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-blind.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-explode.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#dialog" ).dialog({
|
||||
autoOpen: false,
|
||||
show: {
|
||||
effect: "blind",
|
||||
duration: 1000
|
||||
},
|
||||
hide: {
|
||||
effect: "explode",
|
||||
duration: 1000
|
||||
}
|
||||
});
|
||||
|
||||
$( "#opener" ).click(function() {
|
||||
$( "#dialog" ).dialog( "open" );
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="dialog" title="Basic dialog">
|
||||
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
|
||||
</div>
|
||||
|
||||
<button id="opener">Open Dialog</button>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Dialogs may be animated by specifying an effect for the show and/or hide properties. You must include the individual effects file for any effects you would like to use.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
33
include/jQuery/jquery-ui/demos/dialog/default.html
Executable file
33
include/jQuery/jquery-ui/demos/dialog/default.html
Executable file
@@ -0,0 +1,33 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.dialog.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#dialog" ).dialog();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="dialog" title="Basic dialog">
|
||||
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
19
include/jQuery/jquery-ui/demos/dialog/index.html
Executable file
19
include/jQuery/jquery-ui/demos/dialog/index.html
Executable file
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="animated.html">Animated dialog</a></li>
|
||||
<li><a href="modal.html">Modal dialog</a></li>
|
||||
<li><a href="modal-message.html">Modal message</a></li>
|
||||
<li><a href="modal-confirmation.html">Modal confirmation</a></li>
|
||||
<li><a href="modal-form.html">Modal form</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
46
include/jQuery/jquery-ui/demos/dialog/modal-confirmation.html
Executable file
46
include/jQuery/jquery-ui/demos/dialog/modal-confirmation.html
Executable file
@@ -0,0 +1,46 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog - Modal confirmation</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.dialog.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#dialog-confirm" ).dialog({
|
||||
resizable: false,
|
||||
height:140,
|
||||
modal: true,
|
||||
buttons: {
|
||||
"Delete all items": function() {
|
||||
$( this ).dialog( "close" );
|
||||
},
|
||||
Cancel: function() {
|
||||
$( this ).dialog( "close" );
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="dialog-confirm" title="Empty the recycle bin?">
|
||||
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
|
||||
</div>
|
||||
|
||||
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Confirm an action that may be destructive or important. Set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
157
include/jQuery/jquery-ui/demos/dialog/modal-form.html
Executable file
157
include/jQuery/jquery-ui/demos/dialog/modal-form.html
Executable file
@@ -0,0 +1,157 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog - Modal form</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.dialog.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
body { font-size: 62.5%; }
|
||||
label, input { display:block; }
|
||||
input.text { margin-bottom:12px; width:95%; padding: .4em; }
|
||||
fieldset { padding:0; border:0; margin-top:25px; }
|
||||
h1 { font-size: 1.2em; margin: .6em 0; }
|
||||
div#users-contain { width: 350px; margin: 20px 0; }
|
||||
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
|
||||
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
|
||||
.ui-dialog .ui-state-error { padding: .3em; }
|
||||
.validateTips { border: 1px solid transparent; padding: 0.3em; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
var name = $( "#name" ),
|
||||
email = $( "#email" ),
|
||||
password = $( "#password" ),
|
||||
allFields = $( [] ).add( name ).add( email ).add( password ),
|
||||
tips = $( ".validateTips" );
|
||||
|
||||
function updateTips( t ) {
|
||||
tips
|
||||
.text( t )
|
||||
.addClass( "ui-state-highlight" );
|
||||
setTimeout(function() {
|
||||
tips.removeClass( "ui-state-highlight", 1500 );
|
||||
}, 500 );
|
||||
}
|
||||
|
||||
function checkLength( o, n, min, max ) {
|
||||
if ( o.val().length > max || o.val().length < min ) {
|
||||
o.addClass( "ui-state-error" );
|
||||
updateTips( "Length of " + n + " must be between " +
|
||||
min + " and " + max + "." );
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function checkRegexp( o, regexp, n ) {
|
||||
if ( !( regexp.test( o.val() ) ) ) {
|
||||
o.addClass( "ui-state-error" );
|
||||
updateTips( n );
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
$( "#dialog-form" ).dialog({
|
||||
autoOpen: false,
|
||||
height: 300,
|
||||
width: 350,
|
||||
modal: true,
|
||||
buttons: {
|
||||
"Create an account": function() {
|
||||
var bValid = true;
|
||||
allFields.removeClass( "ui-state-error" );
|
||||
|
||||
bValid = bValid && checkLength( name, "username", 3, 16 );
|
||||
bValid = bValid && checkLength( email, "email", 6, 80 );
|
||||
bValid = bValid && checkLength( password, "password", 5, 16 );
|
||||
|
||||
bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
|
||||
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
|
||||
bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
|
||||
bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
|
||||
|
||||
if ( bValid ) {
|
||||
$( "#users tbody" ).append( "<tr>" +
|
||||
"<td>" + name.val() + "</td>" +
|
||||
"<td>" + email.val() + "</td>" +
|
||||
"<td>" + password.val() + "</td>" +
|
||||
"</tr>" );
|
||||
$( this ).dialog( "close" );
|
||||
}
|
||||
},
|
||||
Cancel: function() {
|
||||
$( this ).dialog( "close" );
|
||||
}
|
||||
},
|
||||
close: function() {
|
||||
allFields.val( "" ).removeClass( "ui-state-error" );
|
||||
}
|
||||
});
|
||||
|
||||
$( "#create-user" )
|
||||
.button()
|
||||
.click(function() {
|
||||
$( "#dialog-form" ).dialog( "open" );
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="dialog-form" title="Create new user">
|
||||
<p class="validateTips">All form fields are required.</p>
|
||||
|
||||
<form>
|
||||
<fieldset>
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
|
||||
<label for="email">Email</label>
|
||||
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
|
||||
<label for="password">Password</label>
|
||||
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="users-contain" class="ui-widget">
|
||||
<h1>Existing Users:</h1>
|
||||
<table id="users" class="ui-widget ui-widget-content">
|
||||
<thead>
|
||||
<tr class="ui-widget-header ">
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Password</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td>john.doe@example.com</td>
|
||||
<td>johndoe1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button id="create-user">Create new user</button>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
49
include/jQuery/jquery-ui/demos/dialog/modal-message.html
Executable file
49
include/jQuery/jquery-ui/demos/dialog/modal-message.html
Executable file
@@ -0,0 +1,49 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog - Modal message</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.dialog.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#dialog-message" ).dialog({
|
||||
modal: true,
|
||||
buttons: {
|
||||
Ok: function() {
|
||||
$( this ).dialog( "close" );
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="dialog-message" title="Download complete">
|
||||
<p>
|
||||
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
|
||||
Your files have downloaded successfully into the My Downloads folder.
|
||||
</p>
|
||||
<p>
|
||||
Currently using <b>36% of your storage space</b>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
38
include/jQuery/jquery-ui/demos/dialog/modal.html
Executable file
38
include/jQuery/jquery-ui/demos/dialog/modal.html
Executable file
@@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog - Basic modal</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.dialog.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#dialog-modal" ).dialog({
|
||||
height: 140,
|
||||
modal: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="dialog-modal" title="Basic modal dialog">
|
||||
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
|
||||
</div>
|
||||
|
||||
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
58
include/jQuery/jquery-ui/demos/draggable/constrain-movement.html
Executable file
58
include/jQuery/jquery-ui/demos/draggable/constrain-movement.html
Executable file
@@ -0,0 +1,58 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Constrain movement</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
||||
#draggable, #draggable2 { margin-bottom:20px; }
|
||||
#draggable { cursor: n-resize; }
|
||||
#draggable2 { cursor: e-resize; }
|
||||
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
|
||||
h3 { clear: left; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ axis: "y" });
|
||||
$( "#draggable2" ).draggable({ axis: "x" });
|
||||
|
||||
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
|
||||
$( "#draggable5" ).draggable({ containment: "parent" });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>Constrain movement along an axis:</h3>
|
||||
|
||||
<div id="draggable" class="draggable ui-widget-content">
|
||||
<p>I can be dragged only vertically</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="draggable ui-widget-content">
|
||||
<p>I can be dragged only horizontally</p>
|
||||
</div>
|
||||
|
||||
<h3>Or to within another DOM element:</h3>
|
||||
<div id="containment-wrapper">
|
||||
<div id="draggable3" class="draggable ui-widget-content">
|
||||
<p>I'm contained within the box</p>
|
||||
</div>
|
||||
|
||||
<div class="draggable ui-widget-content">
|
||||
<p id="draggable5" class="ui-widget-header">I'm contained within my parent</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable's path to the x- or y-axis, or use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
42
include/jQuery/jquery-ui/demos/draggable/cursor-style.html
Executable file
42
include/jQuery/jquery-ui/demos/draggable/cursor-style.html
Executable file
@@ -0,0 +1,42 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Cursor style</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
|
||||
$( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });
|
||||
$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>I will always stick to the center (relative to the mouse)</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>My cursor is at left -5 and top -5</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable3" class="ui-widget-content">
|
||||
<p>My cursor position is only controlled for the 'bottom' value</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left). Customize the cursor's appearance by supplying the <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
32
include/jQuery/jquery-ui/demos/draggable/default.html
Executable file
32
include/jQuery/jquery-ui/demos/draggable/default.html
Executable file
@@ -0,0 +1,32 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable { width: 150px; height: 150px; padding: 0.5em; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me around</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
38
include/jQuery/jquery-ui/demos/draggable/delay-start.html
Executable file
38
include/jQuery/jquery-ui/demos/draggable/delay-start.html
Executable file
@@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Delay start</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ distance: 20 });
|
||||
$( "#draggable2" ).draggable({ delay: 1000 });
|
||||
$( ".ui-draggable" ).disableSelection();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Only if you drag me by 20 pixels, the dragging will start</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option. </p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
70
include/jQuery/jquery-ui/demos/draggable/events.html
Executable file
70
include/jQuery/jquery-ui/demos/draggable/events.html
Executable file
@@ -0,0 +1,70 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Events</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable { width: 16em; padding: 0 1em; }
|
||||
#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
|
||||
#draggable ul li span.ui-icon { float: left; }
|
||||
#draggable ul li span.count { font-weight: bold; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
var $start_counter = $( "#event-start" ),
|
||||
$drag_counter = $( "#event-drag" ),
|
||||
$stop_counter = $( "#event-stop" ),
|
||||
counts = [ 0, 0, 0 ];
|
||||
|
||||
$( "#draggable" ).draggable({
|
||||
start: function() {
|
||||
counts[ 0 ]++;
|
||||
updateCounterStatus( $start_counter, counts[ 0 ] );
|
||||
},
|
||||
drag: function() {
|
||||
counts[ 1 ]++;
|
||||
updateCounterStatus( $drag_counter, counts[ 1 ] );
|
||||
},
|
||||
stop: function() {
|
||||
counts[ 2 ]++;
|
||||
updateCounterStatus( $stop_counter, counts[ 2 ] );
|
||||
}
|
||||
});
|
||||
|
||||
function updateCounterStatus( $event_counter, new_count ) {
|
||||
// first update the status visually...
|
||||
if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
|
||||
$event_counter.addClass( "ui-state-hover" )
|
||||
.siblings().removeClass( "ui-state-hover" );
|
||||
}
|
||||
// ...then update the numbers
|
||||
$( "span.count", $event_counter ).text( new_count );
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget ui-widget-content">
|
||||
|
||||
<p>Drag me to trigger the chain of events.</p>
|
||||
|
||||
<ul class="ui-helper-reset">
|
||||
<li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
|
||||
<li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
|
||||
<li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
41
include/jQuery/jquery-ui/demos/draggable/handle.html
Executable file
41
include/jQuery/jquery-ui/demos/draggable/handle.html
Executable file
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Handles</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
||||
#draggable p { cursor: move; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ handle: "p" });
|
||||
$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
|
||||
$( "div, p" ).disableSelection();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p class="ui-widget-header">I can be dragged only by this handle</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>You can drag me around…</p>
|
||||
<p class="ui-widget-header">…but you can't drag me by this handle.</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Allow dragging only when the cursor is over a specific part of the draggable. Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p>
|
||||
<p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
24
include/jQuery/jquery-ui/demos/draggable/index.html
Executable file
24
include/jQuery/jquery-ui/demos/draggable/index.html
Executable file
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="events.html">Events</a></li>
|
||||
<li><a href="constrain-movement.html">Constrain movement</a></li>
|
||||
<li><a href="delay-start.html">Delay start</a></li>
|
||||
<li><a href="snap-to.html">Snap to element or grid</a></li>
|
||||
<li><a href="scroll.html">Auto-scroll</a></li>
|
||||
<li><a href="revert.html">Revert position</a></li>
|
||||
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
||||
<li><a href="handle.html">Drag handle</a></li>
|
||||
<li><a href="cursor-style.html">Cursor style</a></li>
|
||||
<li><a href="sortable.html">Draggable + Sortable</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
37
include/jQuery/jquery-ui/demos/draggable/revert.html
Executable file
37
include/jQuery/jquery-ui/demos/draggable/revert.html
Executable file
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Revert position</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ revert: true });
|
||||
$( "#draggable2" ).draggable({ revert: true, helper: "clone" });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Revert the original</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>Revert the helper</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
44
include/jQuery/jquery-ui/demos/draggable/scroll.html
Executable file
44
include/jQuery/jquery-ui/demos/draggable/scroll.html
Executable file
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Auto-scroll</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ scroll: true });
|
||||
$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
|
||||
$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Scroll set to true, default settings</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>scrollSensitivity set to 100</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable3" class="ui-widget-content">
|
||||
<p>scrollSpeed set to 100</p>
|
||||
</div>
|
||||
|
||||
<div style='height: 5000px; width: 1px;'></div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
61
include/jQuery/jquery-ui/demos/draggable/snap-to.html
Executable file
61
include/jQuery/jquery-ui/demos/draggable/snap-to.html
Executable file
@@ -0,0 +1,61 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Snap to element or grid</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
|
||||
.ui-widget-header p, .ui-widget-content p { margin: 0; }
|
||||
#snaptarget { height: 140px; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ snap: true });
|
||||
$( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
|
||||
$( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
|
||||
$( "#draggable4" ).draggable({ grid: [ 20, 20 ] });
|
||||
$( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="snaptarget" class="ui-widget-header">
|
||||
<p>I'm a snap target</p>
|
||||
</div>
|
||||
|
||||
<br style="clear:both" />
|
||||
|
||||
<div id="draggable" class="draggable ui-widget-content">
|
||||
<p>Default (snap: true), snaps to all other draggable elements</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="draggable ui-widget-content">
|
||||
<p>I only snap to the big box</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable3" class="draggable ui-widget-content">
|
||||
<p>I only snap to the outer edges of the big box</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable4" class="draggable ui-widget-content">
|
||||
<p>I snap to a 20 x 20 grid</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable5" class="draggable ui-widget-content">
|
||||
<p>I snap to a 80 x 80 grid</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Snap the draggable to the inner or outer boundaries of a DOM element. Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p>
|
||||
<p>Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
50
include/jQuery/jquery-ui/demos/draggable/sortable.html
Executable file
50
include/jQuery/jquery-ui/demos/draggable/sortable.html
Executable file
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable + Sortable</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.sortable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
|
||||
li { margin: 5px; padding: 5px; width: 150px; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#sortable" ).sortable({
|
||||
revert: true
|
||||
});
|
||||
$( "#draggable" ).draggable({
|
||||
connectToSortable: "#sortable",
|
||||
helper: "clone",
|
||||
revert: "invalid"
|
||||
});
|
||||
$( "ul, li" ).disableSelection();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li id="draggable" class="ui-state-highlight">Drag me down</li>
|
||||
</ul>
|
||||
|
||||
<ul id="sortable">
|
||||
<li class="ui-state-default">Item 1</li>
|
||||
<li class="ui-state-default">Item 2</li>
|
||||
<li class="ui-state-default">Item 3</li>
|
||||
<li class="ui-state-default">Item 4</li>
|
||||
<li class="ui-state-default">Item 5</li>
|
||||
</ul>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Draggables are built to interact seamlessly with <a href="http://jqueryui.com/sortable">sortables</a>.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
70
include/jQuery/jquery-ui/demos/draggable/visual-feedback.html
Executable file
70
include/jQuery/jquery-ui/demos/draggable/visual-feedback.html
Executable file
@@ -0,0 +1,70 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Visual feedback</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
||||
#draggable, #draggable2, #draggable3 { margin-bottom:20px; }
|
||||
#set { clear:both; float:left; width: 368px; height: 120px; }
|
||||
p { clear:both; margin:0; padding:1em 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ helper: "original" });
|
||||
$( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" });
|
||||
$( "#draggable3" ).draggable({
|
||||
cursor: "move",
|
||||
cursorAt: { top: -12, left: -20 },
|
||||
helper: function( event ) {
|
||||
return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
|
||||
}
|
||||
});
|
||||
$( "#set div" ).draggable({ stack: "#set div" });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3 class="docs">With helpers:</h3>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Original</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>Semi-transparent clone</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable3" class="ui-widget-content">
|
||||
<p>Custom helper (in combination with cursorAt)</p>
|
||||
</div>
|
||||
|
||||
<h3 class="docs">Stacked:</h3>
|
||||
<div id="set">
|
||||
<div class="ui-widget-content">
|
||||
<p>We are draggables..</p>
|
||||
</div>
|
||||
|
||||
<div class="ui-widget-content">
|
||||
<p>..whose z-indexes are controlled automatically..</p>
|
||||
</div>
|
||||
|
||||
<div class="ui-widget-content">
|
||||
<p>..with the stack option.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the <code>opacity</code> option.</p>
|
||||
<p>To clarify which draggable is in play, bring the draggable in motion to front. Use the <code>zIndex</code> option to set a higher z-index for the helper, if in play, or use the <code>stack</code> option to ensure that the last item dragged will appear on top of others in the same group on drag stop.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
53
include/jQuery/jquery-ui/demos/droppable/accepted-elements.html
Executable file
53
include/jQuery/jquery-ui/demos/droppable/accepted-elements.html
Executable file
@@ -0,0 +1,53 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Accept</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
#draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable, #draggable-nonvalid" ).draggable();
|
||||
$( "#droppable" ).droppable({
|
||||
accept: "#draggable",
|
||||
activeClass: "ui-state-hover",
|
||||
hoverClass: "ui-state-active",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable-nonvalid" class="ui-widget-content">
|
||||
<p>I'm draggable but can't be dropped</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>accept: '#draggable'</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
46
include/jQuery/jquery-ui/demos/droppable/default.html
Executable file
46
include/jQuery/jquery-ui/demos/droppable/default.html
Executable file
@@ -0,0 +1,46 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable();
|
||||
$( "#droppable" ).droppable({
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
20
include/jQuery/jquery-ui/demos/droppable/index.html
Executable file
20
include/jQuery/jquery-ui/demos/droppable/index.html
Executable file
@@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="accepted-elements.html">Accepted elements</a></li>
|
||||
<li><a href="propagation.html">Prevent propagation</a></li>
|
||||
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
||||
<li><a href="revert.html">Revert draggable position</a></li>
|
||||
<li><a href="shopping-cart.html">Shopping Cart</a></li>
|
||||
<li><a href="photo-manager.html">Simple photo manager</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
182
include/jQuery/jquery-ui/demos/droppable/photo-manager.html
Executable file
182
include/jQuery/jquery-ui/demos/droppable/photo-manager.html
Executable file
@@ -0,0 +1,182 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Simple photo manager</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<script src="../../ui/jquery.ui.dialog.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#gallery { float: left; width: 65%; min-height: 12em; }
|
||||
.gallery.custom-state-active { background: #eee; }
|
||||
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
|
||||
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
|
||||
.gallery li a { float: right; }
|
||||
.gallery li a.ui-icon-zoomin { float: left; }
|
||||
.gallery li img { width: 100%; cursor: move; }
|
||||
|
||||
#trash { float: right; width: 32%; min-height: 18em; padding: 1%; }
|
||||
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
|
||||
#trash h4 .ui-icon { float: left; }
|
||||
#trash .gallery h5 { display: none; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
// there's the gallery and the trash
|
||||
var $gallery = $( "#gallery" ),
|
||||
$trash = $( "#trash" );
|
||||
|
||||
// let the gallery items be draggable
|
||||
$( "li", $gallery ).draggable({
|
||||
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
|
||||
revert: "invalid", // when not dropped, the item will revert back to its initial position
|
||||
containment: "document",
|
||||
helper: "clone",
|
||||
cursor: "move"
|
||||
});
|
||||
|
||||
// let the trash be droppable, accepting the gallery items
|
||||
$trash.droppable({
|
||||
accept: "#gallery > li",
|
||||
activeClass: "ui-state-highlight",
|
||||
drop: function( event, ui ) {
|
||||
deleteImage( ui.draggable );
|
||||
}
|
||||
});
|
||||
|
||||
// let the gallery be droppable as well, accepting items from the trash
|
||||
$gallery.droppable({
|
||||
accept: "#trash li",
|
||||
activeClass: "custom-state-active",
|
||||
drop: function( event, ui ) {
|
||||
recycleImage( ui.draggable );
|
||||
}
|
||||
});
|
||||
|
||||
// image deletion function
|
||||
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
|
||||
function deleteImage( $item ) {
|
||||
$item.fadeOut(function() {
|
||||
var $list = $( "ul", $trash ).length ?
|
||||
$( "ul", $trash ) :
|
||||
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
|
||||
|
||||
$item.find( "a.ui-icon-trash" ).remove();
|
||||
$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
|
||||
$item
|
||||
.animate({ width: "48px" })
|
||||
.find( "img" )
|
||||
.animate({ height: "36px" });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// image recycle function
|
||||
var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
|
||||
function recycleImage( $item ) {
|
||||
$item.fadeOut(function() {
|
||||
$item
|
||||
.find( "a.ui-icon-refresh" )
|
||||
.remove()
|
||||
.end()
|
||||
.css( "width", "96px")
|
||||
.append( trash_icon )
|
||||
.find( "img" )
|
||||
.css( "height", "72px" )
|
||||
.end()
|
||||
.appendTo( $gallery )
|
||||
.fadeIn();
|
||||
});
|
||||
}
|
||||
|
||||
// image preview function, demonstrating the ui.dialog used as a modal window
|
||||
function viewLargerImage( $link ) {
|
||||
var src = $link.attr( "href" ),
|
||||
title = $link.siblings( "img" ).attr( "alt" ),
|
||||
$modal = $( "img[src$='" + src + "']" );
|
||||
|
||||
if ( $modal.length ) {
|
||||
$modal.dialog( "open" );
|
||||
} else {
|
||||
var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
|
||||
.attr( "src", src ).appendTo( "body" );
|
||||
setTimeout(function() {
|
||||
img.dialog({
|
||||
title: title,
|
||||
width: 400,
|
||||
modal: true
|
||||
});
|
||||
}, 1 );
|
||||
}
|
||||
}
|
||||
|
||||
// resolve the icons behavior with event delegation
|
||||
$( "ul.gallery > li" ).click(function( event ) {
|
||||
var $item = $( this ),
|
||||
$target = $( event.target );
|
||||
|
||||
if ( $target.is( "a.ui-icon-trash" ) ) {
|
||||
deleteImage( $item );
|
||||
} else if ( $target.is( "a.ui-icon-zoomin" ) ) {
|
||||
viewLargerImage( $target );
|
||||
} else if ( $target.is( "a.ui-icon-refresh" ) ) {
|
||||
recycleImage( $item );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-widget ui-helper-clearfix">
|
||||
|
||||
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
|
||||
<li class="ui-widget-content ui-corner-tr">
|
||||
<h5 class="ui-widget-header">High Tatras</h5>
|
||||
<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
|
||||
<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
|
||||
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
|
||||
</li>
|
||||
<li class="ui-widget-content ui-corner-tr">
|
||||
<h5 class="ui-widget-header">High Tatras 2</h5>
|
||||
<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
|
||||
<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
|
||||
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
|
||||
</li>
|
||||
<li class="ui-widget-content ui-corner-tr">
|
||||
<h5 class="ui-widget-header">High Tatras 3</h5>
|
||||
<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
|
||||
<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
|
||||
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
|
||||
</li>
|
||||
<li class="ui-widget-content ui-corner-tr">
|
||||
<h5 class="ui-widget-header">High Tatras 4</h5>
|
||||
<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
|
||||
<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
|
||||
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="trash" class="ui-widget-content ui-state-default">
|
||||
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
|
||||
<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
|
||||
<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
73
include/jQuery/jquery-ui/demos/droppable/propagation.html
Executable file
73
include/jQuery/jquery-ui/demos/droppable/propagation.html
Executable file
@@ -0,0 +1,73 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Prevent propagation</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
#droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
|
||||
#droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable();
|
||||
|
||||
$( "#droppable, #droppable-inner" ).droppable({
|
||||
activeClass: "ui-state-hover",
|
||||
hoverClass: "ui-state-active",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "> p" )
|
||||
.html( "Dropped!" );
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
$( "#droppable2, #droppable2-inner" ).droppable({
|
||||
greedy: true,
|
||||
activeClass: "ui-state-hover",
|
||||
hoverClass: "ui-state-active",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "> p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Outer droppable</p>
|
||||
<div id="droppable-inner" class="ui-widget-header">
|
||||
<p>Inner droppable (not greedy)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="droppable2" class="ui-widget-header">
|
||||
<p>Outer droppable</p>
|
||||
<div id="droppable2-inner" class="ui-widget-header">
|
||||
<p>Inner droppable (greedy)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
54
include/jQuery/jquery-ui/demos/droppable/revert.html
Executable file
54
include/jQuery/jquery-ui/demos/droppable/revert.html
Executable file
@@ -0,0 +1,54 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Revert draggable position</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ revert: "valid" });
|
||||
$( "#draggable2" ).draggable({ revert: "invalid" });
|
||||
|
||||
$( "#droppable" ).droppable({
|
||||
activeClass: "ui-state-default",
|
||||
hoverClass: "ui-state-hover",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>I revert when I'm dropped</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>I revert when I'm not dropped</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Drop me here</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option set on the draggable.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
94
include/jQuery/jquery-ui/demos/droppable/shopping-cart.html
Executable file
94
include/jQuery/jquery-ui/demos/droppable/shopping-cart.html
Executable file
@@ -0,0 +1,94 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Shopping Cart Demo</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<script src="../../ui/jquery.ui.sortable.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
h1 { padding: .2em; margin: 0; }
|
||||
#products { float:left; width: 500px; margin-right: 2em; }
|
||||
#cart { width: 200px; float: left; margin-top: 1em; }
|
||||
/* style the list to maximize the droppable hitarea */
|
||||
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#catalog" ).accordion();
|
||||
$( "#catalog li" ).draggable({
|
||||
appendTo: "body",
|
||||
helper: "clone"
|
||||
});
|
||||
$( "#cart ol" ).droppable({
|
||||
activeClass: "ui-state-default",
|
||||
hoverClass: "ui-state-hover",
|
||||
accept: ":not(.ui-sortable-helper)",
|
||||
drop: function( event, ui ) {
|
||||
$( this ).find( ".placeholder" ).remove();
|
||||
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
|
||||
}
|
||||
}).sortable({
|
||||
items: "li:not(.placeholder)",
|
||||
sort: function() {
|
||||
// gets added unintentionally by droppable interacting with sortable
|
||||
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
|
||||
$( this ).removeClass( "ui-state-default" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="products">
|
||||
<h1 class="ui-widget-header">Products</h1>
|
||||
<div id="catalog">
|
||||
<h2><a href="#">T-Shirts</a></h2>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Lolcat Shirt</li>
|
||||
<li>Cheezeburger Shirt</li>
|
||||
<li>Buckit Shirt</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h2><a href="#">Bags</a></h2>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Zebra Striped</li>
|
||||
<li>Black Leather</li>
|
||||
<li>Alligator Leather</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h2><a href="#">Gadgets</a></h2>
|
||||
<div>
|
||||
<ul>
|
||||
<li>iPhone</li>
|
||||
<li>iPod</li>
|
||||
<li>iPad</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cart">
|
||||
<h1 class="ui-widget-header">Shopping Cart</h1>
|
||||
<div class="ui-widget-content">
|
||||
<ol>
|
||||
<li class="placeholder">Add your items here</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Demonstrate how to use an accordion to structure products into a catalog and make use of drag and drop for adding them to a shopping cart, where they are sortable.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
72
include/jQuery/jquery-ui/demos/droppable/visual-feedback.html
Executable file
72
include/jQuery/jquery-ui/demos/droppable/visual-feedback.html
Executable file
@@ -0,0 +1,72 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Visual feedback</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
|
||||
h3 { clear: left; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable();
|
||||
$( "#droppable" ).droppable({
|
||||
hoverClass: "ui-state-hover",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
|
||||
$( "#draggable2" ).draggable();
|
||||
$( "#droppable2" ).droppable({
|
||||
accept: "#draggable2",
|
||||
activeClass: "ui-state-default",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>Feedback on hover:</h3>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
<h3>Feedback on activating draggable:</h3>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable2" class="ui-widget-header">
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
102
include/jQuery/jquery-ui/demos/effect/default.html
Executable file
102
include/jQuery/jquery-ui/demos/effect/default.html
Executable file
@@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects - Effect demo</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-blind.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-bounce.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-clip.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-drop.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-explode.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-fade.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-fold.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-highlight.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-pulsate.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-scale.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-shake.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-slide.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-transfer.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.toggler { width: 500px; height: 200px; position: relative; }
|
||||
#button { padding: .5em 1em; text-decoration: none; }
|
||||
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
|
||||
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
|
||||
.ui-effects-transfer { border: 2px dotted gray; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
// run the currently selected effect
|
||||
function runEffect() {
|
||||
// get effect type from
|
||||
var selectedEffect = $( "#effectTypes" ).val();
|
||||
|
||||
// most effect types need no options passed by default
|
||||
var options = {};
|
||||
// some effects have required parameters
|
||||
if ( selectedEffect === "scale" ) {
|
||||
options = { percent: 0 };
|
||||
} else if ( selectedEffect === "transfer" ) {
|
||||
options = { to: "#button", className: "ui-effects-transfer" };
|
||||
} else if ( selectedEffect === "size" ) {
|
||||
options = { to: { width: 200, height: 60 } };
|
||||
}
|
||||
|
||||
// run the effect
|
||||
$( "#effect" ).effect( selectedEffect, options, 500, callback );
|
||||
};
|
||||
|
||||
// callback function to bring a hidden box back
|
||||
function callback() {
|
||||
setTimeout(function() {
|
||||
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
|
||||
}, 1000 );
|
||||
};
|
||||
|
||||
// set effect from select menu value
|
||||
$( "#button" ).click(function() {
|
||||
runEffect();
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="toggler">
|
||||
<div id="effect" class="ui-widget-content ui-corner-all">
|
||||
<h3 class="ui-widget-header ui-corner-all">Effect</h3>
|
||||
<p>
|
||||
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<select name="effects" id="effectTypes">
|
||||
<option value="blind">Blind</option>
|
||||
<option value="bounce">Bounce</option>
|
||||
<option value="clip">Clip</option>
|
||||
<option value="drop">Drop</option>
|
||||
<option value="explode">Explode</option>
|
||||
<option value="fade">Fade</option>
|
||||
<option value="fold">Fold</option>
|
||||
<option value="highlight">Highlight</option>
|
||||
<option value="puff">Puff</option>
|
||||
<option value="pulsate">Pulsate</option>
|
||||
<option value="scale">Scale</option>
|
||||
<option value="shake">Shake</option>
|
||||
<option value="size">Size</option>
|
||||
<option value="slide">Slide</option>
|
||||
<option value="transfer">Transfer</option>
|
||||
</select>
|
||||
|
||||
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Click the button above to show the effect.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user