使用jqMobi开发app基础之下拉select

jqMobi有一个专门处理select的插件af.selectBox.js,感觉很简单很简单,官方文档只是简单demo,没有详细说明。

简单的列子:

<select id="test" style="-webkit-appearance: listbox;">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

显示效果

开发app基础之下拉select-jqmobi select">

返回栏目页:http://www.bianceng.cnhttp://www.bianceng.cn/OS/extra/

由于是在浏览器中测试,有没有style="-webkit-appearance: listbox;"没发现有什么区别。

禁用需要加disabled

例如:

<select id="test3" disabled>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

多选,需要添加multiple="multiple"

例如:

<select id="test3" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

经过简单的测试,没发现这个插件的具体作用,或许是因为我的测试环境不是发布环境吧。

作者:csdn博客 xuexiaodong2009

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索测试
, 插件
, 简单
, 环境
, Three
multiple
jqmobi select、select下拉框多选、select 下拉框样式、select下拉框多选插件、select去掉下拉箭头,以便于您获取更多的相关知识。

时间: 2024-10-30 03:24:32

使用jqMobi开发app基础之下拉select的相关文章

使用jqMobi开发app基础之Scrolling的使用,拖动后大量空白的解决

在使用jqMobi开发app基础:Scrolling的使用,向上向下拖动,动态添加数据一文中,通过使用af.scroller.js解决了上拉刷新,下拉添加数据的功能,可是很奇怪,经过多次下拉后,发下底部的空白越来越多!! 基本的页面panel代码如下: <div id="jiekuanshenpi" title="借款审批" class="panel" data-load="loadFirstpage" data-tab

使用jqMobi开发app基础之panel之间的跳转方式总结

使用jqMobi开发app,panel之间的跳转方式.根据当前页面的不同展现方式,主要有四种跳转方式. 1当前页面是弹出的,关闭当前页面2当前页面不是弹出的,可以使用a标签3使用 $.ui.goBack()4任意panel的跳转 1当前页面是弹出的,关闭当前页面 例如登录页面因为使用了modal="true",因此是弹出的,再登陆成功后,只需要关闭弹出窗体就可以返回到以前的页面. $.ui.hideMask();关闭遮罩层 $.ui.hideModal(); 关闭弹出窗体 具体可以参考

使用jqMobi开发app基础之响应式布局介绍

在使用jqMobi开发app基础:Grid布局 中介绍了Grid布局,col2在大的屏幕上会显示为两列,col3会显示为3列,但如果屏幕小就会显示为一列,这就是响应式布局,也就是根据屏幕大小,动态改变css样式的一种布局.这种布局的关键字是@media 在af.ui.css文件中搜索media找到如下css样式: #afui .col2, #afui .col3, #afui .col1-3, #afui .col2-3 { float: none; width: 100%; } #afui .

使用jqMobi开发app基础之使用 jQuery

如何在使用jqMobi开发app中使用jquery呢?由于jqMobi本身和jquery中的很多方法都是一样的,直接添加,肯定会冲突? 但由于jqMobi的插件很少,有时又不得不使用jquery,如何处理? 官网已有方法:添加jq.appframework.js,这个是把appframework.js变成了jquery的插件,自然就不会有冲突了. 下载地址 需要注意添加顺序 <script src="jquery.js"></script> <script

使用jqMobi开发app基础之弹出内容的设计

设计APP,由于屏幕很小,在PC网页山可以放在一体的内容,在APP中就不能放在一起了. 例如如下,项目出勤人员很多,需要弹出一个panel,然后让用户选择,如何设计呢? 开发app基础之弹出内容的设计-mac app开发基础教程"> 项目出勤panel的内容: <div id="shenqingxiangmuchuqing" title="申请项目出勤" class="panel" data-load="loads

使用jqMobi开发app基础之Grid布局

jqMobi中的 Grid布局,是一种表格式布局,主要是两列,三列布局. 主要通过类属性grid表示是表格布局,通过类属性col2表示分成两列的表格.col3表示分成3列的表格..col2-3表示在三列中占居两列的位置. 例如: <div class="grid"> <div class="col2"> <a href="#home" id='navbar_home' class='icon home' >两列

使用jqMobi开发app基础之Badge的使用

显示效果: 开发app基础之Badge的使用-mac app开发基础教程"> 红色的部分就是Badge,可以用来显示数量或者是其他的信息. 使用其实很简单,  $.ui.updateBadge("#" + id, res.Msg, "tr"); 第一个参数是需要显示的标签编号,第二个参数是需要显示的文字,第三个参数是需要显示的位置. 第三个参数可输入的字符及含义 bl - bottom left tl - top left br - bottom r

使用jqMobi开发app基础之真的只能存在一个DOM吗

研究jqMobi的demo,发现这个例子,所有的东西全在一个页面中,于是便认为使用jqMobi开发app,所有的内容都在一个HTML dom?难道真的不能分开吗? 不能像传统的网页开发那样,按照功能分成不同的HTML dom吗?由于资料很少,只有官方的demo可以参考,于是自己在思索这个问题.想不到最终却在jqeury mobile开发中找打了答案!! jqMobi中的panel对应与jqeury mobile中的data-role="page",jqeury mobile为什么可以把

使用jqMobi开发app基础之panel之间的跳转方式

PC端的web程序有很多种跳转方式,但使用jqMobi开发app页面之间如何跳转呢? 还可以使用传统的a标签吗? 分析jqMobi的demo,发现所有的页面都写在一个页面中,似乎也只能在这一个页面中跳转? 使用panel属性data-defer把页面分开后,如何跳转呢? 例如:一个列表页面list.html,单击某一条就跳转到详细信息页面.如何实现呢? <div id="list" class="panel" data-load="loadFirst