Scroll Header

by Alexey Sharifullin

HTML

<div id="jqxInputX" />

<div style="margin-left: 300px;" id="log"></div>
<div><input type="button" value="show value" id="showValue"/></div>

CSS

.delButton {
    cursor: pointer;
    font-family: sans-serif;
    padding: 2px 2px 2px 2px;
}

JavaScript

function jqxInputX(settings, id) {
    this.settings = settings;
    this.settings.width = settings.width - 25;
    this.id = id;
    this.init();
}

jqxInputX.prototype.init = function() {

    $("#"+this.id).append("<input id='" + this.id + "_in' /><span class='delButton' id='" + this.id + "_del' >x</span>");
    var inputId = "#" + this.id + "_in";
    $(inputId).jqxInput(this.settings);
    $("#" + this.id + "_del").on("click", function(){
        $(inputId).jqxInput('val', '');
    });

}

(function( $ ){

    var methods = {
        init : function(options) {

        },
        show : function( ) {    },// IS
        hide : function( ) {  },// GOOD
        update : function( content ) {  }// !!!
    };

    $.fn.jqxInputXX = function(methodOrOptions) {
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.jqxInputXX' );
        }    
    };
})( jQuery );

    var countries = new Array(
      {name: "Marina", id:1},
      {name: "Alexey", id:2}
    );


new jqxInputX({placeHolder: "Enter a Country",
    height: 25,
    width: 200,
    minLength: 1,
    source: countries,
    displayMember: "name",
    valueMember: "id",
    theme: 'energyblue'}, "jqxInputX");

$("#showValue").jqxButton({});
$("#showValue").on("click", function() {
    $("#log").append(JSON.stringify($("#jqxInputX_in").jqxInput('val')));
});
$('#input').on('change',
function () {
    $("#log").html("Bind to the change event");
});