I'm just starting out in Angular, and I get the MVC model for organizing data architecturally, but I'm not sure about building custom UI elements without using jQuery (or vanilla js).
For example, I want to build a custom slider, sort of like a progress bar that a user can click (or touch) and drag to change the value. Is angular built for that, or would it require a hack-y solution? Would it be some combination of mouseover, mousedown, mousemove, mouseup events?
AngularJS has its own lite version of jQuery. The document is here: http://docs.angularjs.org/api/angular.element
It is not supposed to handle heavy DOM manipulation and it will not support such thing in the future. If you want to build a custom slider, there is a plug-in called angular-ui: http://angular-ui.github.io/
However, Angular-ui uses jQuery as well. I also notice they don't have a built-in slider component, so my suggestion is that first you should use angular.element, if this cannot satisfy whatever you need, use jQuery.
Related
I would like to have a JQuery Tree display my directories and files on my system in the tree format through one of these, where if I click on a text file, the actual file will open on a new page/same page. Do the JQuery Tree plugins support that feature as I wasn't able to see an example where it did. Also for my purpose which one of the JQuery plugins would be wisest to implement?
I used jsTree in a project where I bound click, right click, and double click events to each element using the usual jQuery .bind() method. You can bind an event to the nodes, get the related URL, and load the page.
I can't speak for the other plugins, but it was fairly painless to bind such events to jsTree.
I'm trying to get dropdownchecklist jquery plugin working with ko. I've wired up custom binding handler but dropdown won't populate with options. Please check my fiddle: http://jsfiddle.net/amitava82/wMH8J/11/
Appreciate your help. Thanks!
This is because you create dropdown before binding KnockoutJS. How does this dropdown work? It creates additional divs and spans which copy the content of select and create nice looking list. After that bindings are applied and they modify the select (as they should), but dropdown is not updated, because this library is kind of static, i.e. it copies the content of select only at the time of calling.
I've updated your jsFiddle so you can see temporary fix. What I mean is that it works now, the binding is applied before creating dropdown. The only problem is that changing options field in viewModel won't affect the dropdown. What you probably need to do is to use subscribe method. You have to monitor changes to options field and if they occur you have to recreate the dropdown. That's an easy way at least.
#freakish answer will work for most static content, but for anything dynamic using templates, for example if or foreach bindings, or you need to support underlying data updates, such as more checkbox options "suddenly" becoming available, it will not work.
An example of a really simple $.button binding apply which can be used to wrap the more simple jQuery calls. It's a simple matter of adding more members to controls to make them available in bindings.
The case with jQuery Dropdown Check List is a bit tricky however, since you obviously want to use the built in options handler, but you need to run $.dropdownchecklist after the options handler has run, as it creates the DOM elements that jQuery depends on. By wrapping the built in options handler, we are always called in the correct context.
In my experience of usage (our project makes use of about 10-15 custom bindings), you'll average about 10-20 lines of actual JS. If you start ballooning into +100 lines, I find it's a good idea to refactor, and rethink. I hope this helps some :-) I've been using Knockout for a few months now at a major UI implementation project at work, I've really learned alot, and I'm amazed at this stuff.
I have an application with many forms which contain checkboxes that disable sections of the form when unchecked. To make these forms easier to maintain, I'd like to create a single method which I can use to "disable" a container (e.g. a DIV containing form UI), where "disable" means:
all form input fields are disabled (using the HTML disabled attribute)
all text is "diabled" by turning it gray (#999)
no elements (especially jQuery widgets like tabs) will respond to keyboard or mouse input
For #1, I'm using jQuery to apply the disabled attribute to every input, select, and textarea. Easy.
For #2, I'm applying a CSS class (.disabled {color:#999 !important}) to the container. For my own controls (e.g. link buttons), I'm adding extra CSS rules to handle extra disabling actions, like turning backgrounds a different color like real buttons do.
But for jQuery UI widgets, is there a generic way to "disable" them so I won't have to build separate CSS classes and/or script to handle disabling each different kind of widget? For example, can I apply a particular class or call a specific method to disable any kind of jQuery UI widget which follows the jQuery UI coding standards?
I'm also stuck on #3. What's a generic way to prevent HTML inside a container from responding to any keyboard or mouse input, especially including jQuery UI widgets?
I created a jquery widget to do just that. I just put it on Github. I am using it in an application where I work and it is doing great.
You're free to try it out if you'd like. ( http://dougestep.com/dme/jquery-disabler-widget ).
It seems that the widget factory, used as the basis for all jQuery UI widgets, at least tries to bake in some disabled support that you can use like so:
$(dialogEl).dialog("disable");
The base functionality adds the ui-state-disabled class and the aria-disabled attribute, and doesn't fire any handlers.
It's possible some widgets don't override this correctly for their particular cases; you'd need to test. But it seems likely this will work in most cases.
Alternatives:
You might get some mileage out of applying the ui-state-disabled class, but it will likely only work for styling, and not prevent any response.
One way of preventing responses in some browsers is pointer-events: none, but that's not cross browser and kind of a hack (for example, not sure if it has the keyboard behavior you want).
The best way is to put an invisible overlay on top of everything that has onclick and onmouseover events that just return false. It can be somewhat awkward, but it's certainly the most effective.
I'm trying to clone form components using JQuery's .clone() (actually, I'm cloning a collection of fields by cloning the container element). Everything worked out well except that the datefield, comboboxes are not working, even the validation for minLength, etc. is also not working.
By the way, I'm just transforming an old html form fields to ext js form fields using applyTo
The problem is that jQuery clone() does not clone the event handlers
associated with DOM elements. But even if you use clone(true), that
does copy the event handlers, it still doesn't work, because you also
need to clone the Ext object on the JavaScript side.
You really need to use the tools provided by Ext to create many
similar controls. A good start is to create custom Ext components,
that you can then more easily instanciate multiple times.
For a start you can try using
.clone(true)
so all event handlers for an element are copied. Apart from that I suspect Extjs does some other funky stuff when building its controls therefore this is probably only the first step to getting it working. Looking around quickly on the extjs forums I dont see alot of info about cloning widgets.
I have a custom built ajax [div] based dynamic dropdown.
I have an [input] box which; onkeyup, runs an Ajax search which returns results in divs and are drawn back in using innerHTML. These divs all have highlights onmouseover so, a typical successful search yields the following structure (pardon the semi-code):
[input]
[div id=results] //this gets overwritten contantly by my AJAX function
[div id=result1 onmouseover=highlight onclick=input.value=result1]
[div id=result2 onmouseover=highlight onclick=input.value=result2]
[div id=result2 onmouseover=highlight onclick=input.value=result2]
[/div]
It works.
However, I'm missing the important functions behind regular HTML elements. I can't keyboard down or up between "options".
I know javascript handles keyboard events but; I haven't been able to find a good guide. (Of course, the follow-up question will end up being: can I use <ENTER> to trigger that onclick event?)
What you need to do is attach event listeners to the div with id="results". You can do this by adding onkeyup, onkeydown, etc. attributes to the div when you create it or you can attach these using JavaScript.
My recommendation would be that you use an AJAX library like YUI, jQuery, Prototype, etc. for two reasons:
It sounds like you are trying to create an Auto Complete control which is something most AJAX libaries should provide. If you can use an existing component you'll save yourself a lot of time.
Even if you don't want to use the control provided by a library, all libraries provide event libraries that help to hide the differences between the event APIs provided by different browsers.
Forget addEvent, use Yahoo!’s Event Utility provides a good summary of what an event library should provide for you. I'm pretty sure that the event libraries provided by jQuery, Prototype, et. al. provide similar features.
If that article goes over your head have a look at this documentation first and then re-read the original article (I found the article made much more sense after I'd used the event library).
A couple of other things:
Using JavaScript gives you much more control than writing onkeyup etc. attributes into your HTML. Unless you want to do something really simple I would use JavaScript.
If you write your own code to handle keyboard events a good key code reference is really handy.
Off the top of my head, I would think that you'd need to maintain some form of a data structure in the JavaScript that reflects the items in the current dropdown list. You'd also need a reference to the currently active/selected item.
Each time keyup or keydown is fired, update the reference to the active/selected item in the data structure. To provide highlighting information on the UI, add or remove a class name that is styled via CSS based on if the item is active/selected or not.
Also, this isn't a biggy, but innerHTML is not really standard (look into createTextNode(), createElement(), and appendChild() for standard ways of creating data). You may also want to see about attaching event handlers in the JavaScript rather than doing so in an HTML attribute.