由于项目需要,研究了下sumoselect插件,接下来简单介绍下sumoselect。

在百度上搜索“sumoselect.js”,查到的网页基本上都有对sumoselect的基本介绍,如下:

简单介绍

jquery.sumoselect是一款跨设备、跨浏览器的jQuery下拉列表框插件。该jQuery下拉列表框插件可以单选,也可以多选。它的样式可以通过CSS文件来自定义。它的最大特点是可以跨设备使用,所有设备上功能都是一致的。

该jQuery下拉列表框插件的特点有:

  • 可以进行单选,也可以进行多选。
  • 可以通过CSS文件来自定义样式。
  • 支持绝大多数的设备。
  • 根据设备智能渲染。
  • 在Android、IOS、Windows和其它设备上会自动渲染出该设备原生样式的下拉列表框。
  • 可以自定义提交数据的格式(多选可以通过 csv 或默认形式来提交)。
  • 支持Selected、Disabled和占位文本。
  • 易扩展,开发者可以很容易的创建新的组件。
  • 使用基本方法间隙管理如添加选项、删除选项、禁用、选择等。

该jQuery下拉列表框插件需要使用jQuery 1.8.3+版本,建议使用最新版本的jQuery。

浏览器和设备的支持

  • IE8+, Firefox 4+, Chrome, Safari 4+, Opera 11+(其它浏览器应该也能工作,但未经测试)
  • iOs 3+, Android 2.1+ , Windows Mobile(其它设备应该也可以工作,但未经测试)

使用方法

使用方法非常简单,可以在页面加载之后调用默认的调用方法:

$(document).ready(function () {
$('.SlectBox').SumoSelect();
});

也可以使用插件提供的参数来进行控制:

$(document).ready(function () {
$('.SlectBox').SumoSelect({
placeholder: 'This is a placeholder',
csvDispCount: 3
});
});

配置参数

下面是该jQuery下拉列表框插件的可用参数:

参数 类型 描述
placeholder string 显示在select下拉列表框中的占位文本
csvDispCount int 要显示的多个项的编号,使用逗号分隔。设置为0表示全选
captionFormat string 当选择的项大于csvDispCount设置的数目时显示的文本。默认为{0} Selected{0}会被替换为选择的项的总数
floatWidth int 最小的设备宽度,如果小于这个宽度,下拉列表框将渲染为浮动弹出的效果
forceCustomRendering boolean Force the custom modal ( Floating list ) on all devices below floatWidth resolution.
nativeOnDevice Array[string] 从用户代理字符串中获取识别移动手机的关键字
outputAsCSV boolean 设置为true则使用csv来提交数据
csvSepChar string 如果outputAsCSV设置为true,该选项用作它的分割符。
okCancelInMulti boolean 在桌面模式中是否允许OK/Cancel按钮为多选模式。
triggerChangeCombined boolean In Multiselect mode whether to trigger change event on individual selection of each item or on combined selection ( pressing of OK or Cancel button ).
selectAll boolean 默认为false,在多选模式下是否显示全选按钮,官方js里说手机模式下不支持全选
selectAlltext string    全选按钮显示模式下全选的显示文本
ok  string 默认为OK,确认按钮显示文本
cancel string 默认为Cancel,取消按钮显示文本

(以上基本为网页搜索结果)

参数的控制最好在页面中进行,而非在js文件中直接更改,但是因人而异。

官方提供的sumoselect插件,通过参数的调整,在桌面模式下效果还是很不错的,可以选择是否显示确定、取消按钮,根据需求设置下拉框浮动的最小宽度(floadWidth)等等,但是在手机模式下,效果就不是很理想。作为一名开发者,在软件操作方面一般不会觉得太复杂,而在用户角度则可能不然。例如官方提供的sumoselect插件在手机模式下使用的是手机自带的select效果。在多选模式下,往往会造成用户选择了多个items后,不知道该怎么操作了。如果在手机多选模式下也能像桌面模式那样可以设置确定取消按钮的显隐的话,效果会更好些。针对这一需求,我对sumoselect.js文件和sumoselect.css文件进行了修改。最终呈现效果如下

手机模式下,跟桌面模式显示的一样,不同的是,在手机模式下浮动的话,增加了一个遮罩层,使效果更好些。

前台设置如下

$(function() {
//初始化下拉框组件
window.asd = $('#zone').SumoSelect({
placeholder:"请选择",
csvDispCount: 10,
captionFormat:'选中 {0} 项',
floatWidth:1200,//手机端均呈现浮动效果
okCancelInMulti:true,
ok:'确定',
cancel:'取消',
nativeOnDevice: ['Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk']
});

具体详见js文件和css文件。

需要注意的是,由于下拉框的结构是ul li结构,所以如果外层也设置了针对ul li的行高等显示属性的话,就会造成显示效果不尽人意。

items选择非选择的显示效果如上图,左边小方框是利用i元素,为其设置background实现的。

请参照如下代码

<style type="text/css">
//设置行高
.SumoSelect > .optWrapper.multiple > .options > li{
line-height: 18px;
height:18px;
}
//设置确定取消按钮的行高
.SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls > p{
line-height: 18px;
}
//选择框未选择时的背景设置
.SumoSelect > .optWrapper.multiple > .options > li span i{
background-image: none;
background-size:auto;
}
</style>

上述代码主要针对外层的css属性设置影响了下拉框的显示效果,为恢复默认显示效果进行的设置。如果要自定义行高等属性,请考虑items本身的padding/margin等属性的设置。

希望可以帮到更多的朋友,也欢迎大家提建议和问题

更多详细介绍请见http://hemantnegi.github.io/jquery.sumoselect/

插件下载地址http://files.cnblogs.com/files/wyynts/sumoselect.rar

sumoselect插件的更多相关文章

  1. 2016年4月最佳的20款 jQuery 插件推荐

    这个列表包括20个我们觉得是最有用的免费的 jQuery 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者 ...

  2. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  3. Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告

    最近在做基于jenkins ant  junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...

  4. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  5. solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件

    昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...

  6. 使用Visual Studio SDK制作GLSL词法着色插件

    使用Visual Studio SDK制作GLSL词法着色插件 我们在Visual Studio上开发OpenGL ES项目时,避免不了写Shader.这时在vs里直接编辑shader就会显得很方便. ...

  7. 工欲善其事,必先利其器 之 VS2013全攻略(安装,技巧,快捷键,插件)!

    如有需要WPF工具的朋友可以移步 工欲善其事,必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATI ...

  8. Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

  9. 10个最好用的HTML/CSS 工具、插件和资料库

    大家在使用HTML/CSS开发项目的过程中,有使用过哪些工具,插件和库?下面介绍的10种HTML/CSS工具,插件和资料库,是国外程序员经常用到的. Firebug Lite FirebugLite ...

随机推荐

  1. Java—数据库技术

    JDBC(Java Database Connection,Java数据库连接)是一种用于执行SQL语句的JavaAPI(应用程序设计接口),它由一些Java语言写的类和界面组成.JDBC提供了一种标 ...

  2. 虚拟机启动linux系统报错,此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态

    在使用虚拟机启动linux的时候报错,如下: 已将该虚拟机配置为使用 64 位客户机操作系统.但是,无法执行 64 位操作. 此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态. ...

  3. 解析Hibernate中的持久化—ORM(转载)

    最近一直在学习Hibernate,首先说一下Hibernate出现的原因吧,Hibernate是因为MVC的分层体系结构的出现,即数据持久层(模型层)的出现,持久层是在MVC三层架构的基础上提出来的, ...

  4. JavaWeb AJAX

    1.  Asynchronized JavaScript And XML 异步JavaScript和XML,它并不是一门新的语言或技术,实际是几项技术按一定的方式组合在一起共同的协作中发挥各自的作用, ...

  5. 掌握Redmine

    一个带有建议.技巧和最佳实践的全面指导和易懂易学的结构. 掌握Redmine 版权©2013 Packt出版 前言(略) 1.熟悉Redmin 我们尝试去做一个新的网站应用程序的时候,回去询问一些了解 ...

  6. HDFS读写数据块--${dfs.data.dir}选择策略

    最近工作需要,看了HDFS读写数据块这部分.不过可能跟网上大部分帖子不一样,本文主要写了${dfs.data.dir}的选择策略,也就是block在DataNode上的放置策略.我主要是从我们工作需要 ...

  7. hadoop分片分析

    上一篇分析了split的生成,现在接着来说具体的split具体内容及其相关的文件和类.以FileSplit(mapred包下org/apache/hadoop/mapreduce/lib/input/ ...

  8. 用HTML做的简单的个人简历

    <html> <head> <title>table表格</title> <style type="text/css"> ...

  9. ASP.NET MVC自定义ActionResult实现文件压缩

    有时候需要将单个或多个文件进行压缩打包后在进行下载,这里我自定义了一个ActionResult,方便进行文件下载 using System; using System.Collections; usi ...

  10. PHPExcel读取Excel文件的实现代码

    <?php require_once 'PHPExcel.php'; /**对excel里的日期进行格式转化*/ function GetData($val){ $jd = GregorianT ...