Navigation par onglet entierement parametrable

Télécharger le projet
Commenter

Description

Quoi de mieux que d'apprendre en participant?
Il est minuit pile et je suis sur cette source depuis 21H. Je vous la propose car j'ai trouver beaucoup de question sur les forum en rapport avec les onglets de navigation mais pas tellement de réponse concrète.

J'ai donc réalisé un objet (VB.NET) qui permet de parametrer le nom des onglets, leur chemin mais aussi de les mettre en evidence grâce à un bon nombre (pas exaustif) de parametre. On peut soit Formater nos onglets à la sauce HTML grâce aux propriétés que j'ai crée soit appeller directement du CSS dans d'autre propriété. Passer par le CSS à l'avantage d'offrir un rollover sur les cellules inactives mais aussi de remplasser ces horrible cellules par de jolies images. :)

Le principe est de generer un tableau HTML en y incorporant ou nom les parametres récupéré grace aux methode.

Cette source est assez simple à utiliser. Je ne met pas tout dans la source ci-dessous donc il est préférable de telecharger la source complete.

Je vous donne juste la liste des methode utilisable et leur utilité.

.Page => Indique la page vers laquelle vous serez rediriger lors du clic sur un onglet. (ATENTION, les parametres ne doivent pas etre ecrit ici, vous devez juste metre "mapage.aspx"). Si cette methode est omise, vous serez rediriger sur la meme page avec les parametres que vous indiquez lors de l'appelle de l'objet onglet.

CSS (N'oubliez pas de faire appelle à votre fichié CSS s'il est indépendant)
.CssTab => Style general du tableau : nom de la classe correspondante
.CssOut => Style des onglets inactifs : nom de la classe correspondante
.CssOver => Style de l'onglet actif : nom de la classe correspondante
.CssRollOver => Style de l'onglet au passage de la souris : nom de la classe correspondante. Cette classe peut etre identique à une des autres.

Style du tableau à onglet
.cellpadding => Bien connu du HTML
.cellspacing => Bien connu du HTML

Style sans le CSS (Si le CSS est présent, c'est le CSS qui prend le dessus)
.TabBorder => Largeur de la bordure du tableau
.CelHeight => Largeur des cellules
.CelWith => Longueur des cellules
.TabBackgroundColor => Couleur de fond du tableau
.CelBorderStyle => A NE PAS UTILISER SI LE CSS EST PRESENT car elle genere la propriété style d'une cellule. Vous renseigner la taille de la bordure (chiffre seulement) puis la couleur hexa précédé de son inséparable #

Mise en page diverse
.LinkAlign => Alignement du liens par rapport aux onglets. (meme mot clef que pour le HTML : left,right,center)
.TabHTMLTitle => Title HTML du tableau
.TabHTMLID => ID du tableau HTML

Source / Exemple : 


Public Class onglet
    Public Function MakeOnglet(ByVal MesOnglet As String, ByVal ParamOnglet As String, ByVal CurrentParam As Integer)
        Dim MonSplit() As String
        Dim MesParam() As String

        Dim Redirect As String

        Dim CssCels As String

        Dim TabDeb As String = "<table " & HTMLTitleTab & HTMLTitleID & BackgroundColorTab & SpacingTab & PaddingTab & BorderTab & TabStyle & "><tr>"
        Dim TabFin As String = "</tr></table>"
        Dim TabContenu As String = ""

        Dim i As Integer

        MonSplit = Split(MesOnglet, ";")
        MesParam = Split(ParamOnglet, ";")

        'MsgBox(MonSplit.Length)
        For i = 0 To MonSplit.Length - 1
            If CurrentParam = i Then
                CssCels = "class='" & OverStyle & "'"
                Redirect = MonSplit(i)
            Else
                CssCels = RollOverCss
                Redirect = "<a href='" & MaPage & "?" & MesParam(i) & "'>" & MonSplit(i) & "</a>"
            End If

            TabContenu = TabContenu & "<td " & BorderStyle & AlignLink & CssCels & HeightCel & ">" & Redirect & "</td>"
        Next

        Return TabDeb & TabContenu & TabFin

    End Function

'Quelque exemple de methode à utiliser

'A mettre avant la déclaration des methode dans la classe onglet ;)
Dim MaPage As String = ""
Dim TabStyle As String = ""
Dim OutStyle As String = ""

    Public Function Page(ByVal Redirect As String)
        MaPage = Redirect
        Return MaPage
    End Function

    Public Function CssTab(ByVal StyleTab As String)
        TabStyle = "class='" & StyleTab & "'"
        Return TabStyle
    End Function

    Public Function CssOut(ByVal StyleOut As String)
        OutStyle = StyleOut
        Return OutStyle
    End Function

end class

'Cette classe renvoi une chaine que l'on peut aisement associer à un label ou un literal (Cette chaine contient un tableau HTML)

'Pour appeller cet objet, 
Espace de nom : onglet
...
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    Dim MesOnglet As onglet
    MesOnglet = New onglet

    MesOnglet.Page("default.aspx")
    MesOnglet.CssOut("CelOngletOut")
    MesOnglet.CssOver("CelOngletOver")
    MesOnglet.CssRollOver("CelOngletOver")

    'MesOnglet.MakeOnglet(MesOnglet As String,MesParam as string, CurrentParam as integer)

    'Afin d'avoir l'onglet en cours, il suffit de faire : 
        Dim ParamOnglet As Integer
        Select Case Request.QueryString("codrub")
            Case "1"
                ParamOnglet = 0
            Case "2"
                ParamOnglet = 1
            Case "3"
                ParamOnglet = 2
            Case "4"
                ParamOnglet = 3
            Case "5"
                ParamOnglet = 4
            Case Else
                ParamOnglet = -1

        End Select

    Onglet.Text = MesOnglet.MakeOnglet("Onglet 1;Onglet 2;Onglet 3;Onglet 4;Onglet 5", "codrub=1;codrub=2;codrub=3;codrub=4;codrub=5", ParamOnglet)
End Sub

'Ensuite, il y a juste a faire un petit code comme celui - ci pour afficher un texte ou autre selon l'inglet en cours. 

        Dim MaListe As String = ""
        Select Case Request.QueryString("codrub")
            Case "1"
                MaListe = "<h1>Vous avez cliquez sur l'onglet 1</h1>"
            Case "2"
                MaListe = "<h1>Vous avez cliquez sur l'onglet 2</h1>"
            Case "3"
                MaListe = "<h1>Vous avez cliquez sur l'onglet 3</h1>"
            Case "4"
                MaListe = "<h1>Vous avez cliquez sur l'onglet 4</h1>"
            Case "5"
                MaListe = "<h1>Vous avez cliquez sur l'onglet 5</h1>"
        End Select

MaTable.Text = MaListe

Conclusion :


Je suis donc débutant et quelques petit detail me chagrine.
Par exemple, j'aurais aimé pouvoir ranger les methodes appellé. c'est à dire que pour utiliser les methode CSS j'aurais aimé pouvoir faire
MesOnglet.CSS.CssRollOver au lieu de MesOnglet.CssRollOver actuellement.
Biensur, ceci n'est qu'un detail mais si je rajoute des methodes, on risque de se perdre.

Ensuite ce que je n'arrive pas à réaliser c'est de gerer l'onglet en cours dans mon objet car je ne sais pas comment récupérer le parametre passer dans l'URL puisque Request.QueryString ne veut pas fonctionner dans une classe.

Pour voir un exemple de ce que ca donne, http://www.m-ko.fr/default.aspx

En esperant vous avoir apporter quelque chose.

Cordialement

Mael pour un premier script.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.