Giter VIP home page Giter VIP logo

yii2-widget-affix's Introduction

yii2-widget-affix

Latest Stable Version License Total Downloads Monthly Downloads Daily Downloads

Extends Yii Menu widget. This widget offers a scrollspy and affixed enhanced navigation (upto 2-levels) to highlight sections and secondary sections in each page. The affix widget can be used to generate both the:

  • Sidebar Menu: Displays the scrollspy/affix navigation menu as a sidebar, and/or
  • Main Body: Displays the main body sections based on the section & subsection headings and content passed.

Note: If you have the header section fixed to the top, you must add a CSS class kv-header to the header container. Similarly, for a fixed footer you must add the class kv-footer to your footer container. This will ensure a correct positioning of the affix widget on the page.

The parameters to pass are:

  • type The affix content type. Must be either menu or body. Defaults to menu
  • items: The affix content items as an array. Check the affix combined usage for a detailed example.

NOTE: This extension is a sub repo split of yii2-widgets. The split has been done since 08-Nov-2014 to allow developers to install this specific widget in isolation if needed. One can also use the extension the previous way with the whole suite of yii2-widgets.

Installation

The preferred way to install this extension is through composer. Check the composer.json for this extension's requirements and dependencies. Read this web tip /wiki on setting the minimum-stability settings for your application's composer.json.

To install, either run

$ php composer.phar require kartik-v/yii2-widget-affix "*"

or add

"kartik-v/yii2-widget-affix": "*"

to the require section of your composer.json file.

Latest Release

NOTE: The latest version of the module is v1.0.0 released on 08-Nov-2014. Refer the CHANGE LOG for details.

Demo

You can refer detailed documentation and demos on usage of the extension.

Usage

use kartik\affix\Affix;

$content = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.';
$items = [[
	'url' => '#sec-1',
	'label' => 'Section 1',
	'icon' => 'play-circle',
	'content' => $content,
	'items' => [
		['url' => '#sec-1-1', 'label' => 'Section 1.1', 'content' => $content],
		['url' => '#sec-1-2', 'label' => 'Section 1.2', 'content' => $content],
		['url' => '#sec-1-3', 'label' => 'Section 1.3', 'content' => $content],
		['url' => '#sec-1-4', 'label' => 'Section 1.4', 'content' => $content],
		['url' => '#sec-1-5', 'label' => 'Section 1.5', 'content' => $content],
	],
]];

// Displays sidebar menu
echo Affix::widget([
	'items' => $items, 
	'type' => 'menu'
]);

// Displays body sections
echo Affix::widget([
	'items' => $items, 
	'type' => 'body'
]);

License

yii2-widget-affix is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.

yii2-widget-affix's People

Contributors

camohob avatar kartik-v avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

yii2-widget-affix's Issues

Syntax error with jQuery versions 1.12, 2.2, 3

I've got the following error:

Syntax error, unrecognized expression: .kv-sidebar [href=#]
Line 28 at /vendor/kartik-v/yii2-widget-affix/assets/js/affix.js

Comment on stackoverflow helped to identify the problem: '#' symbol in a selector should be quoted. http://stackoverflow.com/questions/38415960/why-cant-jquery-3-identify-the-character-in-an-attribute-selector

So I've changed the selector to
$('.kv-sidebar [href="#"]')
and it works well now.


Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.