Web UI Library that already handles styling for the following elements? - javascript

I'm having trouble finding a simple js web UI library that handles styling the following right out of the box:
Buttons
Listboxes
Input Boxes
Dropdown Menus
Text Areas
Checkboxes
Radio Buttons
Alert Dialogs
Modal / Non-modal Windows
I can see various libraries offering styling but so far haven't found one that handles the aforementioned all at once. The reason why I'm looking for something that already contains support for all of the above in one go is because I've had previous experiences with different frameworks / libraries conflicting with each other because they weren't from the same developer / author.
So before jumping in and trying to mix and match those that I've found, I just want to make sure I haven't missed something good.

Consider Dojo: http://demos.dojotoolkit.org/demos/themePreviewer/demo.html
All of those widgets have styling "right out of the box." If that doesn't meet your needs, maybe you could be more specific about what you're trying to accomplish.

Related

How to style a datepicker using nothing but VanillaJS, HTML and CSS

I am working on a simple web app using nothing but Vanilla JS, HTML and CSS.
I have created a form, which contains multiple input fields of type "text". Now I want to add a datepicker. I have tried adding an input field of type "date", but I really don't like the design of this datepicker and I haven't found any way of styling the calendar that pops up when clicking into this field.
My first question is: Is there a way to style the calendar of an input field of type "date"?
As I assume the answer to this question is "no", I have searched for an alternative. There are multiple GitHub projects out there, designing a calendar. One example is this. This example requires adding the html-code to my webpage. Initially, I wouldn't show the calendar-div, for example by setting its style to display: none in my css file. I would have to add a listener- to an input field of type "text" as well and then upon clicking into this field display the calendar. But this would rearrange the input fields below this "datepicker", which I don't want. Is there a way to just display the calendar and let it overlap with its surroundings, for example the input fields below this "datepicker"-field?
I would also appreciate any well known alternatives to styling datepickers with nothing but Vanilla JS, HTML and CSS, if there are any.
You have done your research and the answer is: No.
<input type="date"> or <input type="datetime-local"> are HTML inputs and its up to the browser vendor (Google, Mozilla, Apple) to decide how to render them.
If you open your dev tools and enable shadow DOM, you can even inspect the nodes created by these inputs but it's not recommended styling them.
It's a Front-end developer's life in 2022 (and perhaps more years to come) to introduce datepicker dependency or create datepicker yourself if you want to have specific look or functionality. From my experience, datepickers are not that hard to make but it's all the corner cases and localized edge cases you have to look out for. So I think it's easier to just go with a dependency.
If you don't want to bring full-fledged framework just for the datepicker then there are various options if you search for them.
You might like modern web components and you could search for date picker created with web components. These do not require any framework, just a supported browser. They usually come with their own stylesheets and JS with ability for some customization, I'd try it out.

Using a forced suggestion mechanism using JavaScript and jQuery (ASP.NET MVC project)

Yesterday I discovered that jQuery is really powerful and can do amazing things with only a few (sometimes just one) line of code, amazing! I did some animating which went really well!
So I was wondering if the following is also possible/ simple to implement with jQuery (if not, please tell me what could do this):
Basically I want a suggestion mechanism for the webapplication we are creating. We are doing this using ASP.NET MVC 4. By suggestion mechanism I mean the user gets presented with a textfield, he can start typing and based on his typing topics (I have a model class Topic with a few properties) get suggested. The user can ONLY choose out of those topics, they can't define any by themself. So I would like to generate a list based on the input (with each key tap). If they click on an item, it gets added to the box and they can choose other topics if they would want to.
I do realize that this is probably rather difficult to implement, but it would be great if I could find a tutorial or example. Preferable with JavaScript or jQuery, but if that's not possible anything will do really!
If my explanation is not clear enough: I mean something similar to the StackOverflow suggestion mechanism for tags.
If you want suggestive text field, search for html5 datalist datalist
Also take a look at JqueryUI Auto Complete
However if the options are not too much, i would go with select menu instead of text field.

JQuery facebook-like plugin to handle the add/remove of tags?

i am using the jquery-ui autocomplete feature with multiple values for tags,
The thing is that it doesn't provide the feature to handle the hidden values and display current values as buttons (with the delete button and more usability via keyboard),
I am looking for some plugin just like this one but that works with jquery and no need of mootols or prototype
Do you know if there is any?
If not i am thinking of implement it mysel, the hidden input and displaying a list with all the options i need, but some JQuery alternative to the plugin on the link will just do it for me
Well i found this one and this one and few more (not so similar to the mentioned in question) all in here (weird couldn't find them in google separately)

How to translate this Silverlight control into HTML/CSS/JS

I am in the process of converting a Silverlight app into a standard Web app (ie all HTML, CSS and JavaScript via jQuery 1.4.4). I'm not the most experienced when it comes to web development, so I am wondering what would be the best way to convert this custom Silverlight control into a web equivalent?
It boils down to just being a fancy radio button group. The user can click on any type, and only one type can be selected at a time. For the web equivalent, it needs to set a value that will get POSTed to the server.
For now I am just using a standard <select> tag which is of course functional and doesn't require JavaScript (which is nice), but ultimately is not going to fly. I will place a <select> inside of a <noscript> tag to allow non-js people to still be functional.
Can anyone recommend a good approach for tackling this? Any existing plugins/controls out in the wild I could take advantage of?
(I am using ASP.NET MVC 3, but I don't think that's very relevant here)
I would use a <ul> and make the selections a <li>. Styling is easy enough to apply to that, and there are tons of samples online.
Place a click on the li using jQuery to disable. If you are going to disable other selections, you should also include a reset/clear type function to they can choose again in case they made a mistake.
Think of them as an array of buttons. When one is clicked, all others are unselected. Draw a rectangle around the one that was clicked and set a hidden form field equal to the value you expect when the form is submitted.

Style / Replace a select box using prototype / scriptactulous

I'm trying to style my select box, I assume I need some type of javascript method.
I'm using rails - and sticking with prototype/scriptactulous.
Does anyone know of any solutions?
EDIT:
CSS doesn't do nearly what I'm trying to accomplish:
alt text http://img16.imageshack.us/img16/1373/dropdownk.png
I wrote a prototype select box control today. It allows styling everything- the select input box, the button, the dropdown box(where options are shown), the scrollbar and its buttons, the options, adding images to options. The class can replace select inputs automatically just by calling the script if select controls have class="replacemeselect" or be called manually. There are a bunch of customization options and you can have multiple styles of selects on a page if you need it. Unlike IPS this class handles keyboard events and has a scrollbar.
You may look at the demo: http://awsumlabs.com/selectreplace and use the library if you like it.
For styling select boxes you actually need js. In CSS you can style everything, but the button. The problem is that the button is os dependent and is not controlled by the browser. So maybe the man asks the right question. I'm searching for a protoype/script.aculo.us solution too. I use these frameworks and I don't want to change to mootools ot jquery.
In fact I found an interesting prototype project- IPS. http://yura.thinkweb2.com/playground/in-place-select/
There are also select multiple controls(I need select for one element only now so maybe I'll stick to ips). livepipe.net/control/selectmultiple is one of them.

Categories