$utils使用全指南----持续更新

最新推荐文章于 2022-12-10 14:42:00 发布

dianju8374

最新推荐文章于 2022-12-10 14:42:00 发布

阅读量699

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/toly-top/p/9781979.html

版权

这篇博客详细介绍了如何使用$utils进行JavaScript开发，包括创建选择型表单、按比例定位控件、响应浏览器尺寸变化、组合使用技巧以及在SVG中添加文字的方法。适合想要提升JavaScript技能的开发者阅读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

顾名思义：$utils是基于Jquery的拓展工具函数库，是本人封装的一些常用且实用的方法。  
在此只列出使用方式，源码不公开。

1. `$.createSelect(数组)`------创建选择型表单：

返回：该选择型表单的jQuery对象

let $s1 = $.createSelect(["start", "end", "center"]);

$.createSelect

2.`$el.inWindow(x占份数,y占份数)`------将浏览器显示窗宽高分别分为100份,让控件中心在相应份数上:

$s1.inWindow(50,50);//让上一步的$s1(中心)位置在屏幕宽高各50份处

inWindow

3.`$.onSizeChange(callback)`------浏览器尺寸变化时回调：

    $.onSizeChange(function () {//这样当浏览器视窗变化，$s1都会自动处于中心位置
        $s1.inWindow(50, 50);
    })

onSizeChange.png

4. `$s1.autoInWin(占份数,y占份数)`------如果比较懒(比如me)，那么2+3综合即此方法

 $s1.autoInWin(50, 50);

注：提供链式调用，你可以这样使用:一句长代码便可实现创建，定位，取值
    $.createSelect(["start", "end", "center"])
        .autoInWin(45, 5)
        .on("input", function () {
            var value=($(this).val());
        })

5.`$el.createText`:在某个标签下加上svg文字!

返回设置文字的函数

//左顶点为100，100处创建#6D6AFB颜色的文字"toly1994.com"
    $('body').createText({
        str: "toly1994.com",
        font: 15,
        color: "#6D6AFB",
        x: 100,
        y: 100,
    });