In the jquery mobile layout, most of the control is a single row in the page, the button is no exception, but there are still some ways to make a row of multiple buttons, such as in example 6-5, the use of the method of grouping buttons to make 4 buttons in a row, 6-24 and figure 6-25 are shown.
Figure 6-24 How to implement a button grouping
Figure 6-25 Grouped buttons
In the previous section, perhaps some readers have noticed that the buttons in the header bar do not occupy a whole row, and there are no groups of buttons together, so can the other parts of the page also let the button appear in this form?
"Example 6-9 simple Qwer Keyboard"
on<! DOCTYPE html> GenevaGenevaGeneva<meta http-equiv="Content-type"Content="text/html; Charset=utf-8"/> to<meta name="Viewport"Content="Width=device-width, initial-scale=1"> .<link rel="stylesheet"href="Jquery.mobile.min.css"/> -<script src="Jquery-1.7.1.min.js"></script> ,<script src= "Jquery.mobile.min.js" ></script> theTen<body> One<div data-role="page"> A<div data-role="Header"> - -</div> the<div data-role="content"> -<a href="#"data-role="Button"Data-inline="true">Tab</a> -<!-omit a number of buttons here, please add them yourself, label <br/> wrap- -<a href="#"data-role="Button"Data-inline="true">;</a> +<br/> -<a href="#"data-role="Button"Data-inline="true">Shift</a> +<!-omit a number of buttons here, please add them yourself, label <br/> wrap- A<a href="#"data-role="Button"Data-inline="true">/</a> at</div> -<div data-role="Footer"> - -</div> -</div> -</body> inRun result 6-26 as shown.Figure 6-26 Qwer keyboard implemented with jquery mobile
The observation code can find that each button adds a new property, data-inline= "true", which makes the width of the button contain only the contents of the caption in the button, not the whole line, but it also has the disadvantage that jquery The elements in mobile will not know where to break the line, so there is "<br/>" at line 19th.
In addition, after using this property, the button will no longer fit the width of the screen, you can see the right side of Figure 6-26 also has a certain amount of space, because the width of the page is beyond the sum of the button width. When the page is not wide enough to contain the width of the button, the chaotic results shown in 6-27 appear.
Figure 6-27 the buttons on the keyboard wrap automatically because they are not wide enough
It is ironic to look at the "very neat arrangement" in the trailing column, because after using the attribute data-inline= "true", each button has its own width compressed to the minimum, and if you want to display all the content then you have to wrap it to show the content.
Tip: In fact, with the jquery Mobile column layout function is much better than this way, but because the column layout can only produce a regular layout, so in the actual use of according to the actual situation to determine the specific use of which method is more appropriate.
If you like these examples, it is highly recommended that this is an introductory book on app development for people without any foundation, " building cross-platform apps: ThejQuery mobile app in action"
Low threshold
Shallow reading
Learn to move app development with just a little loose touch
Not only do you know what to do and what to do (how)
More clearly why you should do this (why)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
