The Jquerymobile of Little tricks

Source: Internet
Author: User

Use JQUERYMOBILE+MVC to make a mobile website, also has 2 months. Have some little experience to share with the rest of the

Tip # 1:

Disable all Ajax loads and it will be annoying.

false;

Tip # 2:

Use JQM and JQ, sometimes with events earlier than DOM readiness

$ (document). On ("Pagebeforecreate", function (event) {alert ("The sexy Year?"). ") });

Tip # 3:

Jump page, Note: If you use Location.href to jump, then, if the page appears <a href= "" > Such a link you point to the page JS will appear after the situation, so either use Location.href, or with < a href> Of course, the code in the background can be ignored and unaffected.

Tip # 4:

Ignore link, direct return, no refresh

<hrefdata-rel data-roledata-icon  = ' back '> return </a>

Tip # 5:

It's gorgeous. Jump Data-transition properties See the API documentation for more information

Tip # 6:

Select drop-down list box, after using the data-native-menu= "false" property, a separate page is generated. So, to use the events to the page transitions

$ (document). On ("Pagebeforehide", "#status-dialog", function () {    alert ("What do you want to do")})

Tip # 7:

Adjusting the style requires a lot of use to the padding margin UI is the face of the entire project, even if the project is garbage, the UI is doing well, the boss, the customer is satisfied, it is good.

Tip # 8:

Use brilliant pop-up windows

$.mobile.loading (' show ', {       ' loading ... ',       true,       ' A ',        false ,       "" }); // a simple pop-up window setTimeout ("$.mobile.loading (' Hide ')", 1000); // use it to hide the pop-up window after 1000 milliseconds, note that the first argument is a    double quote

Tip # 9:

Show elements on hidden pages it's best not to show the hidden code based on the inside of the editor, you can use Google's review element to see what JQM really did to your page.

Tip # 10:

The ListView makes its icon button side-off, happily making a small display panel

<ulData-role= "ListView"Data-inset= "false"style= "height:100%; overflow:hidden;"ID= "List" >//Overflow:hidden; This one will appear a scroll bar is very difficult to see, but the groping for a long time to solve<Listyle= "height:70px;">        <a>                <H2style= "Margin-top: -5px; font-size:16px;">         </H2>                <Pstyle="">        </P>        </a>    </Li></ul>

Then add two JQ codes, don't ask me why, have said what JQM will do to your page ...

$ ("#list Li Div div a"). CSS ("padding-right", "0px"); $ ("#list Li Div. ui-btn-text"). Next (). Remove ();

Tip # 11:

data-iconpos= the "Right/left/down/top" control icon appears data-icon= "Back/gear/grid/home ..." to set the small icon to fit the button with

Tip # 12:

Left and right slide effect

function () {// right-swipe          alert ("Don't ask Me Why")}). bind (function () {// left swipe          alert ("Because I am the Red Scarf")});

Today's share to this, very look forward to sharing with everyone, do not ask me who, please call me red scarf.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.