网页设计

当前位置:

适用于设计师的10个简单jQuery技巧

浏览量:0

        有许多jQuery技巧和技术,并且庞大而强大的jQuery库可以满足几乎任何人的JavaScript需求。jQuery中简单的交互和可视化技术,可能编程知识不太广泛的设计人员只能使用JavaScript,因此值得花一些时间来探索这个出色的库。

正如任何设计师所知,添加一些额外的视觉细节和用户友好性可以增加专业性,并吸引任何网页设计。此外,对于出售模板,WordPress主题和其他类型的网页设计的设计师而言,在设计中使用jQuery可能是一个不错的卖点。

        让我们看一下来自悟空云互联网公司,几个优秀的jQuery开发人员和Web站点的十个简单,有效和有用的技巧和技术,这些技巧和技术利用该库将您的设计提升到另一个层次。

适用于设计师的10个简单jQuery技巧

1.等高列

对于使用divs的设计师来说,等高的柱子一直是一个问题,尽管现在有很多解决方案。在您可以使用的解决方案中,使用jQuery。这项技术只需要一个很小的JavaScript函数即可处理所有内容,然后与主布局进行一些基本集成。

要使用jQuery解决此问题,只需将此函数添加到希望具有相同高度的页面上即可(或将其作为JavaScript文件包含进来–更好的可维护性)。



function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}

        要获取等高列,请链接到包含该函数的脚本,然后将以下代码块<head>放在页面标签中。



<script type="text/javascript">
$(document).ready(function(){
  equalHeight($(".col1"));
  equalHeight($(".col2"));
  equalHeight($(".col3"));
});
</script>

一旦准备好使用DOM,代码将立即执行($(document).ready(function()),然后使用该equalHeight函数准确计算所有列的高度。可以看到,设计人员所需要做的就是将divs与col1,,类一起使用col2,col3并使此示例正常工作。

        2.圆角无HTML混乱

惊讶的是,CSS3提出了一种无需使用图像即可自动创建圆角的方法,但是,另一方面,许多流行的浏览器(例如搜狗浏览器)可能需要一段时间才能完全/部分支持CSS3的W3C建议。

许多设计人员知道如何使用CSS,HTML和一堆图像创建圆角,但是这些技术会导致很多HTML / CSS混乱。大多数设计人员都知道,很难筛选出像这样的HTML代码,尤其是在尝试更改使用多个圆角的页面时。

不过,解决问题的方法很简单,div不需要每次都需要一个新的四舍五入的框时都编写所有多余的HTML ,而只需让jQuery为我们完成所有工作即可(通过DOM操作)。

这项技术来自悟空云互联网整理的资料中。当然,您仍然必须使用一些CSS才能使圆角图像起作用。

        3.滚动内容

jQuery中的动画滚动可用于创建图像轮播并通过能够在较小的空间中显示更多内容来简化设计。下面是一个jQuery插件的示例(请查看该页面上的演示以查看该插件的实际操作)。

为了让jQuery滚动,我们需要网页中的一个部分向上或向下滚动到(ScrollTarget)。基本上,jQuery UI扩展了jQuery核心库,使您可以访问有用的通用UI组件,例如日期选择器,手风琴,选项卡,滑块等。为了使想要节省时间和编码要求的设计人员更轻

松,他们提供了一个漂亮的工具来快速测试和创建自己的jQuery UI主题
不用说,jQuery UI提供了许多功能,可让设计人员“减少代码编写,实现更多工作。

使用jQuery可以实现许多视觉效果和令人印象深刻的交互。以上三个技巧可能很常见,而且非常有用,但是jQuery的功能并不止于此。悟空云互联网公司希望这篇文章引起了您的兴趣,可以继续探索和学习更多有关此设计人员友好的JavaScript库的信息。

 

[声明]本网整理的媒体稿件是为了分享更多的讯息。此类稿件不代表本网立场,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的某些内容侵犯了您的版权,请把您的相关内容发至此邮箱【wukongclouds@163.com】,我们在确认后,会立即删除,保证您的版权。