You can use the Mobiscroll Knockout API in your projects with KO data-binding.
Make sure to have Mobiscroll installed and loaded in your project. See examples (HTML & JS snippets) that you can grab and try locally.
Calendar
HTML
<input type="text" data-bind="mobiscroll.calendar: myCalendar">
JS
var ViewModel = function () {
this.myCalendar = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Calendar.
Color
HTML
<input type="text" data-bind="mobiscroll.color: myColor">
JS
var ViewModel = function () {
this.myColor = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Color picker.
Date & Time
HTML
<input type="text" data-bind="mobiscroll.datetime: myDatetime">
JS
var ViewModel = function () {
this.myDatetime = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for Date & Time.
Event Calendar
HTML
<input type="text" data-bind="mobiscroll.eventcalendar: myEventcalendar">
JS
var ViewModel = function () {
this.myEventcalendar = ko.observableArray([{
d: new Date(2016, 5, 13),
text: 'Something important'
}, {
d: '12/25',
text: 'Christmas'
}]);
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Event Calendar.
Forms
HTML
<form id="myForm" data-bind="mobiscroll.form">
<label>
Username
<input name="username" data-bind="value: username">
</label>
<label>
Password
<input name="password" data-bind="value: password" type="password">
</label>
<button type="submit">Sign In</button>
</form>
JS
var ViewModel = function () {
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Forms.
Image
HTML
<ul data-bind="mobiscroll.image: selectedValue, mobiscroll.options: {enhance: true}">
<li data-val="Share" data-icon="share">
<p>Share</p>
</li>
<li data-val="Delete" data-icon="remove">
<p>Delete</p>
</li>
</ul>
JS
var ViewModel = function () {
this.selectedValue = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Image.
Listview
HTML
<ul data-bind="mobiscroll.listview: listOfThings">
<li data-bind="text: $data" ></li>
</ul>
<button data-bind="click: addTodo">Add</button>
JS
var ViewModel = function () {
self = this;
self.listOfThings = ko.observableArray(['take out the trash', 'wash the dishes']);
self.addTodo = function () {
self.listOfThings.push('to do');
}
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Listview.
Measurement
HTML
<input type="text" data-bind="mobiscroll.temperature: myTemperature" />
JS
var ViewModel = function () {
this.myTemperature = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Measurement.
Menustrip
HTML
<ul data-bind="mobiscroll.menustrip">
<li data-icon="connection">Wi-Fi</li>
<li data-icon="location">Location</li>
<li data-selected="true" data-icon="volume-medium">Sound</li>
</ul>
JS
var ViewModel = function () {
this.myMenustrip = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Menustrip.
Number
HTML
<input type="text" data-bind="mobiscroll.number: myNumber">
JS
var ViewModel = function () {
this.myNumber = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Number.
Numpad
HTML
<input type="text" data-bind="mobiscroll.numpad: myNumpad">
JS
var ViewModel = function () {
this.myNumpad = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Numpad.
Range
HTML
<input type="text" data-bind="mobiscroll.range: myRange">
JS
var ViewModel = function () {
this.myRange = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Range.
Rating
HTML
<input type="text" data-bind="mobiscroll.rating: myRating">
JS
var ViewModel = function () {
this.myRating = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Rating.
Scroller
HTML
<input type="text" data-bind="mobiscroll.scroller: myScroller">
JS
var ViewModel = function () {
this.myScroller = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Scroller.
Select
HTML
<select data-bind="mobiscroll.select: selectedCity">
<option value="1">Berlin</option>
<option value="2">London</option>
<option value="3">New York</option>
<option value="4">Paris</option>
</select>
JS
var ViewModel = function () {
this.selectedCity = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Select.
Timer
HTML
<input type="text" data-bind="mobiscroll.timer: myTimer">
JS
var ViewModel = function () {
this.myTimer = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Timer.
Timespan
HTML
<input type="text" data-bind="mobiscroll.timespan: myTimespan">
JS
var ViewModel = function () {
this.myTimespan = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Timespan.
Treelist
HTML
<ul data-bind="mobiscroll.list: selectedCountry">
<li>America
<ul>
<li>Mexico</li>
<li>Brasil</li>
</ul>
</li>
<li>Europe
<ul>
<li>Germany</li>
<li>France</li>
<li>Italy</li>
</ul>
</li>
<li>Asia
<ul>
<li>China</li>
</ul>
</li>
</ul>
JS
var ViewModel = function () {
this.selectedCountry = ko.observable();
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Treelist.
Widget
HTML
<div id="widget" data-bind="mobiscroll.widget, mobiscroll.instance: 'widget'" style="display: none;">
<h3 class="md-text-center">Hi</h3>
<p class="md-text-center">Are you feeling good today?</p>
</div>
<button data-bind="click: showWidget">Show widget</button>
JS
var ViewModel = function () {
var that = this;
that.widget = null;
that.showWidget = function () {
that.widget.show();
};
};
ko.applyBindings(new ViewModel());
Browse the Knockout API docs for the Widget.