Time for action — adding up and down arrows

Let's add top and bottom buttons to our scrollbars so our scrollbars look and behave more like native scrollbars.

  1. Let's go back to that line of code in our scripts.js file where we called the jScrollPane() method to create the custom scrollbars:
    $('#scrolling').jScrollPane();

    Remember how we could pass things to methods and functions by putting them inside the parentheses? We had the following example: 

    dog.eat('bacon'),

    where we wanted to say that the dog was eating bacon. So, in JavaScript-speak we passed bacon to the eat method of the dog.

    Well, in this case, we can pass a set of options to the jScrollPane method to control how our scrollbars look and act. We want to show the top and bottom arrows on our scrollbars, and we can do that by setting the showArrows option to true. We just have to make a simple modification to our line of code as follows: 

    $('#scrolling').jScrollPane({showArrows:true});
  2. Now when you refresh the page, you'll see boxes at the top and bottom of your scrollbars, just where top and bottom arrows would appear.
    Time for action — adding up and down arrows

If you click on these boxes, you'll see that they behave just like the up and down arrows on a regular scrollbar. They're just a little plain — we can style those up with some CSS to look any way we'd like.

What just happened?

We set the showArrows option of the jScrollPane method to true. There's a rather long list of advanced options available with this plugin, but luckily, we don't have to learn or know them all to be able to make good use of it.

How do we know that there's a showArrows option? We'll find it in the documentation for the plugin. Once you get better at understanding JavaScript and jQuery, you'll be able to read the plugin files themselves to see what options and methods the plugin is providing for you.

To pass one option to a method, you'll wrap it in curly braces. Then you'll type the name of the option you're setting (in this case, showArrows), then a colon, and then the value that you're setting the option to (in this case, true to show the arrows). Just like we did before:

$('#scrolling').jScrollPane({showArrows:true});

If you want to pass more than one option to a method, you'll do everything the same, except you'll need to put a comma between the options. For example, if I wanted to add a little breathing room between my text and the scrollbar, I could do that by setting a value for the verticalGutter option:

$('#scrolling').jScrollPane({ showArrows:true,verticalGutter:20});

Now, you can see that if I were setting a dozen or more options, this line of code would get long and hard to read. For that reason, it's common practice to break options out onto separate lines as follows:

$('#scrolling').jScrollPane({
showArrows: true,
verticalGutter: 20
});

You can see that the content and order are the same, only this example is easier for a human being to read and understand. A computer doesn't care one way or the other.

Tip

Be careful not to add an extra comma after the last option/value pair. Most browsers will handle that error gracefully, but Internet Explorer will throw an error and your JavaScript won't work.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.135.246.193