捕鱼机老板怎样调程序

書名： Mastering jQuery Mobile
作者名： Chip Lambert Shreerang Patwardhan
本章字數： 705字
更新時間： 2021-07-16 13:17:00

Seeing the framework in action

So far in this chapter we have done nothing but talk about jQuery Mobile, how we get it, why we should do things a certain way, blah blah. You're a developer; you want to see this in action and now you will. We are going to make a simple jQuery Mobile application. We'll see the code and then we'll explain what is going on within each piece of code:

Go ahead and fire up Aptana Studio 3.
Navigate to File | New | Web Project.
Pick the default template
Name the project whatever you like.

Don't worry too much about everything in Aptana Studio right now, as we'll look at it in more detail in the next chapter.

Right-click on your project and navigate to New | File from the pop-up menu. Name the file index.html. Add the following code to the file:

<html>
  <head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scrolable=no">
      <title>jQuery Mobile: Getting Started</title>
      <link rel="stylesheet"  />
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <p data-role="page">
      <p data-role="header">
        <h3>Web Development Books</h3>
      </p>
      <p role="main" class="ui-content">
        <ul data-role="listview" data-inset="true" data-pider-theme="b">
          <li data-role="list-pider">JavaScript</li>
          <li>
            <a href="#">Object Oriented JavaScript</a>
          </li>
          <li>
            <a href="#">JavaScript Unit Testing</a>
          </li>
          <li data-role="list-pider">PHP</li>
          <li>
            <a href="#">RESTful PHP Web Services</a>
          </li>
          <li>
            <a href="#">Instant RESS</a>
          </li>
        </ul>
      </p>
    </p>
  </body>
</html>

When we execute this code, open up your browser and you should see the output similar to what we will see in the following screenshots on a mobile device:

That wasn't so hard, was it? Now, it's time to break down the code and see what's going on under the hood:

<html>
  <head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scrolable=no">
      <title>jQuery Mobile: Getting Started</title>
      <link rel="stylesheet"  />
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>

This is your standard HTML5 header with us loading the jQuery Framework from the jQuery CDN. Also notice in-keeping with tradition, we are loading the compressed jQuery and jQuery Mobile files so that we have the smallest possible footprint we can have:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scrolable=no">

Now, you may or may not know this line, depending on how much mobile development experience you have. This line is important as it really makes a difference to how your website or application looks on a mobile browser. Apple started it for use on iOS Safari but has since been adopted by others. If you did not have this line in your project, the page we have would be rendered "zoomed out" basically. The user would have to double-click or zoom in via other means to see the page. By having this, we make sure mobile browsers are on their best behavior in helping your project look fabulous when the user visits:

<p data-role="page">

This is the start of jQuery Mobile specific code. For the most part, our project is straight HTML5. There is very little actual JavaScript involved, but we have these weird p lines sprinkled throughout. These are jQuery Mobile tags. It uses the standard p tag but adds on these things called data roles. In this instance, we are giving p the role of a page. The page role is the main role in jQuery Mobile. We'll discuss this in more detail in another chapter. For now, let's keep moving.

<p data-role="header">
<h3>Web Development Books</h3>
</p>

Here we are using another role, the header role. This allows us to display "Web Development Books" in a different manner than the rest of the page. As you might have noticed in the preceding screenshots, the entire text in the header is not visible. Whenever the text in the header is long, it will be truncated and appended by the ellipses (...). So make sure that you do not have really long names in the header. However, if long names cannot be averted, you can override the jQuery Mobile CSS to make sure that the text in the header is not truncated.

<p role="main" class="ui-content">
<ul data-role="listview" data-inset="true" data-pider-theme="b">
    <li data-role="list-pider">JavaScript</li>
    <li>
      <a href="#">Object Oriented JavaScript</a>
    </li>
    <li>
      <a href="#">JavaScript Unit Testing</a>
    </li>
    <li data-role="list-pider">PHP</li>
    <li>
      <a href="#">RESTful PHP Web Services</a>
    </li>
    <li>
      <a href="#">Instant RESS</a>
    </li>
  </ul>
</p>

This is the heart of our page, the content. Within the p tags, we are creating an unordered list, which jQuery Mobile then renders for us as buttons almost. If we had the links going to existing pages rather than the dummy link, the user could click the list items and navigate through the project. Again, we will be discussing these in much greater detail in another chapter.

Are you still with us? Everything might seem a bit overwhelming right now, even though we hope it doesn't, but as we go and you write more code, things will get easier and you'll see how powerful jQuery Mobile is without having to write a lot of complicated code.

官术网_书友最值得收藏!

Mastering jQuery Mobile

Seeing the framework in action