图片库的简单分页

Question

我想对图像库进行分页，例如它们应该是一个包含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

这是我的代码

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

我对“下拉”（新的，单独的div？）的含义有点不清楚，但不管怎样，如果您是我会尝试的一种方法是

1.）为每个可点击的div分配唯一的ID； 2。）向所有可点击的div（相同的类ID）添加一个类定义； 3。）添加jquery以检测对具有新类ID的任何项的点击。）当被点击时，获取被点击的div 5的ID。）基于该“ id”（假设您使用div的编号来对应于该ID，因此div＃2将具有id = 2，依此类推），您可以然后使用它并在新的div中

a。）显示结果的div，（我想从中清除或删除所有旧结果）

b。）附加HTML，该HTML是基于从相似的div ID到9的计数获得的……因此，如果用户单击＃4，它将导致您的新div显示6个“结果” ...那么它只是一个要做一个循环以构建所需的HTML以显示结果，该过程基于单击whick的ID和返回的结果总数（请记住，您知道总数为9）。我将使用一个简单的表在循环中构建/编写HTML并使用计数器来跟踪结果的每一行的结构，然后当counter = 9时，只需完成结果表，新的div就应包含结果。

不确定这一切是否合理，但这将是我会采用的最初方法，诚然，有可能会更简单的方法来处理它。

图片库的简单分页

问题描述

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