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">
Related
I would like to have icons instead of text on the submit buttons in the forms of my website based on w3.css.
I can easily add icons to other buttons but not to the submit buttons.
This is how far I could come:
The blue "save" button is the submit one. The green cancel button is a separate button that provides me a way to "cancel" (go back) via an href. I would like the submit button to look like the green save button, but alas I haven't found a way to replace the "save" text with a save icon (with no text).
I'm using google material icons but could use FontAwesome as well. Here's my html code:
<html>
<title>FPP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/w3.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="w3-container">
<header class="w3-container w3-blue">
<h1>Test</h1>
</header>
<div class="w3-bar w3-gray">
<i class="material-icons">home</i></button>
</div>
<br>
<form class="w3-container w3-card-8" action="/test" method="post">
<label class="w3-text-blue"><b>Test ID</b></label>
<input value="" name="test1" class="w3-input w3-border">
<br>
<label class="w3-text-blue"><b>Test Description</b></label>
<input value="" name="test2" class="w3-input w3-border">
<br>
<input class="w3-btn w3-blue" type="submit" value="save">
<i class="material-icons">save</i>
<i class="material-icons">cancel</i>
</form>
</div>
</body>
</html>
Any suggestons will be welcome :-)
Replace
<input class="w3-btn w3-blue" type="submit" value="save">
with
<button type="submit" class="w3-bar-item w3-button w3-green"><i class="material-icons">save</i></button>
You can use button for that, just wrap it in form and add action="#" to go to your page.
<form action="gothere.html">
<button type="submit" class="w3-btn w3-blue">
<i class="fa fa-id-badge" aria-hidden="true"></i>
</button>
</form>
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
I'm starting to play with javascript for the first time and I turned the index.html of a steroids project into a simple login form but the content is going below the header. I've also tried the <ionic-header-bar><ionic-content> tags but none works. What am I missing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width">
<title>Gestor de Mesas</title>
<link rel="stylesheet" href="/components/ionic/css/ionic.min.css" />
<link rel="stylesheet" href="/stylesheets/application.css" />
<script src="/javascripts/onerror.js"></script>
<script src="/javascripts/console.log.js"></script>
<!-- cordova.js is served from localhost to ensure the correct version -->
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/javascripts/application.js"></script>
</head>
<body class="content">
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Lembrar?
</li>
</div>
<button class="button button-positive">
Entrar
</button>
</ion-content>
</body>
</html>
Try adding Class "has-header" to your tag. It'll solve the issue. This is because :
ion-header-bar is positioned absolutely. and hence your lower content goes behind it. .has-header class defines top : 44px, which will move your content down with the required space.
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 am using kendo ui Mobile ModalView in my aspx page but i am unable to get the required output.On click of button it is showing the same page. I am new to Kendo ui. Please anyone help me.please refer kendo ui mobile modal view and suggest me how to use it in my project.
My code is
<head runat="server">
<title>Untitled Page</title>
<link href="CSS/kendo.common.css" rel="stylesheet" type="text/css" />
<%--<link href="CSS/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />--%>
<link href="CSS/kendo.default.css" rel="stylesheet" type="text/css" />
<link href="CSS/kendo.mobile.all.css" rel="stylesheet" type="text/css" />
<link href="CSS/Example.css" rel="stylesheet" type="text/css" />
<script src="Js/jquery1.7.1.min.js" type="text/javascript"></script>
<script src="CSS/kendo.min.js" type="text/javascript"></script>
<script type="text/javascript">
function closeModalViewLogin() {
$("#modalview-login").data("kendoModalView").open();
}
</script>
<script type="text/javascript">
var app = new kendo.mobile.Application(document.body);
</script>
</head>
<body>
<form id="form1" runat="server">
<div data-role="view" id="modalview-camera" data-title="HTML5 Camera">
<img src="../../content/mobile/modalview/lens.png" class="camera-image" /><br />
<a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-
button">Login</a>
</div>
<div data-role="modalview" id="modalview-login" style="width: 95%; height: 80%;">
<div data-role="header">
<div data-role="navbar">
<span>Login</span>
<a data-click="closeModalViewLogin" data-role="button" data-
align="right">Cancel</a>
</div>
</div>
<ul data-role="listview" data-style="inset">
<li><label for="username">Username:</label> <input type="text" id="username" />
</li>
<li><label for="password">Password:</label> <input type="password" id="password" />
</li>
</ul>
<a data-click="closeModalViewLogin" id="modalview-login-button" type="button" data-
role="button">Login</a>
<a data-click="closeModalViewLogin" id="modalview-reg-button" type="button" data-
role="button">Register</a>
</div>
</form>
</body>
If you look at the example of the code you have used as starting point # http://demos.kendoui.com/mobile/modalview/index.html - you will find out that position of script tags with calls to Kendo framework are located at the bottom of the body tag, if you place them above the body as is shown in your example code, at that stage there is nothing to execute the script on. You need to move them at the correct place. Alternatively use jQuery ready command and call Kendo scripts from there.
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
Additionally, you can initialize the mobile application on the form, instead of the body, since the Views should be direct descendants of the application element.
Change code as per requirements
<html>
<head runat="server">
<title>Model view sample</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.mobile.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script type="text/javascript">
function closeModalViewLogin() {
$("#modalview-login").data("kendoModalView").open();
}
</script>
</head>
<body>
<div data-role="view" id="modalview-camera" data-title="HTML5 Camera">
<a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-button">Login</a>
<div data-role="modalview" id="modalview-login" style="width: 95%; height: 80%;">
<div data-role="header">
<div data-role="navbar">
<span>Login</span>
<a data-click="closeModalViewLogin" data-role="button" data-align="right">Cancel</a>
</div>
</div>
<ul data-role="listview" data-style="inset">
<li>
<label for="username">Username:</label>
<input type="text" id="username" />
</li>
<li>
<label for="password">Password:</label>
<input type="password" id="password" />
</li>
</ul>
<a data-click="closeModalViewLogin" id="modalview-login-button" data-role="button">Login</a>
<a data-click="closeModalViewLogin" id="modalview-reg-button" data-role="button">Register</a>
</div>
</div>
<script type="text/javascript">
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
This works fine.
Note
1: Model view should always use within <div data-role="view" ...>...</div>
2: Intialize kendo mobile application after document to be ready
(i.e var app = new kendo.mobile.Application(document.body))