The Jquerymobile of Little tricks

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.