I'm using the theme provided by themeRoller in my personal mobile web application.
The issue I'm facing is when I use checkbox in <li> clause.
Probably, if we want to use themeRoller checkbox we write it like:
<label><input type="checkbox" />checkbox</label>
Above example displays the checkbox as I want but when I use the same code in <li> it doesn't keep the same.
Related
How to add datepicker in MVC without jQuery
There's no built in Datepicker in MVC. The nearest to a built-in datepicker would be the HTML 5 datetime input type
<input type="datetime " value="" />
which may show a datepicker in certain browsers, but this may not be supported across all your target browsers and is limited to how you can style it.
In light of this, you may want to look at a JavaScript based datepicker.
I don't think you can no, although when running in Chrome it will allow you to pick dates using a datepicker
I am using jquery mobile .I need to show date picker on clicking the text field,along with i need to hide keyboad on clicking the date text field. As a default functionality keyboard is open when user click textfield keyboard is open but i need to only open date picker on clicking the text field..Here is code.
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;" >Date:</label>
<input name="text-12" id="documentCaseDate" value="" type="text">
</div>
If required to have a Datepicker in jquery mobile why not have a use of Jquery Mobile Datebox...
It is a Date UI for jquery mobile framework, has got of other features like...
Multiple Data-Entry Modes
4 Different display modes
Fully localized
Supports data-limiting of input
Automatically parses hand-entered or pre-entered dates on open
Auto-bind's to data-type='datebox', options are configurable via data-options.
Full Plugin can be download from Jquery Mobile Datebox and homepage could be refered as Jquery Mobile Datebox Homepage....
Thanks...
I am using telerik DatePicker in my MVC3 project like :-
<ul class="floatleft width25">
<li>
<%: Html.LabelFor(model => model.AppointmentDate)%>
<%: Html.Telerik().DatePickerFor(model => model.caseSearchRequest.AppointmentDate).OpenOnFocus(true).ShowButton(true)%>
</li>
</ul>
Please tell mo how i to add a image for opening calendar for this datepicker.
Are you looking to change the icon which comes with each DatePicker? This can easily be done by just modifying the sprite.png file which is tied to each of the provided Telerik skins. Just open up that file (located in the [install directory]/content/[version number]/[skin name]/) in your favorite image editor and change the icon around.
If for some reason this icon is not being displayed at all then I believe there are issues related to the CSS files not being sent to the client. I would use the Developer Tools of the browser to check if any issues appear with sprite.png not getting downloaded properly.
Info:
I am using JQuery Mobile (in Phonegap) for building pages and navigating via them by $.mobile.changePage() or hash.
This is JQuery Mobile page anatomy:
<div id="foo" data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
Problem:
I am looking for XUI.js page anatomy, because there is really poor documentation about this library.
As Phill said, XUI isn't designed for managing DIVs as "pages", but it can be done. Andrew Lunny has built a lightweight page control in his starter application. You can inspect the source on Github and see how he converts the DIVs to pages. It requires a combination of CSS and setting classes on the DIVs in question.
Again; jQueryMobile is designed very specifically to do this all for you. XUI is not.
Does anyone use jQueryUI (such as the CSS framework part) without the jQuery component? If you were catering for users who don't have javascript or who have it disabled etc
A particular scenario would be the dialogs which are so brilliant and simple...without javascript its just a div though...would a potential solution be to have the dialog div with a class that positions it absolutely and above other elements and then to remove that class when jQueryUI sets up the dialog...so that if javascript cannot run the dialog still has the class?
or would you use the css framework to create the dialog manually perhaps...
I have used jQuery UI's classes to style things 'consistently' when JavaScript is turned off. You just use the classes that jQuery UI applies to elements, and include the jQuery UI stylesheet and resources.
For example, if you had
This is a button
And you ran the jQuery UI JavaScript:
$("#abutton").button();
It would alter the markup to:
<a href="#" id="abutton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
<span class="ui-button-text">This is a button</span>
</a>
Giving you a nice jQuery UI button. But only once the JavaScript has run will this be applied. If a user doesn't have/allow JavaScript, then you'll get an ugly link being used. Instead, you should use the jQuery UI classes at the start:
This is a button
It will have the basic jQuery UI styling before the JavaScript runs (the structure is different though - the span isn't there, and if you had the span initially it adds another one anyway, which IMHO is a bug). The thing is that you want the JavaScript to run still, because it adds other things, such as mouseover effects (and the span mentioned earler), so that users that DO have JavaScript get the full experience, but you also want to use jQuery UI classes by default because you want some consistent theme (even if it's not 100% perfect).
For more info about their CSS framework, check out http://jqueryui.com/docs/Theming/API.
If you want to have it to NOT use JavaScript, you'd have to have:
Initial page, does a post back
Server decides a popup needs to be done, renders the view with a dialog containing all the relevant dialog classes set.
User clicks button on popup, performing another post back.
Server renders view without the popup.
It is ugly, but you can't do dynamic HTML without scripting, right...
I use the CSS all the time outside of jQueryUI; I find it provides a much more consistent look-and-feel.
As for the rest of the question...whatt?!
and then to remove that class when jQueryUI sets up the dialog
How do you plan on having jQueryUI run ("set up the dialog") without JavaScript being enabled? If you put the dialog up without JavaScript, it won't be able to move or close; you'll be stuck with a giant div in the middle of the screen.