| Ratings | | Unique User Downloads | | Download Rankings |
| Not yet rated by the users | | Total: 84 | | All time: 10,053 This week: 73 |
|
| Description | | Author |
This package can create page fields with values that users can edit.
It can create a structure of fields of several different types displayed on a Web page and make them editable, so users can click on them and change their values.
Applications can generate HTML to render with JavaScript code to make the fields appear and react when the users click on the editable fields and make changes.
The values changes on the fields can be submitted to the server so that the PHP server-side script saves those changes. | |
 |
|
Innovation award
Nominee: 2x |
|
Example
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="../vendor/mesour/components/public/DateTimePicker/bootstrap-datetimepicker.min.css">
<?php
define('SRC_DIR', __DIR__ . '/../src/');
require_once __DIR__ . '/../vendor/autoload.php';
\Tracy\Debugger::enable(\Tracy\Debugger::DEVELOPMENT, __DIR__ . '/log');
\Tracy\Debugger::$strictMode = true;
$loader = new Nette\Loaders\RobotLoader;
$loader->addDirectory(SRC_DIR);
$loader->setCacheStorage(new Nette\Caching\Storages\FileStorage(__DIR__ . '/tmp'));
$loader->register();
?>
<hr>
<div class="container">
<h2>Without settings</h2>
<?php
$application = new \Mesour\UI\Application('mesourApp');
$application->setRequest($_REQUEST);
$application->run();
$editable = new \Mesour\UI\Editable('editableTest', $application);
$structure = new \Mesour\Editable\Structures\DataElementStructure();
$structure->addText('name');
$structure->addNumber('amount')
->setDecimalPoint(',')
->setThousandSeparator('.')
->setDecimals(2)
->setUnit('EUR');
$structure->addDate('last_login')
->setFormat('Y-m-d H:i:s');
$structure->addEnum('role')
->addValue('admin', 'Admin')
->addValue('moderator', 'Moderator');
$structure->addBool('has_pro');
$editable->setDataStructure($structure);
echo $editable->render();
?>
<div class="jumbotron">
<p data-editable="name">-</p>
<p data-editable="amount">100 EUR</p>
<p data-editable="last_login">2016-01-01 20:00:00</p>
<p data-editable="role" data-value="admin">Admin</p>
<p data-editable="has_pro" data-value="1">Yes</p>
</div>
</div>
<hr>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script src="../vendor/mesour/components/public/DateTimePicker/moment.min.js"></script>
<script src="../vendor/mesour/components/public/DateTimePicker/bootstrap-datetimepicker.min.js"></script>
<script src="../vendor/mesour/components/public/mesour.components.min.js"></script>
<script src="../vendor/mesour/modal/public/mesour.modal.min.js"></script>
<script src="../public/mesour.editable.min.js"></script>
<script>
$(function () {
var COMPONENT_NAME = 'mesourApp-editableTest';
$('[data-editable]').on('click', function (e) {
if (e.ctrlKey) {
e.preventDefault();
var $this = $(this),
name = $this.attr('data-editable'),
value = $this.attr('data-value');
mesour.editable.getComponent(COMPONENT_NAME).edit(name, $this, null, value);
}
});
});
</script>
|
Details
Mesour Editable
Install
Tests
Before first run, create config.local.php file. Can use config.php as template.
Run command vendor/bin/tester tests/ -s -c tests/php.ini --colors
Code style
Run command vendor/bin/phpcs --standard=ruleset.xml --extensions=php,phpt --encoding=utf-8 --tab-width=4 -sp src tests
| |
Applications that use this package |
|
No pages of applications that use this class were specified.
If you know an application of this package, send a message to the author to add a link here.
Download
Files
Install with Composer
.travis.yml
