FlexBox很好用的下拉框控件

发布时间：2020-12-15 00:58:03 所属栏目：百科来源：网络整理

导读：?????? ?最近发现了一个好用的开源下拉框控件，以前用的select控件有个弱点就是没有横向滚动条，当某个item很长的时候，就不能完全显示。FlexBox控件也是基于JQuery封装的控件，使用起来很方便，下面简要介绍下该控件的使用。 ??????? 该控件除了需要JQuery

?????? ?最近发现了一个好用的开源下拉框控件，以前用的select控件有个弱点就是没有横向滚动条，当某个item很长的时候，就不能完全显示。FlexBox控件也是基于JQuery封装的控件，使用起来很方便，下面简要介绍下该控件的使用。

??????? 该控件除了需要JQuery的js文件还需要jquery.flexbox.js文件，jquery.flexbox.css的css文件，同时还提供了几种下拉按钮的img图片，给我的做的一个最简单的html页面的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Welcome to my FlexBox</title>
  <link rel="stylesheet" type="text/css" href="css/jquery.flexbox.css" />
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.flexbox.js"></script>

   <script type="text/javascript">
   $(function() {
      var countries = {};
      countries.results = [
		{id:'AF',name:'Afghanistan'},{id:'AL',name:'Albania'},{id:'DZ',name:'Algeria'},{id:'AS',name:'American Samoa'},{id:'AD',name:'Andorra'},{id:'AO',name:'Angola'},{id:'ZW',name:'Zimbabwe'}
      ];
      countries.total = countries.results.length;
	  
	  $('#ffb1').flexbox(countries,{
	  //allowInput:false,maxVisibleRows:2,paging:{pageSize:3}
		  
		  });
    });
   </script>
   </head>
   <body>
   <div id="ffb1"></div>
   </body>
   </html>

??????? 控件的数据源是很标准的json格式，我这里是写在前台页面中，当然你可以从后台传json格式的数据到前台，然后$('#ffb1').flexbox(countries）;这样绑定即可。该控件还支持分页显示，可以按上面代码中的方式进行分页处理。该控件最大的优势在于：

1、支持分页显示数据

2、支持横向滚动条

3、支持水印

如要了解该控件的更多详细信息请访问http://www.fairwaytech.com/flexbox/

也欢迎大家留言共同探讨

许多网友给我留言问关于FlexBox控件如何取值的问题，先给出解决方法。这里只能获取选项的id，不能获取其name值。

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
    <html>  
    <head>  
      <title>Welcome to my FlexBox</title>  
      <link rel="stylesheet" type="text/css" href="css/jquery.flexbox.css" />  
      <script type="text/javascript" src="js/jquery.js"></script>  
      <script type="text/javascript" src="js/jquery.flexbox.js"></script>  
      
       <script type="text/javascript">  
       $(function() {  
          var countries = {};  
          countries.results = [  
            {id:'AF',name:'Zimbabwe'}  
          ];  
          countries.total = countries.results.length;  
            
          $('#ffb1').flexbox(countries,{  
          //allowInput:false,paging:{pageSize:3}  
                
              });  
        });  
		
	function show() {
	    alert($("input[name=ffb1]").val());
	}
       </script>  
       </head>  
       <body>  
       <div id="ffb1"></div>  
	   </br>
	   <input id="btn" onclick="show()" value="btn" style="width:50px;"/>
       </body>  
       </html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!