图片库的简单分页

Question

i want to do pagination for image gallery like their should be a drop down containing 2-8 if i click on 2 it should display only two images in first row and rest of the images should fallow first row and no need to hide 我想对图像库进行分页，例如它们应该是一个包含2-8的下拉列表，如果我单击2，则它应该在第一行中仅显示两个图像，其余图像应放在第一行，而无需隐藏

example: if i click on 2 (consider their will be 9 images in gallery)
[1,2]
[3,4]
[5,6]
[7,8]
[9,0]

if i click on 3

[1,2,3]
[4,5,6]
[7,8,9]

like wise

this is my code 这是我的代码

http://jsfiddle.net/rajaeerasd/GbA2C/ http://jsfiddle.net/rajaeerasd/GbA2C/

 <!DOCTYPE html>
    <html>
    <head>  

        <title>Easylib Soft</title>
        <link rel="stylesheet" href="style.css">
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
        <script type="text/javascript" src="https://sites.google.com/site/alauddinansari7/jColorPicker.js"></script>
        <script type="text/javascript">

        $(document).ready(function(){
            $("#colorPicker").ColorPicker({selectedColor:'#fff', onSelect:
                      function(color){
                document.body.bgColor=color;
                      }
            });          
        });             
    </script>



        <!--[if (gte IE 6)&(lte IE 8)]> 
            <script src="selectivizr.js"></script>
        <![endif]-->
        <style>


            #about{
                color: #999;
                text-align: center;
                font: 0.9em Arial, Helvetica;
            }

            #about a{
                color: #777;
            }       
        </style>
    </head>

    <body>
    <div id="colorPicker">colorPicker</div>
      <ul class="menu">
        <li tabindex="1">
          <a href="http://www.google.co.in/"><span class="title">One</span></a>

        </li>
        <li tabindex="1">
          <span class="title">Two</span> 

        </li>
        <li tabindex="1">
          <span class="title">Three</span> 

        </li>
        <li tabindex="1">
          <span class="title">Four</span> 

        </li>
        <li tabindex="1">
          <span class="title">Five</span> 

        </li>
        <li tabindex="1">
          <span class="title">Six</span> 

        </li>
        <li tabindex="1"> 
          <span class="title">Seven</span>

        </li>
        <li tabindex="1"> 
          <span class="title">Eight</span>

        </li>
        <li> 
          <span class="title">Nine</span>
        </li>     
      </ul>




        <!-- BSA AdPacks code -->
        <script>
          (function(){
            var bsa = document.createElement('script');
               bsa.async = true;
               bsa.src = 'www.google.com';
            (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
          })();
        </script> 

    </body>
    </html>

Answer 1

Im a little unclear on what you mean by 'drop down' (a new, separate div?) but regardless of that, one approach I would try out if I were you is to 我对“下拉”（新的，单独的div？）的含义有点不清楚，但不管怎样，如果您是我会尝试的一种方法是

1.) assign a uniuque id to each of the clickable divs 2.) add a class definition to all the clickable divs (same class id) 3.) add jquery to detect a click on any of item with the new class id 4.) when clicked get the id of the clicked div 5.) based on that 'id' (assuming you use the number of the div to correspond to the id -- so div #2 would hav id=2, etc.) you could then use that and in a NEW div 1.）为每个可点击的div分配唯一的ID； 2。）向所有可点击的div（相同的类ID）添加一个类定义； 3。）添加jquery以检测对具有新类ID的任何项的点击。）当被点击时，获取被点击的div 5的ID。）基于该“ id”（假设您使用div的编号来对应于该ID，因此div＃2将具有id = 2，依此类推），您可以然后使用它并在新的div中

a.) show the div of results, (clear out or erase any old results from it I guess) a。）显示结果的div，（我想从中清除或删除所有旧结果）

b.) append HTML that is built based on getting a count from the cliked div id through 9... so if the user clicked #4, it would result in your new div showing 6 'results'... then its just a matter of doing a loop to build the desired HTML to show the results, based on the id of whick is clicked, and the total number of returned results (keeping in mind that you know theres a total of 9. I would use a simple table structure to build / write the HTML in the loop and use counter to keep track of each row of results then when the counter = 9, just finish up the table of results and the new div should contain the results. b。）附加HTML，该HTML是基于从相似的div ID到9的计数获得的……因此，如果用户单击＃4，它将导致您的新div显示6个“结果” ...那么它只是一个要做一个循环以构建所需的HTML以显示结果，该过程基于单击whick的ID和返回的结果总数（请记住，您知道总数为9）。我将使用一个简单的表在循环中构建/编写HTML并使用计数器来跟踪结果的每一行的结构，然后当counter = 9时，只需完成结果表，新的div就应包含结果。

not sure this all makes sense but it would be the initial approach I would take, theres probably much simpler ways to handle it admittedly. 不确定这一切是否合理，但这将是我会采用的最初方法，诚然，有可能会更简单的方法来处理它。

图片库的简单分页

问题描述

1 个解决方案

解决方案1
0 2013-08-15 13:47:49

图片库的简单分页

问题描述

1 个解决方案

解决方案1 0 2013-08-15 13:47:49

解决方案1
0 2013-08-15 13:47:49