jqwidget


in jqwidgets jquery framework bootstrap integration is my issue for a dropdown


in jqwidgets jquery framework the bootstrap integration is not working..kindly give the steps
the plugin :
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="jqwidgets/styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="Jqwidgets/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
<script src="Jqwidgets/scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="Jqwidgets/scripts/demos.js" type="text/javascript"></script>
<script src="Jqwidgets/jqwidgets/jqxbuttons.js" type="text/javascript"></script>
<script src="Jqwidgets/jqwidgets/jqxcore.js" type="text/javascript"></script>
<script src="Jqwidgets/jqwidgets/jqxlistbox.js" type="text/javascript"></script>
<script src="Jqwidgets/jqwidgets/jqxscrollbar.js" type="text/javascript"></script>
<script src="Jqwidgets/jqwidgets/jqxdropdownlist.js" type="text/javascript"></script>
Script and the control:
<script type="text/javascript">
$(document).ready(function () {
alert('hi');
var source = [
{ html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/numberinput.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxNumberInput</span></div>", title: 'jqxNumberInput' },
{ html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/progressbar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxProgressBar</span></div>", title: 'jqxProgressBar' },
{ html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/calendar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxCalendar</span></div>", title: 'jqxCalendar' },
{ html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/button.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxButton</span></div>", title: 'jqxButton' },
{ html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/dropdownlist.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxDropDownList</span></div>", title: 'jqxDropDownList' },
{ html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/listbox.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxListBox</span></div>", title: 'jqxListBox' },
{ html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/tooltip.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxTooltip</span></div>", title: 'jqxTooltip' },
{ html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/scrollbar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxScrollBar</span></div>", title: 'jqxScrollBar' },
{ html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/datetimeinput.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxDateTimeInput</span></div>", title: 'jqxDateTimeInput' },
{ html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/expander.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxExpander</span></div>", title: 'jqxExpander' },
{ html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/menu.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxMenu</span></div>", title: 'jqxMenu' },
];
$("#jqxWidget").jqxDropDownList({ source: source, selectedIndex: 0, theme: "bootstrap" });
});
</script>
<div id="jqxWidget">
</div>
</div>
in the above code theme:"bootstrap" is been mentioned but the bootstrap is not being applied in the webpage...
You will find working bootstrap examples here: http://www.jqwidgets.com/jquery-widgets-demo/demos/twitter/
E.g. navigate to Responsive Grid Layout. Then you will find this example and its source: http://www.jqwidgets.com/jquery-widgets-demo/demos/twitter/bootstrap-grid-layout.htm?light

Related Links

Customize jqxEditor to change colors
Centering Tabs in jqxTabs Widget
in jqwidgets jquery framework bootstrap integration is my issue for a dropdown
How to create a responsive webpage using jqwidget?
How to hide top header bar with back button while using jqxChart of jqWidget for iOS app.
JqWidget tabs - dynamically add tab with ajax content
How to auto-resize jqxWindow based on content?
JQWidgets treegrid with dataAdapter not rendering
JqWidgets treegrid issues wiring up dataAdapter object
Auto serial number column to jqxgrid
set maximum number of grid rows in jqWidgets
jqxDropDownList set multiple item selected

Categories

HOME
sendgrid
single-sign-on
path-finding
iterator
vmware
webstorm
read-eval-print-loop
q
jsp-tags
electronics
facebook-php-sdk
user-input
row
fortumo
iron-router
interop
scichart
swiftlint
xlsxwriter
clickonce
facebook-instant-articles
php-openssl
dxf
shopware
nhapi
log4js-node
madlib
bluestacks
main
scaffold
squib
dynamic-reports
botbuilder
ibpy
mime
websphere-mq-fte
angular2-meteor
hibernate-tools
filepicker
strptime
dds
composite-key
migradoc
angular-strap
nxt
transmitfile
fuzzy-search
contact-list
connect-by
markojs
superstack
qgraphicsview
whois
php-internals
design-by-contract
sdhc
simple-framework
iis-arr
php-ci
sniffer
angular-local-storage
sorl-thumbnail
nsbutton
internet-connection
googlemock
castle
uitouch
jboss-weld
android-2.2-froyo
didselectrowatindexpath
prettify
terminal-services
uv-mapping
inbox
quartz-graphics
dbconnection
http-unit
kyotocabinet
word-processor
dsn
tomcat-valve
netbeans-7.1
calling-convention
inotifycollectionchanged
mongomapper
yslow
google-friend-connect
paster
memory-size
eqatec
privilege
sustainable-pace

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App