I used to work with jquery and it was easy to manipulate dom or even hide some content and show another inside a container. Need help in Angularjs to achieve something similar to show or hide a template inside a container on button click.
My main reports page
<div style="margin-left:25px;margin-bottom:10px">
<button class="btn glyphicon glyphicon-stats" ng-click="showChartView()"></button>
<button class="btn glyphicon glyphicon-th-list" ng-click="showTableView()"></button>
</div>
<div class="row" style="width:100%; margin:0px">
<!--Chart or Table view-->
<div class="col-md-10" style="width:70%;margin-right:0px" id="container">
</div>
<!--Filter-->
<div class="col-md-2" style="width:30%;margin-left:0px">
<div ng-include='"templates/reports/filters.html"'></div>
</div>
</div>
$scope.showChartView = function() {
//should display charttemplate.html inside container
}
$scope.showTableView = function() {
//should display tabletemplate.html inside container
}
Need help in Angularjs to achieve something similar to show or hide a
template inside a container on button click.
how to load chart view by default?
just add hide/show in the button action?
can you give an example. I am new in Angularjs
1) Using ng-include, ng-click, ng-show, ng-hide
This works for me:
app.js:
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', function ($scope) {
$scope.should_show_chart = true;
}]);
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS</title>
<meta charset="UTF-8"> <!-- For html5 (default is UTF-8) -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->
<!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="MyCtrl" class="container">
<div>
<button type="button"
class="btn btn-default"
ng-click="should_show_chart=true">
<span class="glyphicon glyphicon-stats"
aria-hidden="true"></span>
</button>
<button type="button"
class="btn btn-default"
ng-click="should_show_chart=false">
<span class="glyphicon glyphicon-th-list"
aria-hidden="true"><span>
</button>
</div>
<div class="row">
<!--Chart or Table view-->
<div ng-include="'chart.html'" *****NOTE THE INTERIOR SINGLE QUOTES****
ng-show="should_show_chart" **ng-show explained below
class="col-md-6"
id="container">
</div>
<div ng-include="'table.html'" ****NOTE THE INTERIOR SINGLE QUOTES****
ng-hide="should_show_chart" ***ng-hide explained below
class="col-md-6"
id="container">
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>
</body>
</html>
chart.html:
<h3>Chart</h3>
table.html:
<h3>Table</h3>
If ng-show is a true value, then the tag is made visible; if ng-hide is a true value, then the tag is hidden.
Note that according to the Bootstrap docs:
icon classes...should not be used along with other classes on the same
element. Instead, add a nested <span> and apply the icon classes to
the <span>.
And for accessibility reasons, you are supposed to add the attribute:
aria-hidden="true"
to the tag which specifies the glyphicon classes.
http://getbootstrap.com/components/
2) Using angular-ui-router
...which requires linking to an additional js script:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS with UI-Router</title>
<meta charset="UTF-8"> <!-- For html5 (the default is UTF-8) -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->
<!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div>
<a class="btn btn-default"
ui-sref="chart" ***Adds an href attribute to the <a> tag consisting of '#' plus the url corresponding to the chart 'state'(see app.js).
ui-sref-active="active"> ***When the chart 'state' is activated, the specified class is added to the class attribute
<span class="glyphicon glyphicon-stats"
aria-hidden="true"></span>
</a>
<a class="btn btn-default"
ui-sref="table" ***Adds an href attribute to the <a> tag consisting of '#' plus the url corresponding to the table 'state'(see app.js)
ui-sref-active="active"> ***When the table 'state' is activated, then the specified class is added to the class attribute
<span class="glyphicon glyphicon-th-list"
aria-hidden="true"><span>
</a>
</div>
<!--Chart or Table view-->
<div ui-view></div> ***TEMPLATES ARE INSERTED HERE DEPENDING ON WHAT STATE IS ACTIVE****
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- Angular-UI-Router -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>
</body>
</html>
app.js:
var app = angular.module('myApp', ['ui.router']);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
//Set the default route, which will load the associated state:
$urlRouterProvider.otherwise('/chart');
//Define the states:
$stateProvider
.state('chart', {
url: '/chart',
templateUrl: 'chart.html'
})
.state('table', {
url: '/table',
templateUrl: 'table.html'
});
}]);
3) Using ng-switch, ng-include (per xe4me's answer):
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS</title>
<meta charset="UTF-8"> <!-- For html5 (default is UTF-8) -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->
<!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div>
<button type="button"
class="btn btn-default"
ng-click="should_display='chart'">
<span class="glyphicon glyphicon-stats"
aria-hidden="true"></span>
</button>
<button type="button"
class="btn btn-default"
ng-click="should_display='table'">
<span class="glyphicon glyphicon-th-list"
aria-hidden="true"><span>
</button>
</div>
<div class="row">
<!--Chart or Table view-->
<div ng-switch="should_display">
<!-- should_display is only assigned a value after a button is clicked-->
<div ng-switch-default
ng-include="'chart.html'"
class="col-md-6"
id="container">
</div>
<div ng-switch-when="chart"
ng-include="'chart.html'"
class="col-md-6"
id="container">
</div>
<div ng-switch-when="table"
ng-include="'table.html'"
class="col-md-6"
id="container">
</div>
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>
</body>
</html>
app.js:
var app = angular.module('myApp', []);
Instead of using a <div> with the ng-switch-default attribute to display a default view, you could use a controller to set the initial value of should_display. To do that, delete the <div> containing the ng-switch-default attribute, then add ng-controller="MyCtrl" to the <body> tag, and change app.js to this:
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', function ($scope) {
$scope.should_display = 'chart';
}]);
Your best bet would be using the ng-include directive and putting currently used template URL into a scope variable.
<div ng-include="view"></div>
Changing displayed view is then done using a simple assignment
$scope.showChartView = function () {
$scope.view = '/path/to/chartView.fragment.html';
};
I think the best way of doing this is using ng-switch there you can use ng-include and change the content with one click.
you can check my answer here :
ng-switch
Related
Layout view not shared across other views
Currently my home page and other main pages share the view of my layout however the other pages such as the login page share the view but with no styling or images. Also my main pages such as about for example all the crud features like delete also remove styling, anyone know how to link this all together?
Actual View of login page and Home Page
Login.cshtml
#page
#model LoginModel
#{
ViewData["Title"] = "Log in";
}
<h2>#ViewData["Title"]</h2>
<div class="row">
<div class="col-md-4">
<section>
<form method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log in</button>
</div>
<div class="form-group">
<p>
<a asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="#Model.ReturnUrl">Register as a new user</a>
</p>
</div>
</form>
</section>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Sample Post
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Clean Blog</h1>
<hr class="small">
<span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>
In your Layout.cshtml the path to the css files are relative.
Change them to absolute (by adding a leading / to the CSS paths) and it should work.
The problem is that the main page is on /, so the CSS directory is /css.
However other pages might be at /Account/Login, so the CSS directory would be /Account/Login/css (which is wrong)
Assuming that the folders /css and /vendor are correct:
<!-- Bootstrap Core CSS -->
<link href="~/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="~/css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
the same applies to the JS scripts at the end:
<!-- Bootstrap Core JavaScript -->
<script src="~/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="~/js/jqBootstrapValidation.js"></script>
<script src="~/js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="~/js/clean-blog.min.js"></script>
How to move my buttons to right and make it responsive. Please can anyone help me with this?
Here is my code:
I am using background image in CSS here
<!-- begin snippet: js hide: false -->
<!-- language: lang-html -->
<!-- Background image and Buttons -->
<div style="background-image:url('images/image.jpg'); padding-bottom: 30%;background-size: 100% 100%;" class="wrapper">
<div id="homebuttons" class="container">
<!-- Login with a button -->
<button style="top:170px; width:25%;" id="logintl" type="button" class="btn btn-info btn-lg sharp pull-right btn-group-vertical" title="Login with MiiSky" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-lock"></span> | Login with SATMP</button>
<br>
<!-- Register with a button -->
<br>
<br><span class="glyphicon glyphicon-lock"></span> | Register with SATMP
</div>
<!-- End homebuttons container-->
</div>
<!-- End Background image-->
My buttons are at the right but it is not responsive.
Current Output:
Buttons are moving out of the image as shown in the image below...
I want to fit the image so that it should not be altered even if the browser size is reduced.
Any idea would be helpful
[1]: http://i.stack.imgur.com/F5Dty.jpg
[2]: http://i.stack.imgur.com/9uL7G.png
[3]: http://i.stack.imgur.com/ibhCa.png
I got what you want. Basically, here's what I did.
Removed the inline CSS style from button and anchor tag.
Removed the width property.
Added class bt1 and bt2 to the buttons.
bt1 and bt2 were style with top:100px and top:120px respectively. You can change the pixel to whatever height you want.
Below is my working code.
<!DOCTYPE HTML>
<html>
<head>
<title>
About TechGenium
</title>
<!-- Font-Awesome CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></link>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<!-- begin snippet: js hide: false -->
<!-- language: lang-html -->
<!-- Background image and Buttons -->
<div style="background-image:url('images/bg_3.jpg'); padding-bottom: 30%;background-size: 100% 100%;" class="wrapper">
<div id="homebuttons" class="container">
<!-- Login with a button -->
<button id="logintl" type="button" class="bt1 btn btn-info btn-lg sharp pull-right btn-group-vertical" title="Login with MiiSky" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-lock"></span> | Login with SATMP</button>
<br>
<!-- Register with a button -->
<br>
<br><span class="glyphicon glyphicon-lock"></span> | Register with SATMP
</div>
<!-- End homebuttons container-->
</div>
<!-- End Background image-->
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<style>
.bt1{
top: 100px;
}
.bt2{
top: 120px;
}
</style>
</body>
</html>
Replace the background image to whatever image you have and the code will work.
html
Here is my final code with modification:
<body>
<div class="container">
<div class="row">
<!-- begin snippet: js hide: false -->
<!-- language: lang-html -->
<!-- Background image and Buttons -->
<div style="background-image:url('images/bg_3.jpg'); padding-bottom: 30%;background-size: 100% 100%;" class="wrapper">
<div id="homebuttons" class="container">
<!-- Login with a button -->
<button id="logintl" type="button" class="bt1 btn btn-info sharp pull-right btn-group-vertical" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-lock"></span> | Login with SATMP</button>
<br>
<!-- Register with a button -->
<br>
<br><span class="glyphicon glyphicon-lock"></span> | Register with SATMP
</div>
<!-- End homebuttons container-->
</div>
<!-- End Background image-->
</div>
css
Here i changed the width of my buttons so it worked perfectly for me!!
<style>
.bt1{
top: 50px;
width:230px;
color: black;
}
.bt2{
top: 51px;
width:230px;
color: black;
}
</style>
</body>
Final Output:
image1
image2
image3
I'm using Twitter bootstrap's bootstrap.min.css for styling my phonegap app. But I do not see the desired UI of DOM elements affected by bootstrap. For example, in Base CSS it is shown that btn btn-primary classed button is colored blue and has some gradient on it. Looks nice. But this thing looks so ugly gray colored if I run this on emulator. Why is that so? Isn't bootstrap good for phonegap?
ADDING CODE AND SCREENSHOT
<!DOCTYPE HTML>
<html>
<head>
<title>Call the cab</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/custom.css" type="text/css">
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/heartcode.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
</head>
<body onload="onLoad();initialize()">
<div id="wrapper" class="container row-fluid ">
<div id="headerdiv" class="span12">
<header style="vertical-align:middle;">
<h1>App Name</h1>
</header>
</div><!--End of header-->
<div id="inputs" class="row-fluid">
<form action="file:///android_asset/www/pickup.html" onsubmit="return saveInputs()" class="form-inline form-actions">
<input type="text" id="pickup" onblur="unlockDestiny();codeAddress(this.value)" class="input-block-level"/>
<input type="text" id="destiny" onblur="codeAddress(this.value)" class="input-block-level"/>
<label class="checkbox">
<input type="checkbox" value="">
Remember this
</label>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div><!--End of inputs-->
</div><!--End of wrapper-->
</body>
</html>
Have you double checked that the path to the CSS files is correct, and that there's nothing in css/custom.css that is overriding the Bootstrap button styling?
I have the following test code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ti Productions</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li>home</li>
<li>about</li>
<li>help</li>
</ul>
</div>
</div>
</div>
</div>
<script src="assets/js/bootstrap-collapse.js"></script>
</body>
</html>
I'm basically trying to test out the collapsable menu shown here:
http://twitter.github.io/bootstrap/components.html#navbar
I've downloaded the boostrap responsive css file as per the instructions, and also the collapse.js file.
The page loads file, with the menu showing. Then when I shrink the browser size, the menu collapses..and the button appears. But I can't open the menu. Whenever i click on the button to display the collapsed menu, I get the following error:
--
[19:08:40.348] TypeError: $ is undefined #
https://myserver/mysite/assets/js/bootstrap-collapse.js:126
line 126 of that file looks like this:
$.fn.collapse = function (option) {
I'm not sure what I'm doing wrong. Any guesstions would be appreciated.
EDIT 1
I've added in the missing jquery.js file but that hasn't resolved the issue.
The includes at the bottom of the page now looks like this:
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
The $ is a jQuery function and needs to be included before the bootstrap-collapse.js.
Try this sequence
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
check if jquery is properly loaded or not . IN Firebug or console try running "$". This type of errors comes , if jquery is not loaded before custom script or their is a conflict with other library using '$' like prototype.
Is it possible to have a textbox and a button horizontally using JQuery Mobile?
using data-inline="true" works for buttons but not when mixed with button and textbox.
data inline example
data-type="horizontal" also didn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>
<script type="text/javascript">
$(document).ready(function(){
$("#clearMeClearMe").click(function(){
//$(this).hide();
$("#clearMe22").val("");
});
});
</script>
<body>
<div data-role="page">
<div data-role="header">
<h1>Textbox Clear Demo</h1>
</div><!-- /header -->
<div id="content">
<input type="text" id="clearMe22" data-inline="true" name="clearMe22"/>
<a href="#" data-role="button" data-icon="delete"
data-iconpos="notext" id="clearMeClearMe">Clear</a>
</div>
</div><!-- /page -->
</body>
</html>
Seems to work best for me when I float the button right and restrict the width of the text input:
<span>
<input style="width:90%;display:inline-block" type="text" id="clearMe22" data-inline="true" name="clearMe22" />
<a style="float:right" href="#" class="ui-input-clear" data-role="button" data-icon="delete"
data-iconpos="notext" id="clearMeClearMe">Clear</a>
</span>
http://jsfiddle.net/xeyyr/1/
But someone else might be able to provide a more elegant CSS solution.
I'm trying to find a similar solution for a custom button, but in your case I believe you can use the built-in methods for data clear ('data-clear-btn'). You can find this documented here:
http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/textinputs/
and would look like:
<input data-clear-btn="true" name="text-3" id="text-3" value="" type="text">