Comment créer une page de portail avec un état enregistrable dans l'interface utilisateur de jquery?

Question

Je sais que je devrais passer plus de temps à faire des recherches et essayer avant de poser la question, mais j'ai seulement 2 semaines pour construire un site avec une page d'accueil de style portail (un peu comme http://www.bbc.co.uk). Je suis assez bon avec jQuery et j'ai joué avec les draggables jQuery UI par le passé mais je me demandais s'il y avait des tutoriels ou des exemples de bonnes pratiques pour construire un portail avec plusieurs zones de dépôt et la capacité de se rappeler "portlets" ont été déplacés dans lesquels dropzones dans une sorte d'objet d'état.

Je devrais être en mesure de sauvegarder l'objet d'état au back-end en utilisant un appel $ ajax() et de réorganiser les portlets quand l'utilisateur se reconnecte au site, vraisemblablement en envoyant un objet état JSON le back-end. Juste quelques idées d'où commencer serait utile. Merci

Answer 1

Je pensais à quelque chose de similaire récemment. La meilleure méthode que je pourrais trouver était d'avoir plusieurs «zones» sur la page où les éléments seraient placés. Dans mon cas, il s'agissait de trois colonnes. Je leur ai donné un identifiant et utilisé un appel Ajax chaque fois qu'un bloc était déplacé vers une position différente pour mettre à jour la nouvelle position de ce bloc.

Par exemple, une table de base de données exemple:

tbl.blocks: 
    userid | blockid | column | placement 
    1 | 2 | 1 |  3 

Lorsque la colonne est un simple identifiant de la colonne et le placement est le placement dans cette colonne. J'ai utilisé une requête au chargement de la page qui a chargé les blocs dans l'ordre de placement, puis les a écrits. blockid fait référence à une table de blocs.

Voici un tutoriel j'ai trouvé qui semble pertinente: http://aymanh.com/drag-drop-portal-interface-with-scriptaculous

Answer 2

Une suggestion que j'ai est d'utiliser les informations de commande générées sur le back-end pour construire la page avec les éléments dans les emplacements corrects au départ plutôt que de compter sur javascript pour les réorganiser au chargement de la page. Cela réduira les chances de voir l'affichage se transformer devant les yeux de l'utilisateur de la valeur par défaut à la commande choisie. Cela permet également à la page de s'afficher correctement même si javascript est désactivé, bien qu'ils perdent leur capacité à réorganiser les choses de toute évidence.

Je pense que vous êtes sur la bonne voie avec AJAX pour communiquer les changements de commandes au serveur. La seule autre façon de faire cela est d'avoir un mode "edit" qui permet à l'utilisateur de faire les changements, puis "save" pour sortir du mode d'édition. L'enregistrement affichera les commandes en cours. Je préfère la méthode AJAX puisque vous aurez besoin de Javascript pour gérer le drag-n-drop de toute façon.

Answer 3

Ceci est un très bon endroit pour commencer - http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/. Jetez également un oeil à cette référence ici - http://docs.jquery.com/UI/Sortable. En utilisant les informations des deux sites vous pouvez essayer quelque chose comme:

<div id='#left_sidebar'> 
    <div id='box1'>somestuff</div> 
    <div id='box2'>otherstuff</div> 
</div> 

$(#left_sidebar).sortable({ 
    update: function() { 
    alert($("#left_sidebar").sortable("toArray")); 
    } 
}); 

Et vous pouvez utiliser serialize 'au lieu de « toArray ». Ensuite, vous devez envoyer le tableau (ou chaîne) au backend en utilisant jquery/ajax - essayer quelque chose comme:

$.post(
    "backend_script.php", 
    $("#left_sidebar").sortable("toArray"), 
    onready_function() 
); 

Cette ligne devrait remplacer l'alerte dans le code supérieur - lorsque vous êtes sûr que l'alerte vous montre ce que vous voulez voir (et enregistrer).

Answer 4

Vérifiez le jQuery.portal plugin: il a construit en support pour l'état de sauvegarde.

Answer 5

Pour créer des interfaces de type portail personnalisées, vous pouvez utiliser des éléments div HTML simples placés dans une disposition à trois colonnes. Par exemple.

<ul id="col1"> 
    <li><div id="portlet1">...content...</div></li> 
    <li><div id="portlet2">...content...</div></li> 
</ul> 
<ul id="col2"> 
    <li><div id="portlet3">...content...</div></li> 
    <li><div id="portlet4">...content...</div></li> 
</ul> 
<ul id="col3"> 
    <li><div id="portlet5">...content...</div></li> 
    <li><div id="portlet6">...content...</div></li> 
</ul> 

Utilisez JQuery sortable() API et de faire toutes les li éléments triables avec un espace réservé valeur qui montre en fait où déposer les éléments. Une fois le tri terminé, utilisez l'API onDrop() pour enregistrer les emplacements de chaque widget. Dans ce scénario, vous pouvez l'enregistrer comme suit:

portlet1 -- 1,1 (row,column) 
portlet2 -- 2,1 
portlet3 -- 1,2 
portlet4 -- 2,2 
portlet3 -- 1,3 
portlet3 -- 2,3 

Ces positions peuvent être obtenues en calculant les positions des éléments triables dans les DOM. Après avoir récupéré ces positions, il peut être sauvegardé dans la base de données personnalisée ou hors ligne dans le navigateur (en utilisant HTML5 localStorage). Lors de la visite suivante, les portlets peuvent être redessinés avec les valeurs de ligne et de colonne récupérées.

Hope this helps .. Un exemple pratique se trouve à http://network.nature.com/workbench (vous devez vous inscrire et vous connecter pour avoir les widgets enregistrés après les repositionnez)