Tuesday, June 25, 2013

Creating an advanced options panel - day 1

I just graduated recently and I've been too busy spending time with the fam and homies to actually post anything here.  What I have done over this time was almost completely dissemble (till I took the motherboard out), get the dust out of, and assemble my Acer Aspire One 532h-2588.  I used this guide to do so: http://erkinson.altervista.org/acer-aspire-one-532h-aggiornare-ramhdwifi-smontare-lcd/
And no, I don't speak Italian, I translated the article (obviously).  Everything was very easy to put back together except for the damn keyboard.  The main reason was that the ribbon cable used to connect it was very folded and almost impossible to secure (but I got it).

Today I've started creating an advanced options panel today.  These are some of the guides I'm using so far:

My idea is to have too loops in the creation of the panel.  The first will be used to create a side navigation that is used for navigating through each container that has options in it (so it will only use the items in the array with the sidebar type.  The second loop will be used to create the needed containers to go along with the side menu and fill them with options.

Once this is done, I'll need to write some simple js to fade in and out of containers depending on the one clicked in the side menu.  As for the save changes input functions, I think I can just copy/paste it from either the first article above or just rewrite it from one of the books I own.  This is all I'm posting about now but I'm going to continue working throughout tonight.

My goal is to make it look almost exactly like this:

No comments:

Post a Comment