1

很好地搜索代码或插件或任何类似于我需要的东西......

截屏:-在此处输入图像描述

屏幕截图说明了一切,基本上我想在 jquery 移动表中嵌入用于列切换的单选按钮,以便用户可以获得他选择的一列......就像单选按钮功能一样......

对于表格,我们在代码中实现了这一行:-

<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">

他们是它的插件还是任何可用的自定义代码?这该怎么做?

4

1 回答 1

4

工作示例: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       
    });  
}
于 2013-05-09T13:39:25.807 回答