个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
正在寻找代码或插件或任何类似于我需要的东西......
屏幕截图:- 
屏幕截图说明了一切，基本上我想在 jquery mobile 表格中嵌入用于列切换的单选按钮，以便用户可以获得他选择的一列...与单选按钮功能相同...
对于表，我们在代码中实现了这一行:-
<table class="ui-responsive" data-role="table" data-mode="columntoggle" data-column-btn-theme="d" data-column-btn-text="Click to select week's day..." data-column-popup-theme="c">
他们有插件或者任何可用的自定义代码吗？如何做到这一点？
最佳答案
工作示例:http://jsfiddle.net/Gajotres/f5eTT/
与普通切换表的唯一区别是您的主列也必须是您的第一列。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="1">Movie Title</th>
<th data-priority="2">Rank</th>
<th data-priority="4">Year</th>
<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-priority="5">Reviews</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
<td>1</td>
<td>1941</td>
<td>100%</td>
<td>74</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
<td>2</td>
<td>1942</td>
<td>97%</td>
<td>64</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
<td>3</td>
<td>1972</td>
<td>97%</td>
<td>87</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
<td>4</td>
<td>1939</td>
<td>96%</td>
<td>87</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
<td>5</td>
<td>1962</td>
<td>94%</td>
<td>87</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
<td>6</td>
<td>1964</td>
<td>92%</td>
<td>74</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
<td>7</td>
<td>1967</td>
<td>91%</td>
<td>122</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
<td>8</td>
<td>1939</td>
<td>90%</td>
<td>72</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
<td>9</td>
<td>1952</td>
<td>89%</td>
<td>85</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
<td>10</td>
<td>2010</td>
<td>84%</td>
<td>78</td>
</tr>
</tbody>
</table>
<table data-role="table" id="table-test" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="1">Movie Title</th>
<th data-priority="2">Rank</th>
<th data-priority="4">Year</th>
<th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th data-priority="5">Reviews</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
<td>1</td>
<td>1941</td>
<td>100%</td>
<td>74</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
<td>2</td>
<td>1942</td>
<td>97%</td>
<td>64</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
<td>3</td>
<td>1972</td>
<td>97%</td>
<td>87</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
<td>4</td>
<td>1939</td>
<td>96%</td>
<td>87</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
<td>5</td>
<td>1962</td>
<td>94%</td>
<td>87</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
<td>6</td>
<td>1964</td>
<td>92%</td>
<td>74</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
<td>7</td>
<td>1967</td>
<td>91%</td>
<td>122</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
<td>8</td>
<td>1939</td>
<td>90%</td>
<td>72</td>
</tr>
<tr>
<td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
<td>9</td>
<td>1952</td>
<td>89%</td>
<td>85</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
<td>10</td>
<td>2010</td>
<td>84%</td>
<td>78</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '.ui-page', function(){
alterTablePopup('table-column-toggle', 0);
alterTablePopup('table-alt',0);
});
function alterTablePopup(tableID, showColumnID) {
if($.mobile.activePage.find('#'+tableID).length > 0) {
// First unsellect everything, we must trigger click event so table look could change
cleanTableColumns(showColumnID, tableID);
$(document).on('popupafteropen', '#' + tableID + '-popup',function(event, ui) {
var popup = $(this);
//Hide old fieldset
popup.find('fieldset').hide();
$.mobile.activePage.find('#radio-fieldset').remove();
$('<fieldset>').attr({'data-role':'controlgroup','id':'radio-fieldset'}).appendTo(popup);
popup.find('input').each(function(i){
(i === showColumnID) ? $('<input>').attr({'name': tableID+'-radio','id': tableID+'-radio-'+i,'type':'radio','value':'v'+i,'checked':'checked','class':tableID+'-radio'}).appendTo('#radio-fieldset') : $('<input>').attr({'name':tableID+'-radio','id':tableID+'-radio-'+i,'type':'radio','value':'v'+i}).appendTo('#' + tableID + '-popup #radio-fieldset');
$('<label>').attr({'for':tableID+'-radio-'+i}).text($(this).prev().find('.ui-btn-text').text()).appendTo('#' + tableID + '-popup #radio-fieldset');
});
$('[type="radio"]').checkboxradio();
$.mobile.activePage.trigger('create');
});
$(document).on('popupafterclose', '#' + tableID + '-popup',function(event, ui) {
var popup = $(this);
$.mobile.activePage.find('#radio-fieldset').remove();
popup.find('fieldset').show();
});
$(document).on('vmouseup', '#' + tableID + '-popup #radio-fieldset .ui-controlgroup-controls .ui-radio', function(e){
if(e.handled !== true) // This will prevent event triggering more then once
{
var selectedRadio = $(this).find('[type="radio"]').attr('id').replace(tableID+"-radio-","");
cleanTableColumns(selectedRadio, tableID);
e.handled = true;
}
});
}
}
function cleanTableColumns(columnNo, tableID){
$('#' + tableID + '-popup').find('.ui-checkbox label').each(function(i){
($(this).hasClass('ui-checkbox-on')) ? $(this).trigger('vclick') : ''; // Unselect every selected field
(i == columnNo) ? $(this).trigger('vclick') : ''; // select first for further use
});
}
关于jquery - 在 Jquery Mobile Table 中使用单选按钮代替复选框弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16455298/
27
4
0
我可以只用 JavaScript 编写我的网站，并确保我的代码对任何人隐藏吗？在这方面，Node.js 是否可以像 Apache 一样通过互联网提供商访问？ 最佳答案 您的两个问题的答案都是是。 No
正文应仅包含 bool 而不是 json 对象或数据。 我已经尝试将 bool 转换为 JSON 中的类型。 request.httpMethod = "PUT" let sessio
假设我们有这个html内容，我们愿意用正则表达式得到Content1, Content2,.. Content1 Content2 Content3 Content4 如果我使用下面的行 preg_m
1、LUA获取utf8字符串长度 复制代码 代码如下: --- 获取utf8编码字符串正确长度的方法 -- @param str -- @return number f
我刚刚观察到 if 而不是 -> , 我写 =>在函数的类型签名定义中，它不会导致编译时错误。示例代码: mysum :: Num a => [a] => a -- Notice => after t
所以我试图替换字符串中的任何非字母数字字符，包括空格。我找到了一个可行的解决方案，但感觉很糟糕。我不需要两个单独的替换函数来完成此操作，但我不知道如何正确合并它们。我在网上找到的所有文档都没有解决这个
我有一个字符串 'abc.132131.001.3' 。我想将每次出现的 '.' 替换为 '~'. 我用过 str.replace(/[.*?^${}()|[\]\\]/g, "\~$&"); 但是这
我有这个； let subs = []; for ( const item of items ) { // array for ( const sub of item ) { //
考虑下面来自 this AngularJS tutorial 的代码片段: app.factory('Auth', function ($firebaseSimpleLogin, FIREBASE
出于培训原因，我想编写一个小计算器。为什么要计算 10-6 = 16 而不是 10-6 = 4？ 我得到了错误: Assertion Failed! Expression: calc("10-6")
代码如下: /// <summary> /// 将指定字符串按指定长度进行剪切， &nbs
假设我有以下示例: 示例一 $('.my_Selector_Selected_More_Than_One_Element').each(function() { $(this).stuff()
自 Flutter 1.12 发布以来，我的以下代码用于重新启动应用程序: final MyAppState state = context.ancestorStateOfType(const Typ
这行是什么意思: bool operator() (const song& s); I am not able to understand that line with operator. Is op
我在使用 mimetype="text/plain"的 django 模板时遇到了一些问题。 首先，url 的 s3 部分以 :80 结尾，然后实际图像 url 以 '%2f' 代替每个斜杠呈现。 o
目前，如果任意(OR)条件为true，.is()的结果将返回true，如何我是否让它使用AND，即仅在满足所有条件时返回true？ if ($('#search-form #valid_only').
我用 C 语言创建了一个非常简单的链表程序。 #include #include int main(){ struct Int{ int num; struct
我有以下无法更改的 HTML 输出: link1;;;link 我怎样才能摆脱;所以结果变成: 链接1；链接2 这是我最好的尝试: var test = new String($(this).html
我有以下查询，它给出了正确的结果，但我想使用不存在而不是不存在。 select cust_name from customer where cust_id not in (select c
我使用 SilverStripe 3.5.6 进行自定义搜索，它将所有关键字分解为一个数组，并且仅返回包含所有单词的结果，而不返回包含其中一个单词的结果。 这只是脚本的一小部分，但这就是我使用过滤器功
我是一名优秀的程序员,十分优秀！