VvvebJs est un jQuery et Amorcer créateur / créateur de site Web en ligne qui permet aux utilisateurs d’ajouter / de supprimer Bootstrap 4 Composants par glisser-déposer. Sous licence Apache License 2.0.

Les caractéristiques:

  • Refaire / annuler les opérations.
  • Mode plein écran.
  • Exporter du HTML.
  • Vues mobile / tablette / bureau.
  • Déplacer les éléments.
  • Cloner des éléments.
  • Éditeur de code.
  • Mise en évidence de la syntaxe.

Voir également:

Comment l’utiliser:

1. Chargez la bibliothèque jQuery et le framework Bootstrap 4 requis dans le document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Chargez les fichiers JavaScript et CSS du générateur de site Web VvvebJs dans le document.

<!-- hotkey plugin-->
<script src="js/jquery.hotkeys.js"></script>

<!-- builder code-->
<script src="libs/builder/builder.js"></script> 

<!-- undo manager-->
<script src="libs/builder/undo.js"></script>  

<!-- inputs-->
<script src="libs/builder/inputs.js"></script>  

<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script> 
<script src="libs/builder/components-widgets.js"></script>

3. Initialisez le générateur de site Web.

$(document).ready(function() {
  Vvveb.Builder.init('demo/index.html', function() {
    //load code after iframe is loaded here
    Vvveb.Gui.init();
  });
});

4. Remplacez les variables CSS standard dans le _variables.scss.

// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.


//
// Color system
//

// stylelint-disable
$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

...

Journal des modifications:

28/07/2020

  • Fonction pour les sections de page ajoutée.

v1.4.1 (16/07/2019)

  • Correction de la section des propriétés de réduction pour qu’elle fonctionne avec les panneaux gauche / droit.

v1.4 (25/03/2019)

  • Ajout d’un champ de section pour ajouter des composants et des blocs n’importe où sur la page en cliquant sur le bouton plus (+) sans les faire glisser et les déposer.
  • Ajout du mode concepteur pour placer les composants n’importe où sur la page avec une position absolue.

24/02/2019

  • Ajout du support pour la zone non modifiable.

03/02/2019

  • Avec la fonction « Nouvelle page », vous pouvez ajouter une nouvelle page dans le gestionnaire de fichiers.

13/01/2019

  • HtmlAttr redondant: « id » supprimé du composant d’en-tête et l’événement d’entrée de texte est passé de « keyup » à « flou » pour faciliter l’annulation
  • Améliorations de l’interface utilisateur sur l’espacement et les couleurs
  • Tous les symboles ont été modifiés pour dessiner étonnamment

23/12/2018

16/12/2018

  • Ajout d’un paramètre pour désactiver l’indicateur de cache pour charger la page afin d’empêcher la mise en cache du navigateur d’interférer avec l’enregistrement Ajax.

25/08/2018

  • Ajout du téléchargement d’image avec prise en charge du téléchargement backend avec Ajax

24/08/2018

  • Ajout d’une option pour télécharger des fichiers pour l’entrée d’image

25/07/2018

  • Ajout de l’arborescence des composants pour le gestionnaire de fichiers.

25/06/2018

  • L’option Vvveb.dragIcon a été ajoutée pour passer de l’utilisation de l’image du composant ou du HTML du composant pour l’icône de glisser.
  • Amélioration du glisser-déposer des composants et ajout d’un marqueur de dépôt.

17/05/2018

  • Ajout d’un gestionnaire de fichiers, de nouveaux composants de widgets, de panneaux pliables pour les composants et les propriétés, de nouvelles propriétés pour les éléments HTML comme le remplissage, la marge, la typographie, etc.

2018-04-03

  • Ajout de la prise en charge de l’éditeur de code (zone de texte standard) et du plugin de miroir de code pour mettre en évidence la syntaxe de l’éditeur de code.
  • Largeur et hauteur pour ajouté Vidéo une cartewidget de s.
  • Correction d’un bug lors de l’édition de l’entrée de la classe de composant de base.
  • Correction d’un div non fermé dans editor.html et au-dessusDated Bootstrap 4

28/03/2018

  • La prise en charge de l’attribut de style HTML à l’aide de la clé htmlAttr = « style » a été utilisée comme propriété CSS

Ce fantastique plugin jQuery a été développé par givanz. Pour plus d’informations sur l’utilisation avancée, consultez le Page de démonstration ou visitez le site officiel.



Source link

Recent Posts