FlexBox很好用的下拉框控件

最新推荐文章于 2021-06-22 08:57:16 发布

原创最新推荐文章于 2021-06-22 08:57:16 发布 · 5.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#stylesheet #jquery #html #json #function

JavaScript之厉兵秣马同时被 3 个专栏收录

8 篇文章

订阅专栏

JQuery

4 篇文章

订阅专栏

下拉框

1 篇文章

订阅专栏

本文介绍了一款基于JQuery的开源下拉框控件FlexBox，该控件支持分页显示、横向滚动条及水印等功能。文章通过示例代码展示了如何在网页中引入并使用该控件。

最近发现了一个好用的开源下拉框控件，以前用的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:'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}  
                
              });  
        });  
		
	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>