it-swarm.com.de

Benutzerdefiniertes Feld colResizable Plugin funktioniert nicht, funktioniert aber in Fiddle

Ich habe diese Geige: http://jsfiddle.net/2h4kLzgj/9/

Jetzt versuche ich, dies einem benutzerdefinierten Feld in Joomla hinzuzufügen, aber aus irgendeinem Grund funktioniert es im Administrator überhaupt nicht.

Die Tabelle wird angezeigt, aber die Funktionalität ist nicht vorhanden. Aber weil es angezeigt wird, ist der Link zum benutzerdefinierten Feld korrekt.

Hier ist der Inhalt des benutzerdefinierten Feldes:

<?php

// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');

jimport('joomla.form.formfield');
$document = JFactory::getDocument();
$document->addScript(JURI::root(true) .'/modules/mod_loginsecurepagemaker/models/assets/js/colResizable-1.5.min.js');
$document->addScript('https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js');
class JFormFieldColumnTwelve extends JFormField {

    protected $type = 'columntwelve';

    public function getInput() {

        return '<table id="tableResizable" border="0" cellpadding="0" cellspacing="0" >'.
                '<tbody>'.
                 '<tr>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                    '<td>cell</td>'.
                 '</tr>'.
                '</tbody>'.
               '</table>';
    }
}
?>
<style>
body {background:white;}
#tableResizable {
  width:100%;
}
td {border: 1px solid black;}
.JCLRgrip .JColResizer {
    cursor: col-resize!important;
}
.grip {
    width: 4px;
    height: 100%;
    margin-top: 0px;
    margin-left: 2px;
    background-color: black;
    position: relative;
    z-index: 88;
    cursor: col-resize!important;
    opacity: 1;
}
.grip:hover{
  background-color: red;}
</style>
<script>
(function ($) {
    $("#tableResizable").colResizable({
        fixed:true,
        liveDrag:true,
        gripInnerHtml:"<div class='grip'></div>",
        draggingClass:"dragging" });
})(jQuery);
</script>
<?php

Wenn mir jemand helfen kann, den gleichen Effekt wie bei der Geige zu erzielen, ist das sehr zu schätzen.

PS: Style und Script werden irgendwann im Assets-Ordner abgelegt, dies ist nur zum schnellen Testen.

1
purple11111

Sie rufen das colResizable jQuery-Plugin vor der jQuery selbst auf. Es sollte umgekehrt sein.

Außerdem sollte der Administrator von Joomla bereits jQuery geladen haben, das jedoch jQuery v1.12.4 verwendet. Die beiden JQuerys könnten Konflikte verursachen.

Einige Dinge, die Sie ausprobieren sollten:

  • Öffne deine Konsole (F12) und lade die Seite neu - gibt es irgendwelche js Fehlermeldungen?

  • Zeigen Sie den Quellcode an und klicken Sie auf die Javascript-Links - stellen Sie sicher, dass sie geladen werden, dass sie in der richtigen Reihenfolge geladen werden und nicht zu einem 404 wechseln.

3
Richard B

Wie wäre es, das $ -Zeichen mit jQuery zu ändern? Also wäre der Code

jQuery("#tableResizable").colResizable({
        fixed:true,
        liveDrag:true,
        gripInnerHtml:"<div class='grip'></div>",
        draggingClass:"dragging" });
2
webchun