korinthorama logo

ODYSSEY CMS

jQuery Plugins | Smart Content Scroller

Τι είναι

Το jOscroller είναι ένα jQuery plugin που αναλαμβάνει την έξυπνη κύλιση των περιεχομένων μιας οριοθετημένης περιοχής, με μια απλή κίνηση του mouse μας.

Demo



Καλωσήρθατε στο Odyssey CMS!
Τι είναι όμως το Odyssey CMS και γιατί πρέπει να υπάρχει άλλο ένα CMS ανάμεσα στα πολλά που ήδη κυκλοφορούν;

Το κυριότερο γνώρισμα το οποίο το διαφοροποιεί από τα υπόλοιπα είναι η φιλοσοφία της αρχιτεκτονικής του. Μια διαφορετική ιδέα!

Θα έχετε παρατηρήσει πως η πλειοψηφία των γνωστών CMS είναι άρθρο-κεντρικά. Ολόκληρος ο πυρήνας τους είναι στημένος με συγκεκριμένο τρόπο, ώστε να διαχειρίζεται δημοσιεύσεις άρθρων με τυποποιημένη δομή. Η φιλοσοφία αυτή καλύπτει τις περισσότερες περιπτώσεις όσον αφορά την δημοσίευση περιεχομένου σε ένα ιστότοπο. Όχι όμως πάντα!
Ας πάρουμε για παράδειγμα την περίπτωση ενός ιστότοπου με αθλητικό περιεχόμενο. Μια σταθερή δομή άρθρων θα καλύψει την δημιουργία άρθρων ενημέρωσης, αλλά δεν θα μπορέσει να καλύψει την δομή παρουσίασης μιας ομάδας (παίκτες, ιστορικό, στατιστικά, βαθμολογική θέση, πρόγραμμα αγώνων κλπ). Χρειάζεται ως δομή δεδομένων διαφορετικά πεδία και το κυριότερο διασύνδεση αυτών των πεδίων με άλλες δομές δεδομένων.

Αυτή την διαφορετικότητα των δομών δεδομένων αλλά και την μεταξύ τους διασύνδεση, έρχεται να καλύψει η αρχιτεκτονική φιλοσοφία του Odyssey CMS, στηριζόμενο στην θεωρία των ενοτήτων (sections).
Τα sections είναι ο τρόπος με τον οποίο το Odyssey CMS διαχειρίζεται οποιαδήποτε πληροφορία πρέπει να αποθηκευθεί στην βάση δεδομένων. Ο πυρήνας του είναι προσανατολισμένος με τέτοιο τρόπο ώστε να μπορείτε να δημιουργείτε νέες ενότητες με διαφορετικές ιδιότητες και δομές. Οι ενότητες αυτές μπορούν με πολύ εύκολο τρόπο να διαχειρίζονται θέματα πολυγλωσσικότητας, κατηγοριοποίησης, menu πλοήγησης, ταξινόμησης και μια σειρά από διαφορετικούς τύπους πεδίων δεδομένων ώστε να δημιουργείτε αυτό που εσείς χρειάζεστε και όχι αυτό που μπορεί η πλατφόρμα να προσφέρει.
Φανταστείτε το Odyssey CMS σαν ένα Εργαλείο - Χαμαιλέοντα που μπορεί να προσαρμοστεί σε οποιεσδήποτε απαιτήσεις του ιστότοπου που θέλετε να δημιουργήσετε. Ο βαθμός αυτής της προσαρμογής, εξαρτάται άμεσα και από το επίπεδο των γνώσεων του δημιουργού χωρίς να σημαίνει πως το σύστημα δεν θα καλύψει τις βασικές ανάγκες ενός μέσου χρήστη χωρίς καμία γνώση στο web design & development.

Οδηγίες χρήσης

Αφού το συμπεριλάβουμε στη σελίδα μας με

<script type=’text/javascript’ src=’jOscroller.js’></script>

το ενεργοποιούμε με

$(document).ready(function() {
$(’#myID’).jOscroller();
});


Για κάθε οριοθετημένη περιοχή της οποίας θέλουμε να δημιουργήσουμε έξυπνη κύλιση, ο κώδικάς μας πρέπει να έχει την ακόλουθη μορφή:

<div id="myID" style="border: 1px solid; width: 400px; height: 400px;">
<div data-descr="contents">Your Contents here...</div>
</div>

Το id="myID" καθορίζει την οριοθετημένη περιοχή (πχ 400Χ400) και το data-descr="contents" είναι τα περιεχόμενα που θα χρειαστεί να κυλίσουμε. Θα πρέπει να μετατρέψετε αν θέλετε σε class το inline css του div.

Παράμετροι

To plugin δέχεται τις ακόλουθες παραμέτρους:

  • direction ["both" | "vertical" | "horizontal" ] (αρχική τιμή "both")
    Καθορίζει την κατεύθυνση προς την οποία θα γίνεται η κύλιση
  • x (αρχική τιμή 0)
    Η συντεταγμένη x της αρχικής θέσης των περιεχομένων
  • y (αρχική τιμή 0)
    Η συντεταγμένη y της αρχικής θέσης των περιεχομένων
  • centered [true | false] (αρχική τιμή false)
    Αν τα x και y της αρχικής θέσης των περιεχομένων θα υπολογιστούν αυτόματα για εμφάνιση στο κέντρο.
    Δεν λαμβάνεται υπ’ όψη αν έχει δωθεί τιμή σε x ή y
  • speed (αρχική τιμή 500)
    Η ταχύτητα σε miliseconds με την οποία γίνεται το animation της κύλισης
  • outSpeed (αρχική τιμή 1000)
    Η ταχύτητα σε miliseconds με την οποία επανέρχονται τα περιεχόμενα στην αρχική τους θέση κατά το mouseOut

Παράδειγμα σύνταξης παραμέτρων

// Χρησιμοποιήστε load() αν στα περιεχόμενα έχετε και εικόνες...

$(document).ready(function() {
$(’#myID).jOscroller({
"direction": "vertical",
"x": 50,
"y": 40,
"centered": false,
"speed": 300,
"outSpeed": 600
});
});