Skip to content

Instantly share code, notes, and snippets.

@demonio

demonio/admin.phtml

Last active September 8, 2016 13:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save demonio/43ad43a5b3576f6828fc51c06c22e0d7 to your computer and use it in GitHub Desktop.
Save demonio/43ad43a5b3576f6828fc51c06c22e0d7 to your computer and use it in GitHub Desktop.
Download ZIP
JS para editar cajas con prims
Raw
admin.phtml
<!DOCTYPE html>
<html lang="es">
<head>
<title>Materialize</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="/css/materialize.min.css" media="print,screen" rel="stylesheet">
<link href="/css/prism.css" media="print,screen" rel="stylesheet">
<link href="/css/admin.css" media="screen" rel="stylesheet">
<link href="/css/hacks.css" media="screen" rel="stylesheet">
<link href="/css/pantallita.css" media="screen" rel="stylesheet">
<link href="/css/pantalla.css" media="screen" rel="stylesheet">
<link href="/css/pantallon.css" media="screen" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body id="important">
<div class="row">
<?php View::content(); ?>
</div>
<?php (new Cajas)->opciones(); ?>
<script src="/javascript/jquery/jquery-3.0.0.min.js"></script>
<script src="/javascript/materialize.min.js"></script>
<script src="/javascript/prism.js"></script>
<script src="/javascript/kubox.js"></script>
<script src="/javascript/hacks.js"></script>
</body>
</html>
Raw
index.phtml
<div class="box col s6">
<h1>Kubox v3</h1>
<h2>Sistema de creación de páginas WEBs basado en cajas</h2>
<h3>¿Qué es una caja para la WEB?</h3>
<p>Una caja WEB es un espacio delimitado que contiene HTML u otras cajas.</p>
<h3>¿Y Kubox?</h3>
<p>Con Kubox podrás crear y mover cajas WEB para la creación de páginas WEB.</p>
<h3>¿Cómo empezamos?</h3>
<p>Este texto esta embedido en una caja y desde aquí podras editar esta caja y crear otras con unos pocos clicks.</p>
</div>
<div class="box col s6">
<h1>Kubox v3</h1>
<h2>Sistema de creación de páginas WEBs basado en cajas</h2>
<h3>¿Qué es una caja para la WEB?</h3>
<p>Una caja WEB es un espacio delimitado que contiene HTML u otras cajas.</p>
<h3>¿Y Kubox?</h3>
<p>Con Kubox podrás crear y mover cajas WEB para la creación de páginas WEB.</p>
<h3>¿Cómo empezamos?</h3>
<p>Este texto esta embedido en una caja y desde aquí podras editar esta caja y crear otras con unos pocos clicks.</p>
</div>
Raw
kubox.js
$('body').on('mouseover', '.box', function()
{
$(this).addClass('yellow lighten-5');
});
$('body').on('mouseleave', '.box', function()
{
$(this).removeClass('yellow lighten-5');
});
$('body').on('dblclick', '.box', function()
{
var contenteditable = $(this).attr('contenteditable');
if (contenteditable != 'true')
{
var decode_head = $(this).attr('class');
$(this).attr('contenteditable', 'true');
var decode_body = $(this).html().split('<').join('&lt;');
$(this).html('<div class="head">'+decode_head+'</div><div class="body"><pre><code class="language-html">'+decode_body+'</code></pre></div>');
Prism.highlightAll();
}
else
{
var encode_head = $(this).find('div.head').text();
$(this).attr('class', encode_head);
$(this).attr('contenteditable', 'false');
var encode_body = $(this).find('div.body').text();
$(this).html(encode_body);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment