• JQuery Smart UI Plugins介绍(1)— 总体思路&插件Chooser介绍


      JQuery Smart UI Plugins包含了大部分日常开发所使用的基础控件,虽然有些插件相对于目前很多JQuery插件来说的功能和细节还显不足,后面版本会陆续增强。

      Smart UI 1.0中主要内容的开发框架,Plugins中存在的一些bug,后续会同步改善. 功能上,目前作为基本开发问题不大,主要还是样式上不够细致【目前样式都是自己一个人到处抠的,我认识的美工一直都没时间,后面会封装一套样式】。大家发现有什么Bug,可通知我,我会尽快修正。

          Smart UI Plugins的主要思路有以下几点:

      1.  以满足基础应用为主,封装结构统一,写法简洁,便于扩展。

      2.  遵循职责单一原则,每个插件的功能都尽量简单,避免控件过于复杂和庞大,复杂的应用以扩展库的形式进行封装。

      3.  所有录入控件都以input[text]控件记录值,统一的管理(少数特殊控件除外)。

      4.  满足多浏览器支持,(目前IE支持7.0及以上版本).

      JQuery Smart UI Plugins结构与类别如下图:

      

      JQuery Smart UI Plugins讲解系列找几个主要的控件进行讲解,其他的控件请参考Smart UI网站上的Demo(可下载)和API。

    • Chooser

      选择控件,主要实现:

    1. 单选、多选、下拉列表、下拉多选列表功能。
    2. 实现下拉选择列表的延迟加载功能【在点击的时候才加载ajax数据源】
    3. 自定义模板功能
    4. 可以使用json数据源进行绑定,或者根据ajax数据源进行绑定

     

    html代码:

    <input id="txtRadios" />
    <input id="txtCheckBox" />
    <input id="txtSelect" />
    <input id="txtMulitSelect" />
    <input id="txtAjaxSelect" />
    <input id="txtBindAjaxSelect" />

    JS代码:

    代码
    //固定数据源
    var datas = [{ Key: 0, Value: 'Baidu' },
    { Key:
    1, Value: 'Google' },
    { Key:
    2, Value: 'Sohu' },
    { Key:
    3, Value: 'Sina' },
    { Key:
    4, Value: '163' }
    ];

    $(
    '#txtRadios').chooser({ type: 'list' }, datas);
    $(
    '#txtCheckBox').chooser({ type: 'list', ismulti: true }, datas);
    //下拉选择
    $('#txtSelect').chooser({ emptytype: 'all' }, datas);
    //下拉多选
    $('#txtMulitSelect').chooser({ ismulti: true }, datas);
    //Ajax数据源
    $('#txtAjaxSelect').chooser({ emptytype: 'select', ajax: { url: 'fn_utg05' }
    , fnSelected:
    function (value, oldvalue, chooser) { GetUser(value, oldvalue); }
    });
    //Ajax联动
    $('#txtBindAjaxSelect').chooser({ emptytype: 'all', isBindData: false, item: '<li lv="${U_ID}">${U_Name}</li>' });
    function GetUser(type, oldtype) {
    if (type != oldtype)
    $(
    '#txtBindAjaxSelect').val(1).chooserReload({ url: 'fn_ug07', data: type });
    }

    详细Demo演示地址

      chooser,控件必须是input[text]控件为基础进行初始化。

      其中可以指定固定数据源和ajax数据源【Smart UI中为fncode】 。

      item: '<li lv="${U_ID}">${U_Name}</li>':定制项模版,遵循tmpl的格式要求【可以使用简单的语法和嵌入方法】,如果不了解的朋友,可以直接将"${U_ID}",当成绑定字段使用

      实例中通过fnSelected选择事件,实现联动的效果。

      chooser详细的参数说明请见: 详细API地址

    以上Demo和Api皆在Smart UI网站可以查看和下载

  • 相关阅读:
    html基础知识
    Python yield 使用浅析
    XSS跨站攻击
    box-sizing的用法(笔记)
    编译原理中DFA最小化
    提醒自己!!!
    Eclipse下运行maven项目失败且Tomcat服务器也启动不了
    Descriptio Resource Path LocationType Archive for required library: 'D:/apache-maven/apache-maven-3.6.0/mavenrepository/org/springframework/spring-aspects/4.3.7.RELEASE/spring-aspects-4.3.7.RELEASE.
    Eclispe创建maven工程缺失web.xml报web.xml is missing and <failOnMissingWebXml> is set to true的错误
    ssm 出现 Method threw 'org.apache.ibatis.binding.BindingException' exception.Invalid bound statement (not found)……
  • 原文地址:https://www.cnblogs.com/zhh8077/p/1897960.html
Copyright © 2020-2023  润新知