jQuery UI Theme

延續 Lazy 2 的版本重新整理與更新。使用 jQuery UI Theme 之前必須搭配 kule-lazy3.min.csskule-lazy3-full.min.css。所有元件請參照其他文件,操作方式請查閱 jQuery UI 官方網站

以下範例來源來自 jQuery UI 官方網站,官方 CSS 當中使用的 Icon 全部移除不包含在內。

Accordion

結構與 Class 命名請參照 Accordion

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.
<div class="accordion">
    <h3 class="accordion-header active">
        <i class="caret"></i>
        Accordion
    </h3>
    <div class="accordion-content">~略~</div>
    <h3 class="accordion-header">
        <i class="caret"></i>
        Accordion
    </h3>
    <div class="accordion-content">~略~</div>
    <h3 class="accordion-header">
        <i class="caret"></i>
        Accordion
    </h3>
    <div class="accordion-content">~略~</div>
</div>

Autocomplete

<input id="autocomplete" class="ctrl-input" />

Button

<button id="button" class="btn">Button</button>
<div id="radioset">
    <input type="radio" id="radio1" name="radio">
    <label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked">
    <label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio">
    <label for="radio3">Choice 3</label>
</div>

Tabs

結構與 Class 命名請參照 Tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
<div id="tabs" class="tab">
    <ul class="tab-nav">
        <li class="tab-nav-item">
            <a class="tab-link" href="#tabs-1">First</a>
        </li>
        <li class="tab-nav-item">
            <a class="tab-link" href="#tabs-2">Second</a>
        </li>
        <li class="tab-nav-item">
            <a class="tab-link" href="#tabs-3">Third</a>
        </li>
    </ul>
    <div id="tabs-1" class="tab-content">~略~</div>
    <div id="tabs-2" class="tab-content">~略~</div>
    <div id="tabs-3" class="tab-content">~略~</div>
</div>

Dialog

<a id="dialog-link" class="btn">Open Dialog</a>

Slider

<div id="slider"></div>

Datepicker

<div id="datepicker"></div>

Progressbar

<div id="progressbar"></div>

Selectmenu

<select id="selectmenu">
    <option>Slower</option>
    <option>Slow</option>
    <option selected="selected">Medium</option>
    <option>Fast</option>
    <option>Faster</option>
</select>

Selectmenu

<input id="spinner" class="ctrl-input">

Menu

<ul id="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3 <span class="caret caret-right"></span>
        <ul>
            <li>Item 3-1</li>
            <li>Item 3-2</li>
            <li>Item 3-3</li>
            <li>Item 3-4</li>
            <li>Item 3-5</li>
        </ul>
    </li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

Tooltip

Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.

<p id="tooltip">
    <a href="#" title="That's what this widget is">Tooltips</a> ~略~
</p>

Highlight / Error

Hey! Sample ui-state-highlight style.


Alert: Sample ui-state-error style.

<div class="ui-widget">
    <div class="ui-state-highlight ui-corner-all">
        <p><strong>Hey!</strong> Sample ui-state-highlight style.</p>
    </div>
</div>

<div class="ui-widget">
    <div class="ui-state-error ui-corner-all">
        <p><strong>Alert:</strong> Sample ui-state-error style.</p>
    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.