JavaScript 프레임워크(xmlplus) 구성요소 소개 (2) 버튼

xmlplus는 프론트엔드 및 백엔드 프로젝트의 신속한 개발을 위한 JavaScript프레임워크입니다. 이번 글에서는 xmlplus 컴포넌트 디자인 시리즈 중 버튼을 주로 소개했는데, 관심 있는 친구들은

을 참고하면 됩니다. 아이콘 외에도 버튼은 가장 간단한 컴포넌트일 수 있는데, 이제 한 번 살펴보겠습니다. 버튼 그룹 구성 요소를 정의하는 방법을 살펴보세요.

기본 버튼 구성 요소 사용

xmlplus에는 HTML 요소도 구성 요소로 존재합니다. 따라서 버튼 태그나 입력 태그를 이용하여 버튼 컴포넌트를 직접 사용할 수 있습니다. 다음 예에서 볼 수 있듯이:

Example: {
  xml: "<p id=&#39;example&#39;>\
       <button>Default</button>\
       <input type=&#39;submit&#39;>Primary</input>\
     </p>"
}

네이티브 버튼의 외관은 그다지 매력적이지는 않지만, 네이티브 버튼은 특별히 패키징되지 않았기 때문에 렌더링이 가장 빠르고 실행이 가장 효율적입니다.

프로젝트에 특별한 시각적 요구 사항이 없는 경우 Bootstrap 스타일 버튼

을 사용하세요. Bootstrap 스타일을 사용하여 버튼 구성 요소를 정의하는 것이 좋습니다. 부트스트랩 버튼을 전통적인 방식으로 사용하려면 이렇게 사용하면 됩니다.

아아아아

자세히 관찰해 보세요. 요청한 것보다 더 많은 것을 제공한다고 생각하시나요? type=buttons를 많이 찾았을 뿐만 아니라 btn도 많이 찾았습니다. 이제 Bootstrap 스타일을 기반으로 하는 구성 요소가 있지만 버튼 사용이 크게 단순화됩니다.

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>

이 버튼 구성 요소는 원본 버튼에 반복적으로 작성해야 하는 내용을 캡슐화합니다. 이를 사용할 때 대상 버튼을 지정하려면 속성 만 제공하면 됩니다. 사용하기 더 편리합니다. 다음은 새 버튼 컴포넌트 를 사용하는 방법입니다.

아아아아

아이콘이 있는 버튼

버튼에는 텍스트 외에도 아이콘이 있을 수 있습니다. 적절한 아이콘은 버튼의 목적을 더욱 생생하고 직관적으로 만들 수 있습니다. 여기서는 EasyUI의 아이콘 버튼을 예로 들어 아이콘 버튼을 캡슐화하고 사용하는 방법을 보여줍니다. 먼저 EasyUI 아이콘 버튼의 원래 용도를 살펴보겠습니다.

Button: {
  xml: "<button type=&#39;button&#39; class=&#39;btn&#39;/>",
  fun: function (sys, items, opts) {
    this.addClass("btn-" + opts.type);
  }
}

는 이전 섹션의 부트스트랩 버튼 캡슐화와 유사하며 관찰을 통해 반복되는 부분을 추출하고 변경된 부분을 인터페이스 형식으로 표시합니다. 위 버튼의 아이콘 유형 이름과 텍스트만 가변적이므로 다음과 같은 디자인을 만들 수 있습니다.

<Button type=&#39;default&#39;>Default</Button>
<Button type=&#39;primary&#39;>Primary</Button>
<Button type=&#39;success&#39;>Success</Button>

다음은 새 아이콘을 사용하는 방법으로 원래 사용 방법보다 확실히 훨씬 간단합니다. 그것.

<p style="padding:5px 0;">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:&#39;icon-add&#39;">Add</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:&#39;icon-remove&#39;">Remove</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:&#39;icon-save&#39;">Save</a>
</p>

버튼 구성 요소 사용자 정의

Bootstrap, EasyUI 등과 같은 오픈 소스 프레임워크를 사용하여 수레를 재발명하지 마세요. 그러나 이러한 오픈 소스 프로젝트가 귀하의 요구 사항을 충족하지 못하는 경우 직접 수행해야 합니다.

단순화를 위해 이제 위의 부트스트랩 프레임워크가 존재하지 않는다고 가정하면 위의 버튼 세트를 어떻게 디자인합니까? 이런 종류의 연습은 매우 의미가 있으며 한 예에서 다른 예로 추론하는 데 도움이 됩니다.

이제 위의 버튼 구성요소를 다시 살펴보겠습니다. Bootstrap은 결합될 수 있는 일부 스타일 클래스를 설계했으며 그 중 btn은 모든 버튼에 필요합니다. 또한 btn-default, btn-primary 등은 필요에 따라 btn과 결합된 스타일 클래스를 형성할 수 있습니다. 좋아요, 이 아이디어를 바탕으로 다음과 같은 구성요소 프레임워크를 설계할 수 있습니다.

Button: {
  xml: "<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton"/>",
  fun: function (sys, items, opts) {
    this.attr("data-options" + "iconCls:&#39;icon-" + opts.type);
  }
}

위의 디자인 아이디어와 이전의 부트스트랩 스타일 정의 버튼을 직접 사용하는 것의 차이점은 전자가 이미 각 전역 스타일 클래스를 정의했기 때문에 직접 인용 하기만 하면 된다는 것입니다. . 여기서는 버튼 구성 요소 내에서 관련 스타일 클래스를 정의해야 합니다. 캡슐화 관점에서 보면 후자가 전역 클래스 이름을 노출하지 않기 때문에 전자보다 응집력이 더 높습니다. 다음은 이 구성 요소의 사용 예입니다.

<p style="padding:5px 0;">
  <Button type=&#39;add&#39;>Add</Button>
  <Button type=&#39;remove&#39;>Reomve</Button>
  <Button type=&#39;save&#39;>Save</Button>
  <Button type=&#39;cut&#39;>Cut</Button>
</p>

단순함을 위해 여기의 사용자 정의 버튼 구성 요소에는 호버 및 활성 스타일이 생략되어 있으므로 부트스트랩 버튼과 다소 다릅니다.

이 기사 시리즈는 xmlplus 프레임워크를 기반으로 합니다. xmlplus에 대해 잘 모르신다면 www.xmlplus.cn을 방문해 보세요. 자세한 시작 설명서는 여기에서 확인할 수 있습니다.

위 내용은 JavaScript 프레임워크(xmlplus) 구성요소 소개 (2) 버튼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!