in jqwidgets jquery framework bootstrap integration is my issue for a dropdown -
in jqwidgets jquery framework bootstrap integration not working..kindly give 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 , 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 above code theme:"bootstrap" been mentioned bootstrap not being applied in webpage...
you find working bootstrap examples here:
http://www.jqwidgets.com/jquery-widgets-demo/demos/twitter/
e.g. navigate responsive grid layout. find example , source: http://www.jqwidgets.com/jquery-widgets-demo/demos/twitter/bootstrap-grid-layout.htm?light
Comments
Post a Comment