I am trying to use jquery.mobile datebox as a datepicker for my jquery mobile app...
I find some difficulties finding a page with the full APIs specification...
For example, I do not fully understand the option "useInlineHideInput", but I can't find any documentation about it...
Is there any jQuery mobile datebox API documentation available?
You can find here the full options list for the latest version jQM Datebox 2.
You can find information about the useInlineHideInput option here. It seems that this option is available in jQM Datebox 1. In version 2 you can force DateBox to display inline with 'useInline' and 'hideInput' set to 'true'.
To understand the functionality of the specific option put the following HTML in a file and change the options value from true to false.
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
</head>
<body>
<div data-role="page">
<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"useInline": true, "useInlineHideInput": true}'>
</div>
</body>
</html>
I hope this helps.
Related
I am having trouble getting flipbox to work. It displays, but I can't get the day/month/year to roll or move at all. It's frozen.
Same if I change the mode to timeflipbox, or durationflipbox -- they display when I click them but don't respond to any mouse or keyboard activity.
code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Single page template</title>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css'>
<link rel='stylesheet' type='text/css' href='http://cdn.jtsage.com/datebox/latest/jqm-datebox.min.css'>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js'></script>
<script src='jqm-datebox.core.min.js'></script>
<script src='jqm-datebox.mode.flipbox.min.js'></script>
</head>
<body>
<div data-role='page'>
<div data-role='content'>
<input type="text" data-role="datebox" data-options='{"mode":"flipbox"}'>
</div>
</div><!-- /page -->
</body>
</html>
What's wrong with this code for the flipbox to be frozen? The only thing I can think of is that the js references are off, but I just downloaded them and I'm pretty sure they are current.
Any ideas?
figured it out... I just copied/pasted the css/js references from JT Sage's Datebox page source: http://dev.jtsage.com/jQM-DateBox/
In this case, hovering over the left link makes a tiny dash appear to its right (between the two links). How can I get rid of this? I see this in Safari and Chrome both, but I don't see anything in the style sheet that would make it do this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Walls</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="custo.css">
<script src="prettyPhoto_compressed_3/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="prettyPhoto_compressed_3/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="prettyPhoto_compressed_3/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
</head>
<body>
<br>
<a href="gallery.html">
<img src="test.jpg" class="testclass" alt="test" width="170" />
</a>
<a href="info.html">
<img src="test.jpg" class="testclass" alt="test" width="55" />
</a>
<div class="container-fluid">
<br>
</div><!-- .container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8"> <!--initialize prettyPhoto-->
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
</html>
If you're seeing the same thing I'm seeing (I don't have all the style sheets), you're seeing the underline of the a tag for the image.
You can just remove that using text-decoration: none on your image links;
<a href="gallery.html" style="text-decoration: none !important;">
The !important at the end of the style helps to override any selectors in your css which may have already have an !important emphasis.
Of course this is in practice better done using a class that you set on your image links.
This is an old post, but I would like to contribute to something. This will help other people why the dash (-) appears.
This is because there is an empty space inside the a tag. For example:
<a href="#">
<i>test</i>
</a>
If you set your line like this: <i>test</i> the dash/underline will disappear, but some tools might still format your code and they will add the space. So, using the css mentioned in the previous post will eliminate the issue.
I cannot get jQuery UI working in my ASP.NET MVC4 application. I tried dialog and datepicker.
Here is part of the code of my view.
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
alert('A');
//$('#datepicker').val('test');
$('#datepicker').datepicker();
alert('B');
});
</script>
<h1>Test</h1>
<form id="testForm" action="#" method="get">
<input type="text" id="datepicker" name="datepicker" class="datepicker" />
</form>
The alert A is displayed. When I uncomment the next row, the value test is assigned. But datepicker is not working and alert B does not display.
Thanks,
Petr
In the layout.cshtml view, move
#Scripts.Render("~/bundles/jquery")
from body to head and add in head too
#Scripts.Render("~/bundles/jqueryui")
I spent lots of time to figure out how to make it working.
Finally the steps are following:
Create ASP .NET MVC4 project Internet Application.
Clean some of the last lines of the _Layout.cshtml so it should look like this
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
#RenderSection("scripts", required: false)
Change header like I did here
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/themes/base/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/modernizr")
<script type="text/javascript">
$(document).ready(function () {
// We will test DataPicker
$('#datep').datepicker();
// We will test TABS
$(function () {
$("#tabs").tabs();
});
});
</script>
</head>
Delete all code after #section featured { section and add some html to Home/Index.cshtml
A. Put some code from the view source link of http://jqueryui.com/tabs/ page (It is inside of < div id="tabs" > ... < div >)
B. Add this
< div >
Date: < input id="datep" type="text" / >
< / div >
DONE!!!
Your code runs just fine in a fiddle: http://jsfiddle.net/m3QFL/
Check the console for errors and the path to your scripts. Chrome includes a console to help with js debugging or you can run FireFox and FireBug.
Either one will go a long way in helping you solve issues like this.
Also, hosted versions of jquery and jquery ui are available through jquery and jquery ui or Google. Here are yours:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
jquery ui has links at the bottom of their homepage to their hosted versions.
BTW, the // instead of http:// allows the script to pick up the http prefix from the site. If you are on ssl it will pick up the https:// so you don't have secure and non-secure items on your page.
You will need to add a couple lines to your _Layout.cshtml to get jQuery UI working out of the box. First is the javascript bundle:
#*you should already have this line*#
#Scripts.Render("~/bundles/jquery")
#*add this line*#
#Scripts.Render("~/bundles/jqueryui")
Next you need the CSS for jQuery UI as well:
#*you should already have this line*#
#Styles.Render("~/Content/css")
#*add this line*#
#Styles.Render("~/Content/themes/base/css")
I am using the jquery mobile template from visual studio. In my Layout view I have the following markup
<div data-role="page" #(Page.Id == null ? string.Empty : "id=" + Page.Id) data-fullscreen="false">
When my Browse view is rendered I want to change the data-fullscreen attibute to true. Here is the code I am attempting to use to do this..
<script type="text/javascript">
$("#indexPage").live('pageinit', function () {
alert("Code Engaged");
$("#div").attr("data-fullscreen", "true");
});
</script>
I cannot get this code to engage. Where do I place the code to engage it? The layout has several sections..
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>#Page.Title</title>
<meta name="description" content="jQuery Mobile Site">
<meta name="author" content="">
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
#*<meta name="viewport" content="width=device-width, initial-scale=1.0">*#
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<!-- jQuery Mobile Latest Styles -->
<link rel="stylesheet" href="//code.jquery.com/mobile/latest/jquery.mobile.min.css" />
#* // reference the minified version of our combined css based on whether we are in debug mode. *#
#if (jQueryMobileTemplate.MvcApplication.IsDebug)
{
#* <link rel="stylesheet" href="#Url.Content("~/css/style.css?v=2")" />*#
<link rel="stylesheet" href="#Url.Content("~/css/custom%20themes/electric1.css?v=2")" />
}
else
{
#* <link rel="stylesheet" href="#Url.Content("~/css/style.min.css?v=2")" />*#
<link rel="stylesheet" href="#Url.Content("~/css/custom%20themes/electric1.min.css?v=2")" />
}
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<!-- We put these at the top because jquery mobile applies styles before the page finishes loading -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script> window.jQuery || document.write("<script src='#Url.Content("~/js/libs/jquery-1.6.1.min.js")'>\x3C/script>")</script>
<!-- Pre jQuery Mobile init scripts for overriding defaults -->
<script>
</script>
<!-- Load jQuery Mobile from jquery cdn, get latest builds -->
<script src="//code.jquery.com/mobile/latest/jquery.mobile.min.js">
</script>
#* <!-- Optionally, load from local site -->
<script src="#Url.Content("~/js/libs/jquery.mobile-1.0b1.js")"></script>
*#
#RenderSection("HeadContent", false)
#*<script src="#Url.Content("~/js/libs/modernizr-2.0.min.js")"></script>
<script src="#Url.Content("~/js/libs/respond.min.js")"></script>*#
</head>
I tried it at the bottom of my "Browse" view as well but nothing. I just want the "Browse" view to execute this code.
The pageinit event has never properly worked for me either for some reason when I'm using asp.net-mvc. You can try using one of the page change events (pagebeforechange or pagechange) instead.
I have this simple code, like that on the official site.
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.6.2.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
</head>
<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>
Obviously in the same folder I've moved the interested files and all works ok.
But the layout is awful, because sure miss something.
My output is this:
http://imageshack.us/photo/my-images/854/wrongdate.png/
How can I solve this problem?
Thank you.
I dare say it's the style file: you probably have an incorrect path for the file or the file is corrupted. See the following two examples:
without css: http://jsfiddle.net/william/5Xa8f
with css: http://jsfiddle.net/william/5Xa8f/2/
To confirm it is the problem, simply replace jquery.ui.all.css with http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css, and see if the problem is fixed.