Article by me at Medium.
How to reduce Product Development Risk - Reduce your idea to its core function.
How to reduce Product Development Risk - Reduce your idea to its core function.
My saga in the realm of Software Engineering.
$(document).ready(function() { var viewport = new JX.Viewport({ css: {padding: '0px', margin: '0px'}, items: [{ height: 50, css: {backgroundColor: '#aaaaaa', padding: '20px'}, text: $('#north').text(), fitWidth: true },{ jxtype: 'columncontainer', fitHeight: true, items: [{ text: $('#east').text(), width: 150, css: {backgroundColor: '#cccccc', padding: '20px'}, fitHeight: true },{ text: $('#center').text(), fitWidth: true, css: {backgroundColor: '#eeeeee', padding: '20px', overflow: 'hidden'}, fitHeight: true },{ text: $('#west').text(), width: 150, css: {backgroundColor: '#cccccc', padding: '20px'}, fitHeight: true }] },{ height: 50, css: {backgroundColor: '#aaaaaa', padding: '20px'}, text: $('#south').text(), fitWidth: true }] }); });
$(document).ready(function() { var loginbox = new JX.Container({ width: 200, css:{ background: 'lightcyan', border: '1px solid darkblue', padding: '20px', fontSize: '12px', fontFamily: 'Arial, Helvetica', fontWeight: 'bold', color: 'darkblue' }, appendTo: document.body, items: [{ text: 'Enter your User Name' },{ jxtype: 'input', attr: {type: 'text'}, fitWidth: true },{ text: 'Enter your Password' },{ jxtype: 'input', attr: {type: 'password'}, fitWidth: true },{ jxtype: 'input', attr: {type: 'button', value: 'Login'} }] }); loginbox.doLayout(); });
$(document).ready(function() { var mybutton = new JX.Component({ jxtype: 'div', text: 'Click Me', width: 100, css:{background: 'darkblue', color: 'lightblue', textAlign: 'center'}, appendTo: document.body, click: function() { alert("You clicked a button with text: " + $(this).text()); }, hover: [ function() { $(this).css({cursor: 'pointer', opacity: '0.5'}) }, function() { $(this).css({cursor: 'default', opacity: '1'}) } ] }); });
JX.Component = function() { if (JX.isObject(arguments[0])) { var config = arguments[0]; config.jxtype = config.jxtype ? config.jxtype : 'div'; // default type is div JX.Component.superclass.init.call(this, document.createElement(config.jxtype)); this.applyConfig(config); } else JX.Component.superclass.init.apply(this, arguments); }; JX.extend(JX.Component, jQuery, { applyConfig: function(config) { for (var key in config) { var a = JX.isArray(config[key]) ? config[key] : [config[key]]; eval('this.' + key + '.apply(this, a)'); }; }, jxtype: function(jxtype) { this._jxtype = jxtype; } });
function buttonFactory(config) { var buttonconfig = jQuery.extend({ jxtype: 'div', width: 100, appendTo: document.body, click: function() { alert("You clicked a button with text: " + $(this).text()); }, hover: [ function() { $(this).css({cursor: 'pointer', opacity: '0.5'}) }, function() { $(this).css({cursor: 'default', opacity: '1'}) } ] }, config); return new JX.Component(buttonconfig); }; $(document).ready(function() { var mybutton = buttonFactory({ text: 'Click Me', css:{background: 'darkblue', color: 'lightblue', textAlign: 'center'}, }); });
var myobject = new jQuery();
extend(MyClass, jQuery);
this.addClass('classname');
this.click(function() {alert('you clicked me')});
var JX = {
extend: function(bc, sc, o) {
var f = function() {};
f.prototype = sc.prototype;
bc.prototype = new f();
bc.prototype.constructor = bc;
bc.superclass = sc.prototype;
for (var m in o)
bc.prototype[m] = o[m];
}
};
JX.Component = function() {
JX.Component.superclass.init.apply(this, arguments);
};
JX.extend(JX.Component, jQuery, {});
$(document).ready(function() {
var mydiv = new JX.Component(document.createElement('div'));
mydiv.text("Hello World").click(function(){alert("You Clicked Me!")});
mydiv.appendTo(document.body);
);
JX.Button = function() {
JX.Button.superclass.constructor.apply(this, arguments);
this.initialize();
};
JX.extend(JX.Button, JX.Component, {
initialize: function() {
var component = this;
this.hover(
function() {
component.css({cursor: 'pointer', opacity: '0.5'})
},
function() {
component.css({cursor: 'default', opacity: '1'})
}
);
this.click(function() {
alert("You clicked a button with text: " +component.text());
});
}
});
$(document).ready(function() {
var mybutton = new JX.Button(document.createElement('div'))
.text("Click Me")
.css({background: 'darkblue', color: 'lightblue', textAlign: 'center', width: '100px'})
.appendTo(document.body);
});
document.onkeydown = function(e) {handleKeys(e)}
document.onkeypress = function(e) {handleKeys(e)}
var nonChar = false;
function handleKeys(e) {
var char;
var evt = (e) ? e : window.event; //IE reports window.event not arg
if (evt.type == "keydown") {
char = evt.keycode;
if (char < 16 || // non printables
(char > 16 && char < 32) || // avoid shift
(char > 32 && char < 41) || // navigation keys
char == 46) { // Delete Key (Add to these if you need)
handleNonChar(char); // function to handle non Characters
nonChar = true;
} else
nonChar = false;
} else { // This is keypress
if (nonChar) return; // Already Handled on keydown
char = (evt.charCode) ?
evt.charCode : evt.keyCode;
if (char > 31 && char < 256) // safari and opera
handleChar(char); //
}
if (e) // Non IE
Event.stop(evt); // Using prototype
else if (evt.keyCode == 8) // Catch IE backspace
evt.returnValue = false; // and stop it!
}