This recipe shows you how to configure the jQuery Mobile framework to use your custom namespace for the data-
attributes.
Copy the full code of this recipe from the code/07/namespace
sources folder. You can launch this code using the URL: http://localhost:8080/07/namespace/main.html
.
In
main.html
, add the following script before includingjquery.mobile.js
:$(document).bind("mobileinit", function() { $.mobile.ns = "my-"; });
Add the following style to the
<head>
tag:<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <style> .ui-mobile [data-my-role=page], .ui-mobile [data-my-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; } </style>
Create the main page as follows:
<div id="main" data-my-role="page" data-my-theme="e"> <div data-my-role="header" data-my-theme="a">...