由于项目需要,研究了下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. AutoCAD安装失败

    问题一: Installing .NET Framework Runtime 4.0: D:\安装包\CAD\cad2012(x64)\Map3D2012(x64)\3rdParty\NET\4\wc ...

  2. jQuery验证插件 Validate详解

    1.引入必要的文件,以及语言中文提示包 2.使用规则如下: 序号 规则 描述 1 required:true 必须输入的字段. 2 remote:"check.php" 使用 aj ...

  3. java selenium (三) 环境搭建 基于Maven

    现在Java的大部分项目都是基于Maven,  在Maven项目中使用Selenium2. 非常简单. 首先你需要配置好Maven的环境 可以参考本博客的Maven教程系列,Maven入门教程(一) ...

  4. DEVEXPRESS控件使用技巧记录-GRIDCONTROL

    1. 存在父子表的时候,只允许父表的一条记录展开,其他记录都收起 方法:Feature Browser -> Master-Detail -> behavior -> AllowOn ...

  5. C++中的字面值指定类型

    C++中只有内置类型存在字面值,没有类(class)类型字面值.例如:0是int类型的字面值,3.14159是double类型的字面值. 字面值类型很多 整型浮点字面值 20             ...

  6. POJ 3415 Common Substrings 后缀数组+并查集

    后缀数组,看到网上很多题解都是单调栈,这里提供一个不是单调栈的做法, 首先将两个串 连接起来求height   求完之后按height值从大往小合并.  height值代表的是  sa[i]和sa[i ...

  7. sass安装记录

    之前曾经安装过一次sass,不过可惜没使用,现在换了电脑重新安装,又上网找了些资料,终于安装成功,现在就当做个记录方便下次安装. 首先 到官网下载个最新版的ruby :http://rubyinsta ...

  8. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  9. activeMq 消费者整合spring

    package com.mq.consumer; import javax.jms.JMSException;import javax.jms.Message;import javax.jms.Mes ...

  10. js正则实现二代身份证号码验证详解

    js正则实现二代身份证号码验证详解 根据[中华人民共和国国家标准 GB 11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列顺序从左至 ...