Well, guess what! I'm here to write it down for you (and for myself as well), so grab your popcorn and... thank me later ;)
Disable jQuery automatic styling for certain elements
If you want to stop jQuery from styling specific elements in your code, just apply data-role="none" to those elements. jQuery styling ignores every tag with such attribute.
Here's an example:
<input type="text" class="search" data-role="none">This will create an input field with absolutely no default style. Simply use your own CSS to style it properly.
Create and call an external popup widget
Recycling your code is always a good practice. So why not create a single, external popup (by external I mean "outside your jquery mobile pages") to call everytime you need it? A good example of a reusable popup widget could be a login window, which comes in very handy if you plan to call it from more than one page.
Here's a nice example of a popup widget, with a unique id, popupLogin. To have an external popup, place this code inside the <body> tag (and, of course, outside the divs marked with data-role="page"):
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3>Login</h3>
<input type="text" id="username" placeholder="username">
<input type="password" id="password" placeholder="password">
<button id="loginButton">Login now!</button></div>This will however create a popup widget that's not initialized yet. You'll have to instantiate it manually with:
$("#popupLogin").enhanceWithin().popup();There it is! To open/close your popup, simply call:
$("#popupLogin").popup("open");
$("#popupLogin").popup("close");
Count how many list elements there are in a list
To get the exact number of elements inside a list (ul or ol, it doesn't matter), just call:
$("#yourList li").lengthwhere yourList is the ID of your list. This basically tells jQuery to "select every <li> tag in the list with the id "yourList" and count them".
Let's give an example. Say you have this simple ordered list:
<ol id="yourList">Then the jQuery function:
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
$("#yourList li").lengthwill return 4, because there are exactly 4 list items inside your list. Nice and clean.
Display a simple fading popup message using plain Javascript
There are times using plain, vanilla Javascript is far more straightforward than using jQuery widgets.
Say you only want to display a small, informative message to the user, then make it fade out silently.
Here's the only code you'll need:
function myPopup(msg){
var container = $(document.createElement("div"));
container.addClass("toast");
var message = $(document.createElement("div"));
message.addClass("message");
message.text(msg);
message.appendTo(container);
container.appendTo(document.body);
container.delay(100).fadeIn("slow", function()
{
$(this).delay(1500).fadeOut("slow", function()
{
$(this).remove();
});
});
}
Here's the CSS to style your fake "popup" properly:
.toast {Whenever you need a small message to pop on top of your screen and then fade quickly, just call:
display: none;
position: fixed;
z-index: 99999;
width: 100%;
text-align: center;
top: 10%;
text-shadow: 0pt 0px 0pt rgb(0, 0, 0);
}
.toast .message {
display: inline-block;
color: #fff;
padding: 20px;
border-radius: 5px;
font-family: Times, serif;
font-size: medium;
background: #333333;
text-shadow: 0pt 0px 0pt rgb(0, 0, 0);
}
myPopup("Hello there!");and you're done!
