html - 动态移动滑动内容

标签 html css jquery-mobile dynamic swipe

大家好,我正在设计一个移动网站,我对移动 jQuery 非常缺乏经验,所以如果你们能帮助我的话。如果我能让他的那部分页面在你滑动时刷新。此 div 包含一个产品目录代码,以便在您刷新页面时产品会发生变化。我希望能够做的是在我的页面中有一个特定的 div 标记,以便在进行滑动 Action 时刷新。

<div data-role="content" id="colorme">

<!-- Start:Here is where the product come up-->
<!--START: ITEM_TEMPLATE_0-->
<div style="padding: 1em .5em 1.5em .5em; text-align:center;" id="bg" >
    <div style="background-color:#ffffff; margin-bottom: .5em;"> <a href="product.asp?itemid=[catalogid]"><img src= "/thumbnail.asp?file=[THUMBNAIL]&maxx=200&maxy=0" width="200" alt="[name]" border="0"></a>
    </div>
    <div style="padding-bottom:.5em;" class="name"> [name]
    </div>
    <div>
    <a href="product.asp?itemid=[catalogid]"><img src="images/btn-more-details.png"></a>
    </div>
</div>
<!--END: ITEM_TEMPLATE_0-->
<!-- END: stop products-->

  </div>

  <div data-role="footer">
    <h1>My Footer</h1>
  </div>
</div> 

非常感谢!

对不起,您可以在这里查看网站:

kitchenova.com/mobile

最佳答案

如果您使用的是 jQuery Mobile 库,则可以使用 swipe()

http://api.jquerymobile.com/swipe/

这是一个事件监听器,它将检测“滑动”事件(我使用引号是因为它在技术上监听点击和拖动,而不是 native 触摸事件)

您可以在其中放置您需要的任何功能,以完成您正在尝试的任何事情。

如果您只需要将新内容引入到 div 中,您也可以使用各种不同的插件(其中许多实际上会使用真正的触摸事件,这可能很难自己做,但会比 jQuery 的滑动方法更好更流畅)

我推荐 swipejs:

http://swipejs.com

关于html - 动态移动滑动内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19169513/

相关文章:

html - 绝对定位彻底打破结构

css - 无法在 jQuery Mobile 应用程序中隐藏/显示元素

javascript - HTML5 视频不会在 Chrome 和 Safari 上自动播放

css - 正确导入后, Material 样式未应用于 Angular 应用程序

html - IE8 html图像对齐

javascript - 两个 amCharts 图表未在 iPad 上使用 jQueryMobile 框架显示在同一页面上

javascript - 没有 jQuery Mobile 的 scrollstop 事件

python - 如何在 XPath 中使用 contains()?

css - 里面有float属性的div在调整的时候中心div没有调整

javascript - 在向 li 添加新类之前删除类