I am using Jquery Ui plugins jquery-1.3.2.min.js and jquery-ui-1.7.1.custom.min.js
and now i want to use animate() and tootip() methods to my code. Is these 2 plugins are sufficient to work with these. please let me know if any further things i need to add to use animate() and tootip() methods
you will need tooltip dependent and I dont know exactly what you made using in jquery-ui-1.7.1.custom.min.js because you made it. As far as .animate is concerned you need the jquery-1.3.2.min.js which you have
Related
I've got a full bore copy of jQuery UI in the app, so it doesn't matter if I'm loading from the CDN or locally, all I know is it's loaded. (because if we load from the CDN our only option is to monkeypatch the live version, yes?)
I see from: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.progressbar.js that this.min is unfortunately not a settable option (this.options.max in contrast). I need this.min to be -1 in my case (and yes, application wide, we have discussed this internally on the team and we understand the reason for the jQuery decision, we just need it to be otherwise), so my only options seem to be to monkeypatch the prototype or maintain my own plugin. I also see that they are using the "widget" architecture now, for loading the jQuery UI objects.
In this particular application, my scripts are roughly loaded like so:
/javascripts/lib/jquery.min.js
/javascripts/lib/jquery-ui.min.js
...
/javascripts/company.utils.js
/javascripts/company.helpers.js
...
page level includes of javascript libraries
...
page level javascript
So I'm thinking of going into company.utils.js and define a monkeypatch like so:
$.ui.progressbar.prototype.min = -1;
However, I'm curious if this is the right way to monkeypatch this object. Pretty sure it is, but thought I would ask the wider StackOverflow community, and offer something googlable for future searchers.
Yes, that's correct. Alternatively, if you're using jQuery UI 1.9, you can use the widget factory to define your extension:
$.widget( "ui.progressbar", $.ui.progressbar, {
min: -1
});
Though it is slightly more verbose.
Can I trigger a code completion menu in a Sublime Text 2 snippet? I want a tab stop to display a completion menu with options instead of just highlighting the text.
For example, tabbing once in this snippet will highlight _link. Instead of just highlighting _link, it is possible to display a completion menu with other options like _selector, _content, and make a choice?
<snippet>
<content><![CDATA[it \{ should${1:_not} have${2:_link} \}]]></content>
<tabTrigger>it</tabTrigger>
<scope>source.ruby</scope>
<description>it { should_? have_? }</description>
</snippet>
Well, what you want is not really possible. However, you could set up a macro that would (1)insert a snippet and (2) activate autocomplete, but I don't think that's really what you want since you can't have custom options that way. You could also consider doing what the ZenCoding plugin does. The plugin will have a tabstop that like this: ${1:option1/option2/option3}. This will at least have the options displayed but they won't really allow for easy selecting and can get really busy fast. You're other option is just to have snippets for your common options and setting the scopes accordingly. For example, where it says <scope>...</scope>, you can specify a specify position where the snippet will apply instead of the just the default source.language. For more about scopes, I suggest you consult the docs here. Using this method might be the easiest and best way. That way in your snippet you could just trigger the autocomplete and the options will include your snippets. A few other options to look into could be creating a .sublime-completions file with a custom scope, or making something similar to Packages/HTML/html_completions.py.
Intro:
I'm trying out LESS in an asp.net mvc environment.
I use dotless for server side processing (and I wouldn't want to use client side processing especially afer publishing the complete project).
I have to apply a design where there are different color schemes depending on different things (e.g. time of the day).
Less felt very powerful in this case as designing a parameterized css and only changing like 10 variables at the beginning of the file for every theme was really uplifting.
Problem:
But I would need to somehow change the color themes from an outside parameter.
Ideas:
First I thought that an URL parameter like style.less?theme=fuschia would be good, but I found no way to parse something like this.
Then I thought that making a very short blue.less, green.less, orange.less consisting only declared color variables, and including the main.less in every one of them would be a solid solution.
I had no chance to try out the second solution, but I thought this would be a good time to ask for advice on the most robust way of doing this.
The problem again is: I want to control some things in my less file from the outside.
Yes you can (because I implemented that feature for exactly that reason).
Dotless supports parameters from the outside via the querystring parameter.
<link rel="stylesheet" href="style.less?foo=bar" />
Will let you use the following less:
#foo = bar;
The parameter injection code is very simple. it just prepends the variable declarations to your normal less file, so anything that comes as a querystring parameter will follow the above syntax.
The code in question is very simple: https://github.com/dotless/dotless/blob/master/src/dotless.Core/Engine/ParameterDecorator.cs
AFAIK, you cannot pass parameters for dotnetless to use to do the compile.
As a suggestion, why not just call different less files? This would be fairly easy to do by using a Viewbag property.
To make the different less ones, You first create a less file with each set of colors in them. Then you import your base css file. dotnetless will merge the color definations in the parent file with the usages in the base file. So you have something like -
#baseGray: #ddd;
#baseGrayDark: darken(#baseGray, 15%);
#baseGrayLight: lighten(#baseGray, 10%);
#import "baseCss.less";
I just tested this on and MVC3 project and it works.
I need to make a field with 2 columns in it. Instead of overriding the layout() and draw() methods, I'm looking for something easier, something like using HorizontalFieldManager. Is that possible?
You can use Blackberry Advanced UI Toolkit containers
com.blackberry.toolkit.ui.container.TwoColumnField
com.blackberry.toolkit.ui.container.TwoColumnFieldManager
Use GridFieldManager for that. See the Java Development Guide "Create a grid layout"
I'm working on my first very complex JQuery based application.
A single web page can contain hundreds of JQuery related code for example to JQueryUI dialogs.
Now I want to organize code in separated files.
For example I'm moving all initialization dialogs code $("#dialog-xxx").dialog({...}) in separated files and due to reuse I wrap them on single function call like
dialogs.js
function initDialog_1() {
$("#dialog-1").dialog({});
}
function initDialog_2() {
$("#dialog-2").dialog({});
}
This simplifies function code and make caller page clear
$(function() {
// do some init stuff
initDialog_1();
initTooltip_2();
});
Is this the correct pattern?
Are you using more efficient techniques?
I know that splitting code in many js files introduces an ugly band-bandwidth usage so.
Does exist some good practice or tool to 'join' files for production environments?
I imagine some tool that does more work than simply minimize and/or compress JS code.
Some suggestions I might add:
keep all your variables in a globally available, multi-structured object, something like: MyVars = { dialogs: {}, tooltips: {} } and then use that across all your scripts
use call or apply methods for dynamically calling custom function names,if you perhaps want to keep the above object lightweight
For tidying things up, you could read this: http://betterexplained.com/articles/speed-up-your-javascript-load-time
This sounds fairly okay too me. Just two notes:
Use descriptive method names. "initDialog_1" doesn't tell you anything about the dialog it initializes.
While keeping JS code split into several files eases development it harms the felt performance of your interface. You could merge all files into one during build/deployment/runtime of your app. How to do it best heavily depends on your environment though.
I'm working on something fairly complex in JS right now, and have been wondering the same thing. I looked at various "module" implementations but while they look "cool" they don't seem to offer much value.
My plan at this point is to continue referencing lots of script files from my .html page (the plan is to only have one .html page, or very few).
Then when I'm building the release version, I'll write a very simple tool to fit into my build process, which will discover all the scripts I reference from the .html pages and concatenate them into one file, and replace the multiple <script> elements with a single one, so that only one request is necessary in the "release" version.
This will allow the compression to work across all the script text instead of on each separate file (like doing tar followed by gzip) and should make a difference to the script download time (though I should stress I haven't actually implemented it yet).
You usually want to keep all of your javascript inside one file. Less HTTP requests is usually better. If you take a look at the jQuery source, you'll notice that every function and property is right there in the jQuery global object:
jQuery.fn = jQuery.prototype = {
init: function(){ ... },
animate: function() { ... },
each: function() { ... },
// etc
}
However, the pattern you seem to be interested seems similar to the "module" pattern. The YUI framework uses this pattern, and allows developers to "require" different components of the library from the core module via HTTP request. You can read more about YUI here:
http://developer.yahoo.com/yui/3/yui/