File
Login or Register via GitHub
<html><head><link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /><link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" /><link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" /><link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" /><link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" /><link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script><meta charset=utf-8 /><title>JS Bin</title></head><body> <section class="wide stAlone reports"> <div class="tabs"> </div> <div> <p class="tenanciesMessage"></p> <div id="divCategory" class="panelBlue tenanciesTile" data-template="tileWrapTemplate" data-bind="source: tileDataSource"></div> <script id="tileWrapTemplate" class="panelBlue" type="text/x-kendo-template"> <div class="more"> <article data-bind="attr:{class:cssArtWrap }"> <span> <h2 data-bind="text: title"></h2> #if(get("introTextCheck")){# <p data-bind="text: introText"></p> #}# <fieldset data-bind="attr:{class:cssWrap}"> #if(get("rangeSlider")){# <span class="balRangeWrap" data-template="reportsRangeSlider" data-bind="source: inputFields"></span> #}else if(get("comboBox")){# <span data-template="tenanciesComboBox" data-bind="source: inputFields"></span> #}else{# <ul id="allInputWrap" data-template="tenanciesTemplate" data-bind="source: inputFields"></ul> #}# </fieldset> </span> </article> #if(get("showMore")){# <a href="\\#" data-bind="attr: {class: cssLink} click: moreTiles, visible:isVisible"><span></span>Show More</a> #}# #if(get("showLess")){# <a href="\\#" data-bind="attr: {class: cssLink2} click: lessTiles, visible:isVisible2"><span></span>Show Less</a> #}# </div> </script> <script id="tenanciesTemplate" type="text/x-kendo-template"> <li> <input data-bind="attr: { type: type, name: name, id: id, class: cssInput, checked: #: checked#} value: value" # if (get( "required")) {# required #} # # if (get( "disabled")) {# disabled #} # # if (get( "hidden")) {# hidden #} # # if (get( "lookup")) {# lookup #} # /> <label data-bind="attr: { for: id, class: cssLabel, id: labelId }, text: label"></label> </li> </script> <script id="reportsRangeSlider" type="text/x-kendo-template"> <span> <div class="rangeSlider" style="width:290px;" data-role="rangeslider" data-min="-1000000" data-max="1000000" data-small-step="100" data-large-step="1000" data-bind="value: val, events:{change: onChange, resize: resizeSliders }"> <input /> <input /> </div> <div class="sliderInputs"> <input data-role="numerictextbox" data-min="-1000000" data-max="1000000" data-bind="value: start, events:{change: onChange}" /> <input data-role="numerictextbox" data-min="-1000000" data-max="1000000" data-bind="value: end, events:{change: onChange}" /> </div> </span> </script> <script id="tenanciesComboBox" type="text/x-kendo-template"> <input placeholder="Choose status..." data-role="combobox" data-bind="source:comboData" data-text-field="text" data-index="0" data-value-field="value" /> </script> </div> </section> </body></html>var tabsDataSource = [ { "name": "Report Filters", "id": "#tab1", "title": "Report Filters", "cssClass": "active", "content": "Content1" }, { "name": "Tenant Selection", "id": "#tab2", "title": "Tenant Selection", "cssClass": "tabLabel2", "content": "tileWrapTemplate?" }, { "name": "Transaction Selection", "id": "#tab3", "title": "Transaction Selection", "cssClass": "", "content": "Content3" }, { "name": "Display", "id": "#tab4", "title": "Display", "cssClass": "", "content": "Content4" }];var tileDataSource = [ { "id" : "1", "cssArtWrap" : "panelBlue", "title" : "Tenancies to Include", "introText" : "", "mixedFields": true, "inputFields" : [ { "id": "tenanciesInclude1", "labelId": "all", "subTitle": "", "name": "tenanciesInclude", "label": "All", "type": "radio", "value": "word", "required": false, "validationMessage": "", "disabled": false, "hidden": false, "lookup": false, "description": " ", "cssLabel": "radioLabel", "cssInput": "radioInput", "placeholder": "", "checked": "checked", "click": " " }, { "id": "tenanciesInclude2", "labelId": "active", "name": "tenanciesInclude", "label": "Active", "type": "radio", "value": " active", "required": false, "validationMessage": "", "disabled": false, "hidden": false, "lookup": false, "description": " ", "cssLabel": "radioLabel", "cssInput": "radioInput", "placeholder": "", "checked": " ", "click": " " }, { "id": "tenanciesInclude3", "labelId": "inactive", "name": "tenanciesInclude", "label": "Inactive", "type": "radio", "value": " inactive", "required": false, "validationMessage": "", "disabled": false, "hidden": false, "lookup": false, "description": " ", "cssLabel": "radioLabel", "cssInput": "radioInput", "placeholder": "", "checked": " ", "click": " " }, {"id": "tenanciesInclude4", "labelId": "all", "subTitle": "Yes or No", "name": "tenant", "label": "Yes", "type": "radio", "value": "word", "required": false, "validationMessage": "", "disabled": false, "hidden": false, "lookup": false, "description": " ", "cssLabel": "radioLabel", "cssInput": "radioInput", "placeholder": "", "checked": "checked", "click": " " }, { "id": "tenanciesInclude5", "labelId": "active", "name": "tenant", "label": "No", "type": "radio", "value": " active", "required": false, "validationMessage": "", "disabled": false, "hidden": false, "lookup": false, "description": " ", "cssLabel": "radioLabel", "cssInput": "radioInput", "placeholder": "", "checked": " ", "click": " " } ], "inputFields2" : [ { "id": "tenanciesInclude6", "labelId": "Combobox6", "name": "Combo example6", "label": "Combobox", "type": "Combobox", "value": "one", "required": false, "validationMessage": "", "disabled": false, "hidden": false, "lookup": false, "description": " ", "cssLabel": "", "cssInput": "comboInput", "placeholder": "", "checked": "", "dataRole": "combobox", "click": " ", "comboData":[ { "text" : "Ready", "value" : "1" }, { "text" : "Start", "value" : "2" }, { "text" : "Sweet", "value" : "3" }, { "text" : "Restart", "value" : "4" }, { "text" : "Already", "value" : "5" }, { "text" : "Water", "value" : "6" }, { "text" : "Bubbles", "value" : "7" } ] }, { "id": "tenanciesInclude7", "labelId": "Combobox7", "name": "Combo example7", "label": "Combobox", "type": "Combobox", "value": "one", "required": false, "validationMessage": "", "disabled": false, "hidden": false, "lookup": false, "description": " ", "cssLabel": "", "cssInput": "comboInput", "placeholder": "", "checked": "", "dataRole": "combobox", "click": " ", "comboData":[ { "text" : "Ready7", "value" : "1" }, { "text" : "Start7", "value" : "2" }, { "text" : "Sweet7", "value" : "3" }, { "text" : "Restart", "value" : "4" }, { "text" : "Already", "value" : "5" }, { "text" : "Water", "value" : "6" }, { "text" : "Bubbles", "value" : "7" } ] } ], "cssWrap": "radioGrp2" }, { "id": "2", "cssArtWrap" : "panelBlue", "title" : "General info", "introTextCheck" : true, "introText" : "Please enter your name", "inputFields": [ { "id": "fullname", "labelId": "", "name": "fullname", "label": "Full Name", "type": "text", "value": "", "required": false, "validationMessage": "", "disabled": false, "hidden": false, "lookup": false, "description": " ", "cssLabel": "inputLabel", "cssInput": "k-textbox", "placeholder": "First name...", "checked": "", "click": " " }, { "id": "age", "labelId": "", "name": "age", "label": "Age", "type ": "text", "value": "30", "min": "0" , "max": "100", "dataFormat": "n0", "required": false, "validationMessage": "", "dataRole": "numerictextbox", "disabled": false, "hidden": false, "lookup": false, "description": " ", "cssLabel": "inputLabel", "cssInput": "numericInput k-textbox", "placeholder": "Enter a number", "checked": "", "click": " " } ], "cssWrap": "sliderWrap" }, { "id": "3", "cssArtWrap" : "panelBlue", "title": "More filters for Tenancies", "comboBox": true, "inputFields": [ { "id": "thirdTileGroup1", "labelId": "Combobox1", "name": "Combo example", "label": "Combobox", "type": "Combobox", "value": "one", "required": false, "validationMessage": "", "disabled": false, "hidden": false, "lookup": false, "description": " ", "cssLabel": "", "cssInput": "comboInput", "placeholder": "", "checked": "", "dataRole": "combobox", "click": " ", "comboData":[ { "text" : "Ready", "value" : "1" }, { "text" : "Start", "value" : "2" }, { "text" : "Sweet", "value" : "3" }, { "text" : "Restart", "value" : "4" }, { "text" : "Already", "value" : "5" }, { "text" : "Water", "value" : "6" }, { "text" : "Bubbles", "value" : "7" } ] }, { "id": "thirdTileGroup2", "labelId": "Combobox2", "name": "Combo example2", "label": "Combobox2", "type": "Combobox", "value": "one", "required": false, "validationMessage": "", "disabled": false, "hidden": false, "lookup": false, "description": " ", "cssLabel": "", "cssInput": "comboInput", "placeholder": "", "checked": "", "dataRole": "combobox", "click": " ", "comboData":[ { "text" : "Hello1", "value" : "1" }, { "text" : "Hello2", "value" : "2" }, { "text" : "Hello3", "value" : "3" }, { "text" : "Hello4", "value" : "4" }, { "text" : "Hello5", "value" : "5" }, { "text" : "Hello6", "value" : "6" }, { "text" : "Hello7", "value" : "7" } ] } ], "cssWrap": "radioGrp2", "showMore": true, "showLess" : true, "showBtn1": true, "showBtn2": false, "cssLink": "moreTiles", "cssLink2": "lessTiles" }];var tabsVM = kendo.observable({ tabsDataSource: tabsDataSource});kendo.bind($('#tabsWrap'), tabsVM);$(".tabs").kendoTabStrip({ select: function(e){ var data = this.dataSource.at($(e.item).index()); var template = kendo.template($("#tileWrapTemplate").html()); $(e.contentElement).html(template(data)); kendo.bind(e.contentElement, data); }, dataTextField: "name", dataContentField: "content", dataSource: tabsVM.tabsDataSource, animation: { open: { effects: "fadeIn" } } });var tilesVM = kendo.observable({ dataSource: tileDataSource, tileDataSource: [], wrapArticle: function(){ var article = $("#divCategory article"); var items = $('div.more'); var currentItem = items.filter('.active'); var nextItem = currentItem.next('div'); for(var i = 0; i < article.length; i += 3) { article.slice(i, i + 3).wrapAll("<div />"); console.log("wrapAll called!"); } //$("#divCategory .more").not(".more:first").hide(); $('#divCategory .more:first, #divCategory .more:has(a.moreTiles):first').addClass('active'); $("#divCategory .more a.moreTiles:first").show(); $("#divCategory .more a.lessTiles").hide(); currentItem = nextItem.not(':first').removeClass('active'); $('.more').filter(function() { return $.trim($(this).text()) === ''; }).remove(); }, moreTiles: function(e){ var items = $('div.more'); var currentItem = items.filter('.active:last'); var nextItem = currentItem.nextAll('div.more').slice(0, 2); var firstShowBtn = $('a.moreTiles:visible:first'); if( nextItem ){ currentItem = nextItem.toggleClass('active'); } e.preventDefault(); console.log("Show more active!"); }, isVisible: true, isVisible2: false, /************************************************************** ************** Kendo numeric input fields ********************* **************************************************************/ numeric: function(){ var numeric = $(".numericInput").kendoNumericTextBox({ spinners : false, placeholder: 'Enter a number' //upArrowText: 'Higher' //downArrowText: 'Lower' }).data("kendoNumericTextBox"); }, show: function() { this.set("isVisible2", true); this.set("isVisible", false); }, hide: function() { this.set("isVisible2", false); this.set("isVisible", true); }, //slider config start start: -1000000, end: 1000000, val:function(){ return [this.get("start"),this.get("end")]; }, onChange:function(e){ var slider = $("[data-role='rangeslider']").data("kendoRangeSlider"); //var values = e.values; if(e.values=== undefined){ this.set("val",[this.get("start"),this.get("end")]); //this.refresh(); } else{ var values = e.values; this.set("start",values[0]); this.set("end",values[1]); } } });//tileDataSource.read();kendo.bind($("#divCategory"), tilesVM);
Output
You can jump to the latest bin by adding /latest to your URL
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + ] | Indents selected lines |
| ctrl + [ | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + shift + L | Beautify code in active panel |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Open the share options |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
JS Bin URLs
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |
public
0viewers