jqueryui / accordion的用法记录

jqueryui 的 widget 中包含了基本上我们都需要的ui组件, 除了那个unslider.
参考地址是: www.jqueryui.com. 要能够看懂/并使用/ 完全掌握的话, 就要使用其中的 api

关于选项的格式和思想都是:　用json 的方式{key: value}, jquery/js中都有清晰的数据类型的, 如boolean类型的 false/true, 字符串类型的就要用引号.
而且要能够使用原生的js 和 jquery 联合编程.

配色方案: 经典/常用的:　主色调：　黑/白/各种灰度, 点缀: 金银色/ 深绿/深蓝/深红/暗色系, 显得干净/沉稳... 简洁(但不简单)如同linux的命令行程序一样...

====================================== ================
jqueryui的通用方法:

初始化: $(".selector").accordion({...});
初始化后, 如果要调用方法/事件, 获得/设置option等, 这时, 同样的是使用 accordion方法. 也就是 accordion到底...->
有三种api:

options

        选项名, 相当于 "关键字", (既不是字符串, 也不是bool值, 什么都不是, 是一种 表示结构的 东西, 保留的 东西,...如同c/c++中的关键字for, while,if等等一样), 不要加 引号...
        options的使用方法是:  {option_name1: option_value1,option_name2: option_value2,.... } option的值是有类型的,  该是什么类型, 就用什么类型的格式....
    $(".selector"). accordion(collapsible: true); 
     $(".selector").accordion(heightStyle: "content");

    初始化后, 要操作 "option": Get or set option, after initialization:
       // Getter:
         ## js jquery 中也是弱类型语言, 跟php一样, 你不需要显示的去定义变量的类型, 但是 , 在使用上 , 头脑中是用有 类型 的概念的, 
         ## 并且要严格的 按照 类型 来 操作, 否则 , 就会 出错!!!
         ## 或者说, 除了跟C/c++语言比较,  除了不需要显式的 规定 变量的类型外, 其余的使用 跟 强类型的 是 一样 的!!
           var styleHeight = $(".selector").accordion("option", "styleHeight");  
             
        // Setter:
            $(".selector").accordion("option", "styleHeight", "fill");

methods

  对method的使用, 就更简单了, 直接将方法名作为唯一的参数,进行传递就好了:
      <code>$(".selector").accordion("destroy"/"disable")</code>

events
对事件的使用, 如同对options的使用一样, 只是要在事件上加 function就好了:

    $(".selector").accordion( {
        envent_name: function(event, ui){////},
....
});

===================================== ===

没有:　不用do not have, 而是用 `have no` any functionality...

科技/技术类的页面, 通常使用祈使句, 也叫 "无主句", 就是不使用主语的..., 直接用谓语动词开头的... (祈使句的暗含的主语, 如果真要使用主语 , 用you)!!

================================== ===
accordion 分成两个部分, header + associated panel.
when header is focused, keyboard interaction is available. (focus: n. 焦点; v. 聚焦)
when focus is on a header , the following keyboard commands are available:
space / enter : ... activate panel associated with focused header..

ctrl+up: move focus to associated header

===================================== ===============
accordion的类样式架构:
类样式的命名: 用连接符 - 连接; 命名方式是: 名词/adj - 名词 - 主语(名词) - 谓语(动词/adj. /分词)

.ui-accordion: the outer container of accordion
    .ui-accordion-header:
        the headers of the accordion. The active header will addtionally have a ui-accordion-content-active class, the inactive headers will have a ui-accordion-header-collapsed class. The headers will also have a ui-accordion-icons class if they contain icons.
        .ui-accordion-header-icon 


    .ui-accordion-content:

jQuery中的函数, 事件函数, 以及回调函数, 中会传入一些参数. 当然是由jQuery 框架传进来的, 如: this-这个是隐含的,可写可不写,也叫 "环境上下文" ,每次循环体的动作就是针对这个this处理. 还有一个参数叫index, 索引, 符号随便写, 写成i也行, 后面可能还有data, event, ui等表示对象和事件等的参数, `通常` 索引index是放在第一个参数的位置

jquery中的each就相当于 c语言中的for循环一样. for (i=0; i<10; i++) { 在这个里面只处理/ 引用 i ..}
只是, each中的循环变量是 this. this++;  表示的就是 当前正在遍历 的数组 中的当前 元素. 因此, 在循环体中, 
你可以用this 写 原生的 js, 也可以用 $(this)使用jquery对象

jquery对象还是原生js变量, 不是 根据变量名是否带有$ 来区分的. 而是根据 赋值的结果, 如:
 var cur = $(this) 同样表示jquery对象.
 var $cur = this 同样表示 js 变量.


<script>
$( "#one" ).data( "color", "blue" );
$( "#three" ).data( "color", "green" );
 
$( ":data(color)" ).each(function() {
  var element = $( this );
  element.css( "backgroundColor", element.data( "color" ) );  // 注意, 这里引用值的时候, 就要用ele.data(...)方法了.
});
</script>

open: 不只是动词: 开,打开; 还可以是: "开着的" : my door is always open to visitors.
active: boolean or integer, which panel is currently open.

jquery 的icons 是由 jquery的css framework 框架提供的, 你不能直接使用这些icons, 如通过 img src="..."的img标签来引用是无效的, 而是要通过类来加到其他元素的class中...

jqueryui provides a number of icons that can be used by applying class name to elements. The class names generally follow a syntax of .ui-icon-{icon type}-{icon sub descp}-{direction}

lucid: [lu:sid]: 明朗的, 流畅的, 音: "撸死的"
callback: 一个单词, "回调, 复试等"
fa'cility: 设施/设备, 场所, 天赋,才能:
the computerized phone has a callback facility.

ease: 是easy:容易/轻松的名词和动词: [iz] [i:z]
ease: n.v. : 轻松, 容易, 舒适, 放松; 缓和,缓解...
at ease, with ease, ease one's headache. The relationship between these two countries has eased.

======================================================== =============

jquery的事件, 有两种用法:

一是, 在初始化的时候, 指定一个回调函数: (这个callback将会在初始化从开始到完成的过程中执行) initialize the widget with a activate callback specified.

    $(".selector").accordion({
        activate: function(event, ui){ // ui是一个对象,包括oldHeader, oldPanel, newHeader, newPanel四个属性...}
    });

第二种是, 初始化后, 在任何时候都可以被执行的, 这个叫做" 事件侦听器": event listener, 这个要用事件绑定bind 来实现. 为什么要用事件侦听器呢? 其实这个也很简单! event listener 就跟mfc中的消息机制是一样的! 它处于"等待, 侦听, 伺服, daemon 都可以 (这几个说法都是相等的 )"状态, 一旦有这样的事件发生, 就执行. 是为了解决: 第一种情况的只能在初始化的时候执行一次的问题!!!

    $(".selector").on(
    "accordionactivate", 
    function(event, ui){....}
);

关于jquery/ js 中的数据类型:

数据类型都用单词首字母大写表示: 如: Boolean, Integer,Number, String, Object, Event, Undefined, jQuery. 补充一下, 还有Element, Array!

所谓的Element指的是 html的dom元素, 如: abcc 一样. Array是表示数组, 比如返回多个 html Dom 元素的数组: Array<Elemtent(s)>

dom元素数组在写法上和 jQuery对象的写法可能是类似/相似的, 但是他们的含义是不同的:

如 Array<Element(s)>: [abc 123 ], jQuery对象的写法也可能是这样的:abc 123 ]

(这个比较特殊,是第二个字母大写, 注意Object表示js对象, 市js中一种比较特殊的数据类型: 实际上就是json: {....}. 跟jQuery对象不是一回事, jQuery对象实际上是包含html标签的实体, 如:

<div>text</div> foo 这样的一些 "html 标签实体" 正是这样的 "html标签实体dom", 才能对其使用css(), html()等函数!!

Event, 就是事件, 它是一种单纯的数据类型, 本身没有什么东西, 就和Interger这个单词一样

jquery, js 的事件: 有标准事件,如 click, keydown, focus等, 也有widget自身独有的一些事件.

事件本身也用 Type类型来区分, 来称呼. 如: accordion的activate事件, 它的 Type就是: accordionactivate. 同时, 所有事件的写法, 都用单词的小写组合, 不用驼峰表示法, 如: keydown, accordionactivate...

event: Type: Event :表示 event 这个"变量" 的数据类型是 "Event"

jquery 对象数组的 click等事件处理函数, 和 each 的区别?

click是针对明显的click事件而产生的事件处理函数, 只有当用户点击的时候, 才会执行,
但是, 有的时候, 是要我们在代码中 , 自己调用某些函数功能, 并不一定在click等事件时, 这个时候, 并没有发生什么事件, 或者说发生的不是什么
click事件, 那么这个时候, 要对对象数组/ jQuery 数组进行遍历, 就要显式的去调用 each 这个函数!

=========================================================== ==========

html页面设计理念, 还是回归到设计的本原, 实际上很多时候, 是为了设计而迷失了最根本的东西: 页面设计/布局, 是为了功能, 展示功能, 组织功能和内容. 因此, 干瘪别的是因为你没有什么功能和内容, 如果有足够多的功能和内容, 你会觉得放都放不下呢...

布局, 最核心的, 最根本的就是, 页面是由区块组成的, 区块是组成页面的基本单位. 应该以功能/ 内容类别, 进行"划区域, 分区块"进行展示或组织.

区块的展示, 要分出区块和区块之间的界限, 用边框线可以, 或者用不同的背景颜色, 不同的底色来加以区别;
任何一个区块, 一定要有 "标题 + 内容" 的思想和考虑, 不能一把混杂! 标题可以用更大的字体, 单独占一行, 或者单独一行且有不同的背景...

==================================== =========